computed和wacth的區(qū)別？watch實(shí)現(xiàn)原理？watch有幾種寫法？

computed:

• 是一個(gè)計(jì)算屬性，用于基于依賴的響應(yīng)式數(shù)據(jù)進(jìn)行計(jì)算，并返回一個(gè)新的值。
• ?值會(huì)被緩存，只有依賴的數(shù)據(jù)發(fā)生變化時(shí)才會(huì)重新計(jì)算，如果依賴的數(shù)據(jù)沒有發(fā)生變化，則會(huì)直接返回之前緩存的值。
• ?屬性的值是一個(gè)函數(shù)，可以通過在模板中調(diào)用這個(gè)屬性來獲取計(jì)算后的值。

watch:

• 是一個(gè)觀察者，用于在數(shù)據(jù)變化時(shí)執(zhí)行指定的回調(diào)函數(shù)。
• 可以監(jiān)聽一個(gè)或多個(gè)數(shù)據(jù)的變化，一旦監(jiān)聽的數(shù)據(jù)發(fā)生變化，就會(huì)執(zhí)行相應(yīng)的回調(diào)函數(shù)。
• 適用于需要在數(shù)據(jù)變化時(shí)執(zhí)行異步操作或?qū)?shù)據(jù)變化作出復(fù)雜響應(yīng)的場(chǎng)景。

computedc 適用于根據(jù)依賴的響應(yīng)式數(shù)據(jù)進(jìn)行計(jì)算并返回新值的場(chǎng)景，而?wacth適用于監(jiān)聽一個(gè)或多個(gè)數(shù)據(jù)的變化來執(zhí)行復(fù)雜的響應(yīng)邏輯或異步操作的場(chǎng)景。

watch實(shí)現(xiàn)的原理：

• watch使用了 Vue 的響應(yīng)式系統(tǒng)來監(jiān)聽數(shù)據(jù)變化。
• 當(dāng)調(diào)用?watch方法時(shí)，Vue 會(huì)在內(nèi)部使用?object.defineProperty來定義一個(gè)被觀察的屬性，以便在數(shù)據(jù)發(fā)生變化時(shí)觸發(fā)相應(yīng)的回調(diào)函數(shù)。
• 在回調(diào)函數(shù)中，可以訪問到新值(newVal)和舊值(oldVal)，并可以執(zhí)行相應(yīng)的邏輯。

watch的幾種寫法：

• 簡(jiǎn)單寫法：

watch: {
  dataToWatch(newValue, oldValue) {
    // 監(jiān)聽的回調(diào)函數(shù)
  }
}  

• 函數(shù)寫法：

watch: {
  dataToWatch: {
    handler(newValue, oldValue) {
      // 監(jiān)聽的回調(diào)函數(shù)
    },
    deep: true, // 是否深度監(jiān)聽
    immediate: false // 是否在組件初始化時(shí)立即執(zhí)行回調(diào)函數(shù)，默認(rèn)為 false
  }
}   

• 字符串方法名寫法：

watch: {
  'dataToWatch': 'methodName'
}
// 然后在 methods 中定義對(duì)應(yīng)的 methodName 方法，
// methodName 方法將會(huì)被用作回調(diào)函數(shù)，接收兩個(gè)參數(shù)：新值和舊值。