computed計(jì)算屬性

對(duì)于任何復(fù)雜邏輯，你都應(yīng)當(dāng)使用計(jì)算屬性。
computed計(jì)算屬性的作用是對(duì)數(shù)據(jù)的計(jì)算和緩存，優(yōu)點(diǎn)是能夠提高性能。
vue2中,沒咋用vue2寫過項(xiàng)目，所以基本的代碼展示都以vue3的格式。

method:{},
computed:{},

vue3

const num1 = ref('')
      const num2 = ref('')
      const num3 = computed(() => {
        return Number(num1.value) + Number(num2.value)
      })
 // 計(jì)算屬性求和->不能直接修改，修改必須實(shí)現(xiàn)set方法
      const num3 = computed({
        get: () => {
          return Number(all.num1) + Number(all.num2)
        },
        set:(value) => {
          console.log(value)
          return all.num2 = Number(value) + 1
        }
      })

監(jiān)聽watch

監(jiān)聽基本屬性

const nums = ref(9)
watch(nums, (newValue, oldValue) => {
    console.log('watch 已觸發(fā)', newValue)
})

監(jiān)聽復(fù)雜類型

const demo = reactive({
	name: '小王',
	nickName: '小王',
	soulmate: {
		name: '',
		nickName: ''
	}
})

//1.監(jiān)聽整個(gè)對(duì)象，只要這個(gè)對(duì)象有任何修改，那么就會(huì)觸發(fā) watch 方法。
watch(demo, (newValue, oldValue) => {
    console.log('watch 已觸發(fā)', newValue)
})
//2.監(jiān)聽對(duì)象的所有屬性，跟第一種效果一樣
watch(() => demo, (newValue, oldValue) => {
	console.log('watch 已觸發(fā)', newValue)
}, { deep: true })
//3.監(jiān)聽具體屬性
watch(() => demo.name, (newValue, oldValue) => {
    console.log('watch 已觸發(fā)', newValue)
})
//4.只監(jiān)聽子屬性，（孫屬性都不行）
watch(() => ({ ...demo }), (newValue, oldValue) => {
    console.log('watch 已觸發(fā)', newValue)
})

//組合監(jiān)聽，用數(shù)組包括不同的類型，但是我覺得這樣的可讀性不是很好，還是要根據(jù)具體業(yè)務(wù)來
watch([() => demo.name, nums], ([newName, newNums], [oldName, oldNums]) => {
	console.log('watch 已觸發(fā): name', newName)
	console.log('watch 已觸發(fā): nums', newNums)
})

第三個(gè)參數(shù)，有immediate和deep兩種，immediate 的作用就是設(shè)置是否立即執(zhí)行監(jiān)控，當(dāng)我們將其值設(shè)置為 true 時(shí)，那么被監(jiān)控的對(duì)象在初始化時(shí)就會(huì)觸發(fā)一次 watch 方法，相當(dāng)于頁(yè)面一刷新就會(huì)觸發(fā)。

computed和watch的區(qū)別

1、computed是計(jì)算屬性；watch是監(jiān)聽，監(jiān)聽data中的數(shù)據(jù)變化。

2、computed支持緩存，當(dāng)其依賴的屬性的值發(fā)生變化時(shí)，計(jì)算屬性會(huì)重新計(jì)算，反之，則使用緩存中的屬性值；watch不支持緩存，當(dāng)對(duì)應(yīng)屬性發(fā)生變化的時(shí)候，響應(yīng)執(zhí)行。

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不支持異步，有異步操作時(shí)無法監(jiān)聽數(shù)據(jù)變化；watch支持異步操作。

4、computed第一次加載時(shí)就監(jiān)聽；watch默認(rèn)第一次加載時(shí)不監(jiān)聽。
immediate 組件創(chuàng)建時(shí)刻執(zhí)行與否
immediate: true,第一次加載時(shí)監(jiān)聽（默認(rèn)為false）

watch(() => props.visible, (value) => {
  if (value) {//value的值就是props.visible,當(dāng)數(shù)據(jù)變化時(shí)觸發(fā)操作
    showSelectTableDialog.value = true;// 每次都默認(rèn)打開
  }
}, { immediate: true });

deep 深度監(jiān)聽 不推薦使用(非常的消耗性能)
監(jiān)聽的屬性是對(duì)象的話 不開啟deep 對(duì)象子屬性變化不會(huì)觸發(fā)watch
開啟了deep 對(duì)象內(nèi)部所有子屬性變化 都會(huì)觸發(fā)watch
[deep還沒有用過，不是特別理解]
5、computed中的函數(shù)必須調(diào)用return(計(jì)算后要有一個(gè)結(jié)果噻)；watch不是。

6、使用場(chǎng)景：
computed：一個(gè)屬性受到多個(gè)屬性影響，如：購(gòu)物車商品結(jié)算。
watch：一個(gè)數(shù)據(jù)影響多條數(shù)據(jù)，如：搜索數(shù)據(jù)。
數(shù)據(jù)變化響應(yīng)，執(zhí)行異步操作，或高性能消耗的操作，watch為最佳選擇。

參考資料：
http://www.rzrgm.cn/meirongliu/p/17184104.html
https://blog.csdn.net/weixin_64222137/article/details/129880092