computed&watch

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