Vue3中<script setup>和setup函数的区别是什么

在Vue 3中，Composition API的引入为开发者提供了更灵活和强大的方式来组织和复用代码逻辑。其中，setup函数和<script setup>语法是两种常见的编写方式。虽然它们都用于定义组件的逻辑，但在使用方式、语法和功能上存在一些显著的区别。本文将详细探讨这两种方式的区别，帮助开发者更好地理解和使用它们。

1. 基本概念

1.1 setup函数

setup函数是Vue 3 Composition API的核心部分。它是一个特殊的函数，用于定义组件的逻辑。setup函数在组件实例创建之前执行，并且接收两个参数：props和context。在setup函数中，开发者可以定义响应式数据、计算属性、方法等，并将它们返回给模板使用。

export default {
  props: {
    message: String,
  },
  setup(props, context) {
    const count = ref(0);

    function increment() {
      count.value++;
    }

    return {
      count,
      increment,
    };
  },
};

1.2 <script setup>

<script setup>是Vue 3.2引入的一种新的语法糖，用于简化setup函数的编写。它允许开发者直接在<script>标签中使用Composition API，而不需要显式地定义setup函数。<script setup>会自动将顶层变量和函数暴露给模板，使得代码更加简洁。

<script setup>
import { ref } from 'vue';

const count = ref(0);

function increment() {
  count.value++;
}
</script>

<template>
  <button @click="increment">{{ count }}</button>
</template>

2. 语法差异

2.1 setup函数的语法

在setup函数中，开发者需要显式地定义setup函数，并在其中编写逻辑。setup函数接收props和context两个参数，并且需要返回一个对象，该对象包含需要在模板中使用的变量和函数。

export default {
  props: {
    message: String,
  },
  setup(props, context) {
    const count = ref(0);

    function increment() {
      count.value++;
    }

    return {
      count,
      increment,
    };
  },
};

2.2 <script setup>的语法

<script setup>语法更加简洁，开发者不需要显式地定义setup函数。所有在<script setup>中定义的顶层变量和函数都会自动暴露给模板。此外，<script setup>还支持一些特殊的语法，如defineProps和defineEmits，用于定义组件的props和emits。

<script setup>
import { ref } from 'vue';

const count = ref(0);

function increment() {
  count.value++;
}
</script>

<template>
  <button @click="increment">{{ count }}</button>
</template>

3. 功能差异

3.1 props和context的处理

在setup函数中，props和context作为参数传递给setup函数。开发者可以通过props访问组件的props，通过context访问emit、slots和attrs等。

export default {
  props: {
    message: String,
  },
  setup(props, context) {
    console.log(props.message);
    context.emit('event-name');
  },
};

在<script setup>中，props和emits可以通过defineProps和defineEmits来定义。context的其他部分（如slots和attrs）可以通过useSlots和useAttrs来访问。

<script setup>
import { defineProps, defineEmits, useSlots, useAttrs } from 'vue';

const props = defineProps({
  message: String,
});

const emit = defineEmits(['event-name']);

const slots = useSlots();
const attrs = useAttrs();

console.log(props.message);
emit('event-name');
</script>

3.2 响应式数据的定义

在setup函数中，响应式数据通常通过ref或reactive来定义，并且需要在setup函数中返回。

export default {
  setup() {
    const count = ref(0);
    const state = reactive({
      name: 'Vue',
    });

    return {
      count,
      state,
    };
  },
};

在<script setup>中，响应式数据可以直接在顶层定义，并且会自动暴露给模板。

<script setup>
import { ref, reactive } from 'vue';

const count = ref(0);
const state = reactive({
  name: 'Vue',
});
</script>

<template>
  <div>{{ count }}</div>
  <div>{{ state.name }}</div>
</template>

3.3 生命周期钩子

在setup函数中，生命周期钩子可以通过onMounted、onUpdated等函数来定义。

export default {
  setup() {
    onMounted(() => {
      console.log('Component is mounted');
    });

    onUpdated(() => {
      console.log('Component is updated');
    });
  },
};

在<script setup>中，生命周期钩子同样可以通过onMounted、onUpdated等函数来定义。

<script setup>
import { onMounted, onUpdated } from 'vue';

onMounted(() => {
  console.log('Component is mounted');
});

onUpdated(() => {
  console.log('Component is updated');
});
</script>

3.4 模板引用

在setup函数中，模板引用可以通过ref函数来定义，并且需要在setup函数中返回。

export default {
  setup() {
    const inputRef = ref(null);

    onMounted(() => {
      inputRef.value.focus();
    });

    return {
      inputRef,
    };
  },
};

在<script setup>中，模板引用同样可以通过ref函数来定义，并且会自动暴露给模板。

<script setup>
import { ref, onMounted } from 'vue';

const inputRef = ref(null);

onMounted(() => {
  inputRef.value.focus();
});
</script>

<template>
  <input ref="inputRef" />
</template>

4. 代码组织和复用

4.1 setup函数的代码组织

在setup函数中，开发者可以将逻辑组织在setup函数内部，或者将逻辑提取到外部的函数或模块中。这种方式适合复杂的逻辑，尤其是当逻辑需要在多个组件中复用时。

// useCounter.js
import { ref } from 'vue';

export function useCounter() {
  const count = ref(0);

  function increment() {
    count.value++;
  }

  return {
    count,
    increment,
  };
}

// MyComponent.vue
import { useCounter } from './useCounter';

export default {
  setup() {
    const { count, increment } = useCounter();

    return {
      count,
      increment,
    };
  },
};

4.2 <script setup>的代码组织

在<script setup>中，开发者同样可以将逻辑提取到外部的函数或模块中。由于<script setup>的语法更加简洁，代码的组织和复用也更加方便。

// useCounter.js
import { ref } from 'vue';

export function useCounter() {
  const count = ref(0);

  function increment() {
    count.value++;
  }

  return {
    count,
    increment,
  };
}

// MyComponent.vue
<script setup>
import { useCounter } from './useCounter';

const { count, increment } = useCounter();
</script>

<template>
  <button @click="increment">{{ count }}</button>
</template>

5. 性能差异

5.1 setup函数的性能

setup函数在组件实例创建之前执行，因此它的性能与组件的初始化过程密切相关。由于setup函数需要显式地返回一个对象，因此在大型组件中，setup函数的代码可能会变得冗长，影响代码的可读性和维护性。

5.2 <script setup>的性能

<script setup>语法更加简洁，减少了不必要的代码量，因此在性能上可能会有一些微小的优势。此外，<script setup>的自动暴露机制可以减少手动返回对象的操作，进一步简化代码。

6. 兼容性和工具支持

6.1 setup函数的兼容性

setup函数是Vue 3 Composition API的核心部分，因此在Vue 3中完全支持。大多数Vue生态工具（如Vue Router、Vuex等）也都支持setup函数。

6.2 <script setup>的兼容性

<script setup>是Vue 3.2引入的新特性，因此在Vue 3.2及以上版本中完全支持。对于Vue 3.2以下的版本，<script setup>可能无法正常工作。此外，一些工具（如Vetur、Vue DevTools等）可能需要更新以更好地支持<script setup>。

7. 总结

setup函数和<script setup>是Vue 3中两种常见的编写方式，它们在语法、功能、代码组织和性能等方面存在一些差异。setup函数适合复杂的逻辑和需要手动控制的场景，而<script setup>则提供了更加简洁和自动化的语法，适合快速开发和代码复用。

开发者可以根据项目的需求和个人的偏好选择合适的编写方式。无论选择哪种方式，Vue 3的Composition API都为开发者提供了强大的工具来构建高效、可维护的组件。