computed 計(jì)算屬性說明:

computed 是基于響應(yīng)性依賴來進(jìn)行緩存的。只有依賴數(shù)據(jù)發(fā)生改變，才會(huì)重新進(jìn)行計(jì)算（當(dāng)觸發(fā)重新渲染，若依賴數(shù)據(jù)沒有改變，則 computed 不會(huì)重新計(jì)算）。若沒改變，計(jì)算屬性會(huì)立即返回之前緩存的計(jì)算結(jié)果。

不支持異步，當(dāng) computed 內(nèi)有異步操作時(shí)無效，無法監(jiān)聽數(shù)據(jù)的變化的值。

computed 中的成員可以只定義一個(gè)函數(shù)作為只讀屬性, 也可以定義成 get/set 變成可讀寫屬性

如果一個(gè)屬性是由其他屬性計(jì)算而來的，這個(gè)屬性依賴其他屬性，是一個(gè)多對(duì)一或者一對(duì)一，一般用 computed。

下面的計(jì)算屬性將不再更新，因?yàn)?Date.now() 不是響應(yīng)式依賴：

computed: {
 now: function () {
 return Date.now()
 }
}

相比之下，每當(dāng)觸發(fā)重新渲染時(shí)，調(diào)用方法將總會(huì)再次執(zhí)行函數(shù)。

我們?yōu)槭裁葱枰彺?？假設(shè)我們有一個(gè)性能開銷比較大的計(jì)算屬性 A，它需要遍歷一個(gè)巨大的數(shù)組并做大量的計(jì)算。然后我們可能有其他的計(jì)算屬性依賴于 A。如果沒有緩存，我們將不可避免的多次執(zhí)行 A 的 getter！如果你不希望有緩存，請(qǐng)用方法來替代。

watch 監(jiān)聽屬性說明：

不支持緩存，數(shù)據(jù)變或者觸發(fā)重新渲染時(shí)，直接會(huì)觸發(fā)相應(yīng)的操作。

watch 支持異步

當(dāng)一個(gè)屬性發(fā)生變化時(shí)，需要執(zhí)行對(duì)應(yīng)的操作；一對(duì)多時(shí)，一般用 watch。

監(jiān)聽數(shù)據(jù)必須是 data 中聲明過或者父組件傳遞過來的 props 中的數(shù)據(jù)，當(dāng)數(shù)據(jù)變化時(shí)，觸發(fā)其他操作，函數(shù)有兩個(gè)參數(shù)，immediate：組件加載立即觸發(fā)回調(diào)函數(shù)執(zhí)行，deep: 深度監(jiān)聽，為了發(fā)現(xiàn)對(duì)象內(nèi)部值的變化，復(fù)雜類型的數(shù)據(jù)時(shí)使用，例如數(shù)組中的對(duì)象內(nèi)容的改變，注意監(jiān)聽數(shù)組的變動(dòng)不需要這么做。注意：deep 無法監(jiān)聽到數(shù)組的變動(dòng)和對(duì)象的新增，參考 vue 數(shù)組變異,只有以響應(yīng)式的方式觸發(fā)才會(huì)被監(jiān)聽到。

watch 和 computed 的區(qū)別是：

相同點(diǎn)：

兩者都是觀察頁面數(shù)據(jù)變化的。

不同點(diǎn)：

• computed 只有當(dāng)依賴的數(shù)據(jù)變化時(shí)才會(huì)計(jì)算, 會(huì)緩存數(shù)據(jù)。
• watch 每次都需要執(zhí)行函數(shù)。watch 更適用于數(shù)據(jù)變化時(shí)的異步操作。
  

使用 參考官方文檔

computed 使用

類型：{ [key: string]: Function | { get: Function, set: Function } }

詳細(xì)：

計(jì)算屬性將被混入到 Vue 實(shí)例中。所有 getter 和 setter 的 this 上下文自動(dòng)地綁定為 Vue 實(shí)例。

注意如果你為一個(gè)計(jì)算屬性使用了箭頭函數(shù)，則 this 不會(huì)指向這個(gè)組件的實(shí)例，不過你仍然可以將其實(shí)例作為函數(shù)的第一個(gè)參數(shù)來訪問。

computed: {
 aDouble: vm => vm.a * 2
}

計(jì)算屬性的結(jié)果會(huì)被緩存，除非依賴的響應(yīng)式 property 變化才會(huì)重新計(jì)算。注意，如果某個(gè)依賴 (比如非響應(yīng)式 property) 在該實(shí)例范疇之外，則計(jì)算屬性是不會(huì)被更新的。

示例：

var vm = new Vue({
 data: { a: 1 },
 computed: {
  // 僅讀取
  aDouble: function () {
   return this.a * 2
  },
  // 讀取和設(shè)置
  aPlus: {
   get: function () {
    return this.a + 1
   },
   set: function (v) {
    this.a = v - 1
   },
  },
 },
})
vm.aPlus // => 2
vm.aPlus = 3
vm.a // => 2
vm.aDouble // => 4

watch 使用 與 解釋

類型：{ [key: string]: string | Function | Object | Array }

詳細(xì)：

一個(gè)對(duì)象，鍵是需要觀察的表達(dá)式，值是對(duì)應(yīng)回調(diào)函數(shù)。值也可以是方法名，或者包含選項(xiàng)的對(duì)象。Vue 實(shí)例將會(huì)在實(shí)例化時(shí)調(diào)用 $watch()，遍歷 watch 對(duì)象的每一個(gè) property。

示例：

var vm = new Vue({
 data: {
  a: 1,
  b: 2,
  c: 3,
  d: 4,
  e: {
   f: {
    g: 5,
   },
  },
 },
 watch: {
  a: function (val, oldVal) {
   console.log('new: %s, old: %s', val, oldVal)
  },
  // 方法名
  b: 'someMethod',
  // 該回調(diào)會(huì)在任何被偵聽的對(duì)象的 property 改變時(shí)被調(diào)用，不論其被嵌套多深
  c: {
   handler: function (val, oldVal) {
    ;/_ ... _/
   }, // or handler:'方法名'
   deep: true,
  },
  // 該回調(diào)將會(huì)在偵聽開始之后被立即調(diào)用
  d: {
   handler: 'someMethod', // or handler: function(val, oldVal){}
   immediate: true,
  },
  // 你可以傳入回調(diào)數(shù)組，它們會(huì)被逐一調(diào)用
  e: [
   'handle1',
   function handle2(val, oldVal) {
    /* ... */
   },
   {
    handler: function handle3(val, oldVal) {
     /* ... */
    },
    /* ... */
   },
  ],
  // watch vm.e.f's value: {g: 5}
  'e.f': function (val, oldVal) {
   ;/_ ... _/
  },
 },
})
vm.a = 2 // => new: 2, old: 1

說明： 對(duì)應(yīng)上方的 a~e

a: 監(jiān)聽一個(gè)屬性,需要使用前后變化值時(shí)使用

b: 監(jiān)聽一個(gè)屬性，不會(huì)使用到改變前后的值，只為了執(zhí)行一些方法，可以使用字符串代替 字符串代表方法名

c: 在監(jiān)聽一個(gè)對(duì)象時(shí)，當(dāng)對(duì)象內(nèi)部的屬性被改變時(shí)，無法觸發(fā) watch,設(shè)置 deep 為 true 后，無論嵌套多深，只要屬性值被改變都會(huì)觸發(fā)監(jiān)聽。但這種方式開銷會(huì)較大，監(jiān)聽器會(huì)一層一層往下找，為每個(gè)屬性添加監(jiān)聽器。

如果我們只是監(jiān)聽對(duì)象的某個(gè)屬性改變時(shí)，可以這樣做：

  watch:{
  'user.name':{
   handler: 'method'
  }

 }

d: watch 是在監(jiān)聽屬性改變時(shí)才會(huì)觸發(fā)，組件創(chuàng)建時(shí)可能不會(huì)執(zhí)行，因此我們可以設(shè)置 immediate: true,就會(huì)讓在組件創(chuàng)建后 watch 能夠立即執(zhí)行一次。就不用在 create 的時(shí)候去修改屬性啦。

handelr： 觸發(fā)監(jiān)聽執(zhí)行的方法（需要用到改變前后的值時(shí)，可換成函數(shù)）

immediate： 監(jiān)聽開始之后被立即調(diào)用

e: 監(jiān)聽一個(gè)屬性，執(zhí)行多個(gè)函數(shù)包括回調(diào)等

注意，不應(yīng)該使用箭頭函數(shù)來定義 watcher 函數(shù) (例如 searchQuery: newValue => this.updateAutocomplete(newValue))。理由是箭頭函數(shù)綁定了父級(jí)作用域的上下文，所以 this 將不會(huì)按照期望指向 Vue 實(shí)例，this.updateAutocomplete 將是 undefined。

總結(jié)

到此這篇關(guān)于vue中watch和computed的區(qū)別與使用方法的文章就介紹到這了,更多相關(guān)vue watch和computed的區(qū)別內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論