談?wù)刅UE種methods watch和compute的區(qū)別和聯(lián)系

從作用機(jī)制和性質(zhì)上看待methods,watch和computed的關(guān)系

圖片標(biāo)題[原創(chuàng)]:《他三個(gè)是啥子關(guān)系呢？》

首先要說，methods,watch和computed都是以函數(shù)為基礎(chǔ)的，但各自卻都不同 

而從作用機(jī)制和性質(zhì)上看,methods和watch/computed不太一樣，所以我接下來的介紹主要有兩個(gè)對比：

1.methods和(watch/computed)的對比

2.watch和computed的對比

作用機(jī)制上

1.watch和computed都是以Vue的依賴追蹤機(jī)制為基礎(chǔ)的，它們都試圖處理這樣一件事情：當(dāng)某一個(gè)數(shù)據(jù)（稱它為依賴數(shù)據(jù)）發(fā)生變化的時(shí)候，所有依賴這個(gè)數(shù)據(jù)的“相關(guān)”數(shù)據(jù)“自動”發(fā)生變化，也就是自動調(diào)用相關(guān)的函數(shù)去實(shí)現(xiàn)數(shù)據(jù)的變動。

2.對methods:methods里面是用來定義函數(shù)的，很顯然，它需要手動調(diào)用才能執(zhí)行。而不像watch和computed那樣，“自動執(zhí)行”預(yù)先定義的函數(shù)

 【總結(jié)】：methods里面定義的函數(shù)，是需要主動調(diào)用的，而和watch和computed相關(guān)的函數(shù)，會自動調(diào)用,完成我們希望完成的作用

從性質(zhì)上看

1.methods里面定義的是函數(shù)，你顯然需要像"fuc()"這樣去調(diào)用它（假設(shè)函數(shù)為fuc）

2.computed是計(jì)算屬性，事實(shí)上和和data對象里的數(shù)據(jù)屬性是同一類的（使用上）,

例如：

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

你在取用的時(shí)候，用this.fullName去取用，就和取data一樣（不要當(dāng)成函數(shù)調(diào)用！！）

3.watch:類似于監(jiān)聽機(jī)制+事件機(jī)制：

例如：

watch: {
 firstName: function (val) { this.fullName = val + this.lastName }
}

firstName的改變是這個(gè)特殊“事件”被觸發(fā)的條件，而firstName對應(yīng)的函數(shù)就相當(dāng)于監(jiān)聽到事件發(fā)生后執(zhí)行的方法

watch和computed的對比

說了這么多，下面先對watch和computed

首先它們都是以Vue的依賴追蹤機(jī)制為基礎(chǔ)的，它們的共同點(diǎn)是：都是希望在依賴數(shù)據(jù)發(fā)生改變的時(shí)候，被依賴的數(shù)據(jù)根據(jù)預(yù)先定義好的函數(shù)，發(fā)生“自動”的變化

我們當(dāng)然可以自己寫代碼完成這一切，但卻很可能造成寫法混亂，代碼冗余的情況。Vue為我們提供了這樣一個(gè)方便的接口，統(tǒng)一規(guī)則

但watch和computed也有明顯不同的地方：

watch和computed各自處理的數(shù)據(jù)關(guān)系場景不同

1.watch擅長處理的場景：一個(gè)數(shù)據(jù)影響多個(gè)數(shù)據(jù)

2.computed擅長處理的場景：一個(gè)數(shù)據(jù)受多個(gè)數(shù)據(jù)影響

watch擅長處理的場景：一個(gè)數(shù)據(jù)影響多個(gè)數(shù)據(jù)

(具體的看上圖就ok，這里不再贅述)

對于watch，我們先從一個(gè)場景說起

在《海賊王》里面，主角團(tuán)隊(duì)的名稱叫做：“草帽海賊團(tuán)”

所以我們把船員依次稱為：

草帽海賊團(tuán)索隆,草帽海賊團(tuán)娜美,以此類推。。

我們希望：當(dāng)船團(tuán)名稱發(fā)生變更的時(shí)候，這艘船上所有船員的名字一起變更！！

例如：

有一天，船長路飛為了加強(qiáng)團(tuán)隊(duì)建設(shè)，弘揚(yáng)海賊文化，決定“草帽海賊團(tuán)”改名為“橡膠海賊團(tuán)”（路飛是橡膠惡魔果實(shí)能力者）

我們代碼如下： 

var vm = new Vue({
 el: '#app',
 /*
 data選項(xiàng)中的數(shù)據(jù)：
 1.haiZeiTuan_Name --> 海賊團(tuán)名稱
 2.船員的名稱 = 海賊團(tuán)名稱（草帽海賊團(tuán)） + 船員名稱（例如索隆）
 
 這些數(shù)據(jù)里存在這種關(guān)系：
 （多個(gè)）船員名稱數(shù)據(jù) --> 依賴于 --> （1個(gè))海賊團(tuán)名稱數(shù)據(jù)
 一個(gè)數(shù)據(jù)變化 ---> 多個(gè)數(shù)據(jù)全部變化
 */
 data: {
 haiZeiTuan_Name: '草帽海賊團(tuán)',
 suoLong: '草帽海賊團(tuán)索隆',
 naMei: '草帽海賊團(tuán)娜美',
 xiangJiShi: '草帽海賊團(tuán)香吉士'
 },
 /*
 在watch中，一旦haiZeiTuan_Name（海賊團(tuán)名稱）發(fā)生改變
 data選項(xiàng)中的船員名稱全部會自動改變 （suoLong，naMei，xiangJiShi）
 并把它們打印出來
 */
 watch: {
 haiZeiTuan_Name: function (newName) {
 this.suoLong = newName + '索隆'
 this.naMei = newName + '娜美'
 this.xiangJiShi = newName + '香吉士'
 console.log(this.suoLong)
 console.log(this.naMei)
 console.log(this.xiangJiShi)
 }
 }
})
 
// 更改watch選項(xiàng)中監(jiān)控的主數(shù)據(jù)
vm.haiZeiTuan_Name = '橡膠海賊團(tuán)'

demo:

于是船員們的稱號前綴都被統(tǒng)一修改了！(原本是“草帽海賊團(tuán)”)

但是我們的路飛船長又突發(fā)奇想：我這么喜歡吃肉，干脆我們叫做“肉肉海賊團(tuán)”好了吧！

我們把最下面的代碼改為：

// 更改watch選項(xiàng)中監(jiān)控的主數(shù)據(jù)
vm.haiZeiTuan_Name = '肉肉海賊團(tuán)'

demo:

computed擅長處理的場景：一個(gè)數(shù)據(jù)受多個(gè)數(shù)據(jù)影響

我們再從一個(gè)場景說起

路飛的全名叫做：蒙奇-D-路飛，他想成為海賊王，但路飛的爺爺卡普（海軍英雄）因此感到非常惱怒，于是把“路飛”改成了叫“海軍王”，希望他能改變志向

代碼如下：

var vm = new Vue({
 el: '#app',
 /*
 data選項(xiàng)中的數(shù)據(jù)：firstName，secName,thirdName
 computed監(jiān)控的數(shù)據(jù)：lufei_Name
 兩者關(guān)系： lufei_Name = firstName + secName + thirdName
 所以等式右邊三個(gè)數(shù)據(jù)任一改變，都會直接修改 lufei_Name
 */
 data: {
 // 路飛的全名：蒙奇·D·路飛
 firstName: '蒙奇',
 secName: 'D',
 thirdName: '路飛'
 },
 computed: {
 luFei_Name: function () {
 return this.firstName + this.secName + this.thirdName
 }
 }
})
 
// 將“路飛”改為“海軍王”
vm.thirdName = '海軍王'
// 打印路飛的全名
console.log(vm.luFei_Name)

demo:

 但是：

有一天，路飛的逗逼爺爺卡普，一不小心發(fā)現(xiàn)可能把族譜搞錯(cuò)了，實(shí)際上，他們不是“D”之一族，而是“H”一族，也就是說，“蒙奇-D-路飛”可能要叫做“蒙奇-H-路飛”了

將最后一段代碼改為如下：

// 將“D”改為“H”
vm.secName = 'H'
// 打印路飛的全名
console.log(vm.luFei_Name)

demo：

methods不處理數(shù)據(jù)邏輯關(guān)系，只提供可調(diào)用的函數(shù)

相比于watch/computed，methods不處理數(shù)據(jù)邏輯關(guān)系，只提供可調(diào)用的函數(shù) 

new Vue({
 el: '#app',
 template: '<div id="app"><p>{{ say() }}</p></div>',
 methods: {
 say: function () {
 return '我要成為海賊王'
 }
 }
})

從功能的互補(bǔ)上看待methods,watch和computed的關(guān)系

在很多時(shí)候，computed是用來處理你使用watch和methods的時(shí)候無法處理，或者是處理起來并不太恰當(dāng)?shù)那闆r的

利用computed處理methods存在的重復(fù)計(jì)算情況

1.methods里面的函數(shù)就是一群“耿直Boy”，如果有其他父函數(shù)調(diào)用它，它會每一次都“乖乖”地執(zhí)行并返回結(jié)果，即使這些結(jié)果很可能是相同的，是不需要的

2.而computed是一個(gè)“心機(jī)Boy”，它會以Vue提供的依賴追蹤系統(tǒng)為基礎(chǔ)，只要依賴數(shù)據(jù)沒有發(fā)生變化,computed就不會再度進(jìn)行計(jì)算

例子： 

new Vue({
 el: '#app',
 // 設(shè)置兩個(gè)button，點(diǎn)擊分別調(diào)用getMethodsDate,getComputedDate方法
 template: '<div id="app"><button @click="getMethodsDate">methods</button><button @click="getComputedDate">computed</button></div>',
 methods: {
 getMethodsDate: function () {
 alert(new Date())
 },
 // 返回computed選項(xiàng)中設(shè)置的計(jì)算屬性——computedDate
 getComputedDate: function () {
 alert(this.computedDate)
 }
 },
 computed: {
 computedDate: function () {
 return new Date()
 }
 }

 第一次點(diǎn)擊methods按鈕：

第二次點(diǎn)擊methods按鈕：

注意兩次點(diǎn)擊methods返回的時(shí)間是不同的！！

 第一次點(diǎn)擊computed按鈕：

第二次點(diǎn)擊computed按鈕：

 注意兩次點(diǎn)擊computed返回的時(shí)間是相同的！！

1.兩次點(diǎn)擊methods返回的時(shí)間是不同的

2.注意兩次點(diǎn)擊computed返回的時(shí)間是相同的

 【注意】為什么兩次點(diǎn)擊computed返回的時(shí)間是相同的呢？new Date()不是依賴型數(shù)據(jù)（不是放在data等對象下的實(shí)例數(shù)據(jù)），所以computed只提供了緩存的值，而沒有重新計(jì)算

 只有符合：1.存在依賴型數(shù)據(jù) 2.依賴型數(shù)據(jù)發(fā)生改變這兩個(gè)條件,computed才會重新計(jì)算。 

而methods下的數(shù)據(jù)，是每次都會進(jìn)行計(jì)算的 

利用computed處理watch在特定情況下代碼冗余的現(xiàn)象，簡化代碼

new Vue({
 el: '#app',
 data: {
 fullName: '彭湖灣',
 firstName: '彭',
 secName: '湖',
 thirdName: '灣'
 },
 // watch中的代碼顯然是同類型，重復(fù)的，它并不簡潔，也不優(yōu)雅
 watch: {
 firstName: function (newValue) {
 this.fullName = newValue + this.secName + this.thirdName
 console.log(this.fullName)
 },
 secName: function (newValue) {
 this.fullName = this.firstName + newValue + this.thirdName
 console.log(this.fullName)
 },
 thirdName: function (newValue) {
 this.fullName = this.firstName + this.secName + newValue
 console.log(this.fullName)
 }
 }
})

watch中的代碼顯然是同類型，重復(fù)的，它并不簡潔，也不優(yōu)雅，所以我們可以把它變成這樣

new Vue({
 el: '#app',
 data: {
 fullName: '彭湖灣',
 firstName: '彭',
 secName: '湖',
 thirdName: '灣'
 },
 // 對watch中的代碼進(jìn)行重構(gòu)，實(shí)現(xiàn)同樣效果
 computed: function () {
 this.fullName = this.firstName + this.secName + this.thirdName
 console.log(this.fullName)
 }
})

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com