Vue3-setup语法糖

发布于 2025-02-07  464 次阅读


在 Vue 3 中,<script setup> 是一种简化的脚本语法,专门为 Composition API 设计。它提供了一种更简洁的方式来使用 Composition API,而不需要显式地定义和导出 setup 函数。当您使用 <script setup> 时,Vue 会自动处理内部的逻辑,并将其与组件实例关联起来。

如果 <script setup> 能够成功执行,这确实是因为它内部隐式地使用了 setup 函数的逻辑,但您作为开发者不需要显式地写出 setup 函数名。Vue 会解析 <script setup> 标签内的内容,并将其作为 setup 函数的主体来处理。

如果您不使用 <script setup>,而是使用传统的 <script> 标签,那么您就需要显式地定义一个 setup 函数,并将其作为组件选项的一部分导出。这里是一个例子:

<script>
import HelloWorld from './components/HelloWorld.vue';
import TheWelcome from './components/TheWelcome.vue';

export default {
  components: {
    HelloWorld,
    TheWelcome
  },
  setup() {
    // 在这里定义响应式数据、计算属性、方法等
    const message = '你干嘛哎哟'; // 注意:这里 message 不是响应式的,除非使用 ref 或 reactive

    // 如果需要响应式数据,应该这样做:
    import { ref } from 'vue';
    const message = ref('你干嘛哎哟');

    // 返回需要在模板中使用的数据、方法等
    return {
      message
    };
  }
}
</script>

在这个例子中,setup 函数被显式地定义并导出为组件选项的一部分。同时,组件也被注册在 components 选项中。这是在使用传统 <script> 标签时定义和使用 setup 函数的典型方式。

然而,请注意,在上面的传统 <script> 示例中,即使您导入了组件(HelloWorldTheWelcome),如果它们没有在模板中被使用,Vue 也不会报错。但是,如果您在模板中使用了这些组件,但没有在 components 选项中注册它们,Vue 将会报错。

另外,关于响应式数据,如果您在 setup 函数中定义了普通变量(如上面的第一个 message 示例),那么这些变量将不是响应式的。要使它们成为响应式的,您需要使用 refreactive 函数(如上面的第二个 message 示例所示)。

下次见面会是什么时候呢?
最后更新于 2025-02-07