computed
模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护，对于任何包含响应式数据的复杂逻辑，你都应该使用计算属性。
计算属性与methods区别：
computed是带缓存的，如果被依赖的变量不发生变化，则下次调用computed时不会重新计算结果。但是methods则是每次调用都会重新运行以得出实时的结果。
methods调用需要加()
import { computed, ref } from "vue"; export default { setup() { const count = ref(0); //声明 const twofold = computed(() => { return count.value * 2; }); return { count, twofold } } }
watch
(计算属性监测的是某个值的依赖的变化，侦听属性监测的是值自身的变化)
import { watch, ref } from "vue"; export default { setup() { const count = ref(0); //声明 watch(count, (newData,oldData) => { // 逻辑代码 }) return { count }; }, };
watch 的第一个参数可以是不同形式的“数据源”：它可以是一个 ref (包括计算属性)、一个响应式对象、一个 getter 函数、或多个数据源组成的数组
const x = ref(0) const y = ref(0) // 单个 ref watch(x, (newX) => { console.log(`x is ${newX}`) }) // getter 函数 watch( () => x.value + y.value, (sum) => { console.log(`sum of x + y is: ${sum}`) } ) // 多个来源组成的数组 watch([x, () => y.value], ([newX, newY]) => { console.log(`x is ${newX} and y is ${newY}`) })
这里需要用一个返回该属性的 getter 函数：
// 提供一个 getter 函数 watch( () => obj.count, (count) => { console.log(`count is: ${count}`) } )
