【Vue3】setup参数细讲！computed计算属性和watch监听属性

**Vue3 的 `setup` 函数**

在 Vue2 中，我们使用 `data` 和 `methods` 来定义组件的数据和方法。在 Vue3 中，引入了一个新的函数 `setup`，用来取代 `data` 和 `methods`。这个函数提供了一种更灵活、更强大的方式来定义组件的逻辑。

**setup 函数的参数**

`setup` 函数接受两个参数：`props` 和 `context`。

* `props`:这是一个包含组件 props 的对象。
* `context`:这是一个包含组件上下文信息的对象，包括 `$attrs`、`$emit` 等。

**computed 计算属性**

在 Vue2 中，我们使用 `computed` 函数来定义计算属性。在 Vue3 中，这个函数仍然存在，但它现在是 `setup` 函数的一部分。我们可以在 `setup` 函数中使用 `computed` 来定义计算属性。

javascript// setup 函数export default {
 setup(props, context) {
 const count = computed(() => props.count +1);
 return { count };
 },
};

在这个例子中，我们定义了一个名为 `count` 的计算属性，它的值是 `props.count` 加1。

**watch 监听属性**

在 Vue2 中，我们使用 `watch` 函数来监听组件的数据变化。在 Vue3 中，这个函数仍然存在，但它现在是 `setup` 函数的一部分。我们可以在 `setup` 函数中使用 `watch` 来监听组件的数据变化。

javascript// setup 函数export default {
 setup(props, context) {
 watch(() => props.count, (newCount) => {
 console.log(`count changed to ${newCount}`);
 });
 return {};
 },
};

在这个例子中，我们监听 `props.count` 的变化，当它发生时，会输出一个日志。

**setup 函数的返回值**

`setup` 函数的返回值是一个对象，这个对象包含了组件的数据和方法。我们可以在这个对象中定义计算属性和监听属性。

javascript// setup 函数export default {
 setup(props, context) {
 const count = computed(() => props.count +1);
 watch(() => props.count, (newCount) => {
 console.log(`count changed to ${newCount}`);
 });
 return { count };
 },
};

在这个例子中，我们定义了一个名为 `count` 的计算属性和一个监听 `props.count` 的变化的函数。

**总结**

Vue3 的 `setup` 函数提供了一种更灵活、更强大的方式来定义组件的逻辑。我们可以在 `setup` 函数中使用 `computed` 和 `watch` 来定义计算属性和监听属性。这些功能使得我们的组件更加易于维护和扩展。

**参考**

* Vue3 文档： />* Vue3 的 `setup` 函数文档：