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

這里我直接引用vue官網(wǎng)的例子來說明：

html:

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

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

js: 用watch方法來實現(xiàn)

 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 在實現(xiàn)上邊的效果時，是更簡單的。

二 、 詳解 comouted 計算屬性。

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

1.優(yōu)點：

在數(shù)據(jù)未發(fā)生變化時，優(yōu)先讀取緩存。computed 計算屬性只有在相關(guān)的數(shù)據(jù)發(fā)生變化時才會改變要計算的屬性，當相關(guān)數(shù)據(jù)沒有變化是，它會讀取緩存。而不必想 motheds方法 和 watch 方法是的每次都去執(zhí)行函數(shù)。

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

1. setter 方法在設(shè)置值是觸發(fā)。
2. getter 方法在獲取值時觸發(fā)。

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

三 、watch 方法

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。