vue中computed 和 watch有什么區別

vue中computed 和 watch有什么區別，很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。

一、computed 和 watch 都可以觀察頁面的數據變化。當處理頁面的數據變化時，我們有時候很容易濫用watch。 而通常更好的辦法是使用computed屬性，而不是命令是的watch回調。

這里我直接引用vue官網的例子來說明：

html:

我們要實現 第三個表單的值 是第一個和第二個的拼接，并且在前倆表單數值變化時，第三個表單數值也在變化

<div id="myDiv">
  <input type="text" v-model="firstName">
  <input type="text" v-model="lastName">
  <input type="text" v-model="fullName">
</div>

js: 用watch方法來實現

 new Vue({
 el: '#myDiv',
 data: {
  firstName: 'Foo',
  lastName: 'Bar',
  fullName: 'Foo Bar'
 },
 watch: {
  firstName: function (val) {
   this.fullName = val + ' ' + this.lastName
  },
  lastName: function (val) {
   this.fullName = this.firstName + ' ' + val
  }
 }
})

js: 利用computed 來寫

 new Vue({
    el:"#myDiv",
      data:{
        firstName:"Den",
        lastName:"wang",

      },
      computed:{
        fullName:function(){
          return this.firstName + " " +this.lastName;
        }
      }
  })

很容易看出 computed 在實現上邊的效果時，是更簡單的。

二 、 詳解 comouted 計算屬性。

在vue的 模板內（{{}}）是可以寫一些簡單的js表達式的 ，很便利。但是如果在頁面中使用大量或是復雜的表達式去處理數據，對頁面的維護會有很大的影響。這個時候就需要用到computed 計算屬性來處理復雜的邏輯運算。

1.優點：

在數據未發生變化時，優先讀取緩存。computed 計算屬性只有在相關的數據發生變化時才會改變要計算的屬性，當相關數據沒有變化是，它會讀取緩存。而不必想 motheds方法 和 watch 方法是的每次都去執行函數。

2.setter 和 getter方法：（注意在vue中書寫時用set 和 get）

1. setter 方法在設置值是觸發。

2. getter 方法在獲取值時觸發。

computed:{
  fullName:{
  //這里用了es6書寫方法
    set(){
       alert("set");
    },
    get(){
      alert("get");
      return this.firstName + " " +this.lastName;
    },

  }
 }

三 、watch 方法

雖然計算屬性在大多數情況下是非常適合的，但是在有些情況下我們需要自定義一個watcher，在數據變化時來執行異步操作，這時watch是非常有用的。

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。