最近在開(kāi)發(fā)vue的過(guò)程中，不斷用到了計(jì)算屬性（computed）和觀察者(watch)，從邏輯上感覺(jué)它們很相似，但是嘗試混用它們的時(shí)候，又出現(xiàn)了一些問(wèn)題，那么它們到底有什么異同呢？

1. computed VS data
問(wèn)計(jì)算屬性與觀察者異同這個(gè)問(wèn)題之前，首先要明確為啥會(huì)有計(jì)算屬性，即computed vs data。在vue中，數(shù)據(jù)有時(shí)有被處理一下再展示出來(lái)的需求，例如：

var vm = new Vue({el: '#example',data: {message: 'Hello',name: 'tomczhang'},computed: {// 計(jì)算屬性的 getterreversedMessage: function () {// `this` 指向 vm 實(shí)例return this.message.split('').reverse().join('')},getWelcome: function () {return this.message + ' ' + this.name}} })

不管是reversedMessage還是getWelcome方法，單純寫(xiě)在data中都顯得很不優(yōu)雅，所以，建立一個(gè)computed動(dòng)態(tài)的去處理它們是很有必要的。

2. watch VS data
既然vue中數(shù)據(jù)和view是雙向綁定的，那當(dāng)用戶輸入文本的時(shí)候，vue就能監(jiān)聽(tīng)到視圖進(jìn)行了變動(dòng)，并將變動(dòng)的數(shù)據(jù)傳遞給我們（具體的變動(dòng)原理見(jiàn)此）。觀察者就是系統(tǒng)監(jiān)聽(tīng)到視圖變動(dòng)后調(diào)用的方法，參數(shù)分別是老的值和新的值。我們利用watch就可以改變data值。例如：

var vm = new Vue({el: '#demo',watch: {userInput: function (oldValue, newValue) {this.message = newValue;}} })

當(dāng)然我們針對(duì)例子1中的代碼也可以用觀察者來(lái)解決，這也是我寫(xiě)這篇文章的主因，像這樣：

var vm = new Vue({el: '#example',data: {message: 'Hello',name: 'tomczhang',welcome: ''},watch: {welcome: function () {this.welcome = this.message + ' ' + this.name；}} })

3. computed vs watch
BB了那么多，馬上進(jìn)入我們的正題。

相同： computed和watch都起到監(jiān)聽(tīng)/依賴一個(gè)數(shù)據(jù)，并進(jìn)行處理的作用
異同：它們其實(shí)都是vue對(duì)監(jiān)聽(tīng)器的實(shí)現(xiàn)，只不過(guò)computed主要用于對(duì)同步數(shù)據(jù)的簡(jiǎn)單處理，watch則主要用于數(shù)據(jù)輸入時(shí)異步操作或者開(kāi)銷(xiāo)較大的情況。能用computed的時(shí)候優(yōu)先用computed，避免了多個(gè)數(shù)據(jù)影響其中某個(gè)數(shù)據(jù)時(shí)多次調(diào)用watch的尷尬情況。對(duì)于視圖層的改變則優(yōu)先使用watch。

例如這樣：

var vm = new Vue({el: '#demo',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}} })

相應(yīng)的computed版本

var vm = new Vue({el: '#demo',data: {firstName: 'Foo',lastName: 'Bar'},computed: {fullName: function () {return this.firstName + ' ' + this.lastName}} })

參考：
1）計(jì)算屬性和觀察者：https://cn.vuejs.org/v2/guide...

原文地址：https://segmentfault.com/a/1190000012656519

轉(zhuǎn)載于:https://www.cnblogs.com/lalalagq/p/9960283.html

總結(jié)

以上是生活随笔為你收集整理的vue深究第一弹：computed与watch的异同的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。