computed 计算属性
computed 允许你创建基于响应式数据的派生状态，这些状态的值会根据相关的响应式数据动态计算而来。它返回一个 ref 对象。
import { ref, computed } from 'vue';
const count = ref(1);
const squared = computed(() => {
return count.value * count.value;
});
console.log(squared.value); // 输出: 1
count.value = 2;
console.log(squared.value); // 输出: 4
在上述示例中，squared 是一个计算属性，它的值基于 count 的平方。当 count 的值发生变化时，squared 会自动更新。
watch 侦听器
watch 允许你在响应式数据发生变化时执行自定义的操作。它可以监视一个或多个数据，并在数据变化时触发回调函数。
import { ref, watch } from 'vue';
const count = ref(1);
watch(() => {
console.log('count changed:', count.value);
});
count.value = 2;
// 输出: count changed: 2
你还可以监视多个数据：
watch([() => count.value, () => anotherValue.value], ([newCount, newAnotherValue], [oldCount, oldAnotherValue]) => {
console.log('count or anotherValue changed:', newCount, newAnotherValue, oldCount, oldAnotherValue);
});
在 watch 中，第一个参数可以是一个 getter 函数，返回一个要监视的值，也可以是一个包含 getter 函数的数组。
这就是在 Vue 3.0 中使用 computed 和 watch 的基本用法。它们使得你能够更灵活地处理和响应状态的变化，从而构建更复杂的应用。
转载请注明出处：http://www.zyzy.cn/article/detail/580/Vue 3.0