computed计算属性
对于任何复杂逻辑，你都应当使用计算属性。
computed计算属性的作用是对数据的计算和缓存，优点是能够提高性能。
vue2中,没咋用vue2写过项目，所以基本的代码展示都以vue3的格式。
method:{},
computed:{},
vue3
const num1 = ref('')
const num2 = ref('')
const num3 = computed(() => {
return Number(num1.value) + Number(num2.value)
})
// 计算属性求和->不能直接修改，修改必须实现set方法
const num3 = computed({
get: () => {
return Number(all.num1) + Number(all.num2)
},
set:(value) => {
console.log(value)
return all.num2 = Number(value) + 1
}
})
监听watch
监听基本属性
const nums = ref(9)
watch(nums, (newValue, oldValue) => {
console.log('watch 已触发', newValue)
})
监听复杂类型
const demo = reactive({
name: '小王',
nickName: '小王',
soulmate: {
name: '',
nickName: ''
}
})
//1.监听整个对象，只要这个对象有任何修改，那么就会触发 watch 方法。
watch(demo, (newValue, oldValue) => {
console.log('watch 已触发', newValue)
})
//2.监听对象的所有属性，跟第一种效果一样
watch(() => demo, (newValue, oldValue) => {
console.log('watch 已触发', newValue)
}, { deep: true })
//3.监听具体属性
watch(() => demo.name, (newValue, oldValue) => {
console.log('watch 已触发', newValue)
})
//4.只监听子属性，（孙属性都不行）
watch(() => ({ ...demo }), (newValue, oldValue) => {
console.log('watch 已触发', newValue)
})
//组合监听，用数组包括不同的类型，但是我觉得这样的可读性不是很好，还是要根据具体业务来
watch([() => demo.name, nums], ([newName, newNums], [oldName, oldNums]) => {
console.log('watch 已触发: name', newName)
console.log('watch 已触发: nums', newNums)
})
第三个参数，有immediate和deep两种，immediate 的作用就是设置是否立即执行监控，当我们将其值设置为 true 时，那么被监控的对象在初始化时就会触发一次 watch 方法，相当于页面一刷新就会触发。
computed和watch的区别
1、computed是计算属性；watch是监听，监听data中的数据变化。
2、computed支持缓存，当其依赖的属性的值发生变化时，计算属性会重新计算，反之，则使用缓存中的属性值；watch不支持缓存，当对应属性发生变化的时候，响应执行。
const dataSource = computed({
get() {
return {
fieldList: dataList.value,
};
},
set(newValue) {
const newList = newValue.fieldList;
const newAllDataList = allDataList.value.map((table) => {
const newTable = newList.find((item) => item.tableName === table.tableName);
return newTable || table;
});
setAllDataList(newAllDataList);
},
});
3、computed不支持异步，有异步操作时无法监听数据变化；watch支持异步操作。
4、computed第一次加载时就监听；watch默认第一次加载时不监听。
immediate 组件创建时刻执行与否
immediate: true,第一次加载时监听（默认为false）
watch(() => props.visible, (value) => {
if (value) {//value的值就是props.visible,当数据变化时触发操作
showSelectTableDialog.value = true;// 每次都默认打开
}
}, { immediate: true });
deep 深度监听 不推荐使用(非常的消耗性能)
监听的属性是对象的话 不开启deep 对象子属性变化不会触发watch
开启了deep 对象内部所有子属性变化 都会触发watch
[deep还没有用过，不是特别理解]
5、computed中的函数必须调用return(计算后要有一个结果噻)；watch不是。
6、使用场景：
computed：一个属性受到多个属性影响，如：购物车商品结算。
watch：一个数据影响多条数据，如：搜索数据。
数据变化响应，执行异步操作，或高性能消耗的操作，watch为最佳选择。
参考资料：
https://www.cnblogs.com/meirongliu/p/17184104.html
https://blog.csdn.net/weixin_64222137/article/details/129880092