Setup Script：Vue 3 中的魔法棒

2023-10-30 02:10:44

在 Vue 3 中，setup 脚本是一个引入革命性的概念。它替代了之前的 options API，提供了更多灵活性、更简洁的语法以及更强大的功能。

易于编写响应式状态

setup 脚本的核心功能之一是轻松管理响应式状态。之前在 Vue 2 中，需要使用 data() 方法显式创建响应式数据，而在 Vue 3 中，直接在 setup 脚本中声明变量即可实现响应性。

const count = ref(0);

简洁易懂的模板

setup 脚本还引入了新的模板语法。之前在 Vue 2 中，使用 <template> 块来定义组件模板。但在 Vue 3 中，可以直接在 setup 脚本中使用 <template> 修饰符来定义模板。

export default {
  setup() {
    return {
      count: ref(0),
    };
  },
  template: `<button @click="count.value++">点击我</button>`,
};

统一生命周期钩子

Vue 3 中的 setup 脚本还统一了生命周期钩子。这意味着不再需要使用 beforeCreate()、created() 等钩子，而是在 setup 脚本中直接定义。

export default {
  setup() {
    onMounted(() => {
      console.log('组件已挂载');
    });
  },
  template: '<p>我是组件</p>',
};

示例：计数器组件

为了更好地理解 setup 脚本，让我们创建一个简单的计数器组件。

import { ref, onMounted } from 'vue';

export default {
  setup() {
    const count = ref(0);

    onMounted(() => {
      setInterval(() => {
        count.value++;
      }, 1000);
    });

    return {
      count,
    };
  },
  template: `<p>计数：{{ count }}</p>`,
};