Vue中的computed和watch的區(qū)別是什么，針對這個問題，這篇文章詳細介紹了相對應(yīng)的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

成都創(chuàng)新互聯(lián)公司從2013年開始，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項目成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元北侖做網(wǎng)站,已為上家服務(wù),為北侖各地企業(yè)和個人服務(wù),聯(lián)系電話:13518219792

下面帶大家認識Vue中的computed 和 watch，介紹一下computed 和 watch的區(qū)別。

一、computed

1、用途：被計算出來的屬性就是計算屬性

2、計算屬性的好處：它可以讓一些是根據(jù)其他屬性計算而來的屬性變成一個屬性

computed有一個依賴緩存，如果computed的依賴屬性沒有變化，那么computed就不會重新計算。如果一個數(shù)據(jù)依賴于其他數(shù)據(jù)，那么把這個數(shù)據(jù)設(shè)計為 computed。

示例（用戶名展示）：

Vue.config.productionTip = false;

new Vue({
  data: {
    user: {
      email: "jade@qq.com",
      nickname: "jade",
      phone: "18810661088"
    }
  },
  computed: {
    displayName: {
      get() {
        const user = this.user;
        return user.nickname || user.email || user.phone;
      },
      set(value) {
        console.log(value);
        this.user.nickname = value;
      }
    }
  },
  // DRY don't repeat yourself
  // 不如用 computed 來計算 displayName
  template: `
    

      {{displayName}}
      

      {{displayName}}
      set
      
    
  `,
  methods: {
    add() {
      console.log("add");
      this.displayName = "圓圓";
    }
  }
}).$mount("#app");

3、緩存： 如果依賴的屬性沒有變化，就不會重新計算getter/setter默認不會做緩存，Vue做了特殊處理

如何緩存？可以參考以下示例：

二、watch(監(jiān)聽/偵聽）

1、用途：當數(shù)據(jù)變化時，執(zhí)行一個函數(shù)，watch是完美實現(xiàn)歷史功能的一個函數(shù)（方法）

示例（撤銷）：

import Vue from "vue/dist/vue.js";

Vue.config.productionTip = false;

new Vue({
  data: {
    n: 0,
    history: [],
    inUndoMode: false
  },
  watch: {
    n: function(newValue, oldValue) {
      console.log(this.inUndoMode);
      if (!this.inUndoMode) {
        this.history.push({ from: oldValue, to: newValue });
      }
    }
  },
  // 不如用 computed 來計算 displayName
  template: `
    

      {{n}}
      
      +1
      +2
      -1
      -2
      

      撤銷
      


      {{history}}
    
  `,
  methods: {
    add1() {
      this.n += 1;
    },
    add2() {
      this.n += 2;
    },
    minus1() {
      this.n -= 1;
    },
    minus2() {
      this.n -= 2;
    },
    undo() {
      const last = this.history.pop();
      this.inUndoMode = true;
      console.log("ha" + this.inUndoMode);
      const old = last.from;
      this.n = old; // watch n 的函數(shù)會異步調(diào)用
      this.$nextTick(() => {
        this.inUndoMode = false;
      });
    }
  }
}).$mount("#app");

加了immediate: true ，一次渲染的時候會觸發(fā)watch

Vue.config.productionTip = false;

new Vue({
  data: {
    n: 0,
    obj: {
      a: "a"
    }
  },
  template: `
    

      n+1
      obj.a + 'hi'
      obj = 新對象
    
  `,
  watch: {
    n() {
      console.log("n 變了");
    },
    obj:{
      handler(){
        console.log("obj 變了");
      },
      deep:true
    },
    "obj.a": function() {
      console.log("obj.a 變了");
    }
  }
}).$mount("#app");

• 語法1:

上面箭頭函數(shù)的外層的函數(shù)是全局作用域，全局作用域的this就是全局對象window/global,所以你無法在這里獲取this.n/this.xxx,所以，watch里面是絕對不能使用箭頭函數(shù)的

• 語法2:

vm.$watch('xxx',fn,{deep:...,immediate:...})

watch前面加$這樣的寫法是為了避免和一個叫watch的data名重復(fù)

2、deep:true是干什么的？

如果object.a變了，請問object算不算也變了 如果需要答案是【也變了】，就用deep:true如果需要答案是【沒有變】，就用deep:false

deep就是往不往里面去看，去深入的看，true就是深入進入看，默認是false(只看表層的地址）。

不光要比較obj的地址，而且要比較里面任何一個數(shù)據(jù)變了，都要認為是obj變了。

三、總結(jié)

• computed:就是計算屬性的意思

• watch:就是監(jiān)聽的意思

• watch 支持異步代碼而computed不行

computed這個值在調(diào)用的時候，不需要加括號，它會根據(jù)依賴自動緩存，就是說如果依賴不變，這個computed的值就不會重新再計算。

watch它有兩個選項，第一個是immediate,表示在第一次執(zhí)行時要渲染這個函數(shù)；另一個是deep,意思是如果我們要監(jiān)聽一個對象，是否要看它里面屬性的變化。

• 如果一個數(shù)據(jù)依賴于其他數(shù)據(jù)，那么把這個數(shù)據(jù)設(shè)計為computed;

• 如果你需要在某個數(shù)據(jù)變化時做一些事情，使用watch來觀察這個數(shù)據(jù)的變化。

關(guān)于Vue中的computed和watch的區(qū)別是什么問題的解答就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識。