計算屬性computed：

• 支持緩存，只有依賴數(shù)據(jù)發(fā)生改變，才會重新進行計算
• 不支持異步，當computed內(nèi)有異步操作時無效，無法監(jiān)聽數(shù)據(jù)的變化
• computed 屬性值會默認走緩存，計算屬性是基于它們的響應(yīng)式依賴進行緩存的，也就是基于data中聲明過或者父組件傳遞的props中的數(shù)據(jù)通過計算得到的值
• 如果一個屬性是由其他屬性計算而來的，這個屬性依賴其他屬性，是一個多對一或者一對一，一般用computed
• 如果computed屬性屬性值是函數(shù)，那么默認會走get方法；函數(shù)的返回值就是屬性的屬性值；在computed中的，屬性都有一個get和一個set方法，當數(shù)據(jù)變化時，調(diào)用set方法。

var vm = new Vue({
 el: '#app',
 data: {
  message: 'hello'
 },
 template: `
 <div> <p>我是原始值: "{{ message }}"</p> <p>我是計算屬性的值: "{{ computedMessage}}"</p> // computed 在 DOM 里直接使用不需要調(diào)用 </div> `,
 computed: {
  // 計算屬性的 getter   computedMessage: function () {
   // `this` 指向 vm 實例    return this.message.split('').reverse().join('')
  }
 }
})

結(jié)果：

我是原始值: "Hello"
我是計算屬性的值: "olleH"

如果不使用計算屬性，那么 message.split('').reverse().join('') 就會直接寫到 template 里，那么在模版中放入太多聲明式的邏輯會讓模板本身過重，尤其當在頁面中使用大量復雜的邏輯表達式處理數(shù)據(jù)時，會對頁面的可維護性造成很大的影響

而且計算屬性如果依賴不變的話，它就會變成緩存，computed 的值就不會重新計算

所以，如果數(shù)據(jù)要通過復雜邏輯來得出結(jié)果，那么就推薦使用計算屬性

偵聽屬性watch

• 不支持緩存，數(shù)據(jù)變，直接會觸發(fā)相應(yīng)的操作。
• watch支持異步；監(jiān)聽的函數(shù)接收兩個參數(shù)，第一個參數(shù)是最新的值；第二個參數(shù)是輸入之前的值；
• 當一個屬性發(fā)生變化時，需要執(zhí)行對應(yīng)的操作；一對多；
• 監(jiān)聽數(shù)據(jù)必須是data中聲明過或者父組件傳遞過來的props中的數(shù)據(jù)，當數(shù)據(jù)變化時，觸發(fā)其他操作，函數(shù)有兩個參數(shù)：

new Vue({
 data: {
  n: 0,
  obj: {
   a: "a"
  }
 },
 template: `
 <div> <button @click="n += 1">n+1</button> <button @click="obj.a += 'hi'">obj.a + 'hi'</button> <button @click="obj = {a:'a'}">obj = 新對象</button> </div> `,
 watch: {
  n() {
   console.log("n 變了");
  },
  obj:{
   handler: function (val, oldVal) { 
   console.log("obj 變了")
  },
   deep: true // 該屬性設(shè)定在任何被偵聽的對象的 property 改變時都要執(zhí)行 handler 的回調(diào)，不論其被嵌套多深   },
  "obj.a":{
   handler: function (val, oldVal) { 
   console.log("obj.a 變了")
  },
   immediate: true // 該屬性設(shè)定該回調(diào)將會在偵聽開始之后被立即調(diào)用   }
 }
}).$mount("#app");

不應(yīng)該使用箭頭函數(shù)來定義 watcher 函數(shù)，因為箭頭函數(shù)沒有 this，它的 this 會繼承它的父級函數(shù)，但是它的父級函數(shù)是 window，導致箭頭函數(shù)的 this 指向 window，而不是 Vue 實例

• deep 控制是否要看這個對象里面的屬性變化
• immediate 控制是否在第一次渲染是執(zhí)行這個函數(shù)

vm.$watch() 的用法和 watch 回調(diào)類似

• vm.$watch('data屬性名', fn, {deep: .., immediate: ..})

vm.$watch("n", function(val, newVal){
   console.log("n 變了");
},{deep: true, immediate: true})

總結(jié)

• 如果一個數(shù)據(jù)需要經(jīng)過復雜計算就用 computed
• 如果一個數(shù)據(jù)需要被監(jiān)聽并且對數(shù)據(jù)做一些操作就用 watch

以上就是Vue中computed和watch有哪些區(qū)別的詳細內(nèi)容，更多關(guān)于Vue中computed和watch的區(qū)別的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論