Vue3通透教程【六】: setup语法糖、computed函数与watch函数

在Vue3中，新引入的setup语法糖使得组件逻辑更加清晰和易于维护。同时，Vue3也提供了computed函数和watch函数，以便于进行数据观察和计算。接下来，我们将通过实例和代码来详细解释这些概念。
一、setup语法糖
在Vue2中，我们通常在data、methods、computed等选项中定义组件的属性和方法。而在Vue3中，这些选项被整合到了一个新的setup函数中，这就是所谓的setup语法糖。
通过setup函数，我们可以更加灵活地组织和复用组件逻辑。在setup函数中，我们可以访问到组件的响应式数据、属性和方法，从而进行更复杂的数据处理和逻辑操作。
下面是一个简单的例子，演示了如何在Vue3中使用setup函数：

import { ref, computed } from 'vue';
export default {
setup() {
const count = ref(0);
const doubleCount = computed(() => count.value * 2);
function increment() {
count.value++;
}
return {
count,
doubleCount,
increment,
};
},
};

在上面的例子中，我们在setup函数中定义了一个响应式的count变量和一个计算属性doubleCount。同时，我们还定义了一个方法increment用于增加count的值。最后，我们通过return语句将它们暴露给模板。
二、computed函数
在Vue3中，我们可以使用计算属性（computed property）来对组件的响应式数据进行更复杂的操作。计算属性是基于它们的依赖关系进行缓存的，只有当依赖关系发生变化时才会重新计算。这使得计算属性的性能更加高效。
下面是一个使用计算属性的例子：

import { ref, computed } from 'vue';
export default {
setup() {
const count = ref(0);
const doubleCount = computed(() => count.value * 2);
const tripleCount = computed(() => count.value * 3);
return {
count,
doubleCount,
tripleCount,
};
},
};

在上面的例子中，我们定义了两个计算属性doubleCount和tripleCount，分别用于将count的值乘以2和3。这样，我们就可以在模板中直接使用这两个计算属性，而不需要手动进行复杂的计算操作。计算属性非常适合用于处理需要对多个数据进行复杂运算的情况。
三、watch函数
watch函数是Vue3中用于观察响应式数据变化并执行特定操作的函数。与计算属性类似，watch函数也是基于它们的依赖关系进行缓存的。当依赖关系发生变化时，watch函数将被重新调用。watch函数可以用于处理一些异步或复杂的数据操作。下面是一个使用watch函数的例子：

import { ref, watch } from 'vue';
import axios from 'axios'; // 假设我们使用axios进行网络请求
export default {
setup() {
const count = ref(0);
watch(count, async (newValue) => {
if (newValue % 2 === 0) { // 只有当count为偶数时才发起请求
await axios.get('https://api.example.com/data'); // 发起网络请求获取数据
}
});
},
};