Vue中computed和watch的區(qū)別小結(jié)
區(qū)別:計(jì)算屬性computed支持緩存,只有依賴數(shù)據(jù)發(fā)生改變,才會(huì)重新進(jìn)行計(jì)算;不支持異步,當(dāng)computed內(nèi)有異步操作時(shí)無效,無法監(jiān)聽數(shù)據(jù)的變化。而監(jiān)聽屬性watch不支持緩存,數(shù)據(jù)變,直接會(huì)觸發(fā)相應(yīng)的操作;支持異步。
一、Vue中computed和watch的區(qū)別
watch和computed都是以Vue的依賴追蹤機(jī)制為基礎(chǔ)的,它們都試圖處理這樣一件事情:當(dāng)某一個(gè)或多個(gè)數(shù)據(jù)(稱它們?yōu)橐蕾嚁?shù)據(jù))發(fā)生變化的時(shí)候,所有依賴這些數(shù)據(jù)的 “相關(guān)” 數(shù)據(jù) “自動(dòng)” 發(fā)生變化,也就是自動(dòng)調(diào)用相關(guān)的函數(shù)去實(shí)現(xiàn)數(shù)據(jù)的變動(dòng)。
二、computed計(jì)算屬性
支持緩存,只有依賴數(shù)據(jù)發(fā)生改變,才會(huì)重新進(jìn)行計(jì)算;如果函數(shù)所依賴的屬性沒有發(fā)生變化,從緩存中讀取
必須有return返回
使用方法和data中的數(shù)據(jù)一樣,但是類似一個(gè)執(zhí)行方法
不支持異步,當(dāng)computed內(nèi)有異步操作時(shí)無效,無法監(jiān)聽數(shù)據(jù)的變化;
computed是計(jì)算屬性,也就是依賴某個(gè)值或者props通過計(jì)算得來的數(shù)據(jù)
computed的值是在getter執(zhí)行之后進(jìn)行緩存的,只有在它依賴的數(shù)據(jù)發(fā)生變化(依賴的數(shù)據(jù)可以是單個(gè),也可以是多個(gè))時(shí),會(huì)重新調(diào)用getter來計(jì)算;
注意:就算data中沒有直接聲明要計(jì)算的變量,也可以直接在computed中寫入,如下示例:
<p id="app"> {{fullName}} </p> <script> var vm = new Vue({ el: '#app', data: { firstName: 'Foo', lastName: 'Bar', }, computed: { fullName: function () { return this.firstName + ' ' + this.lastName } } }) </script>
計(jì)算屬性默認(rèn)只有g(shù)etter,可以在需要的時(shí)候自己設(shè)定setter(所有 getter 和 setter 的 this 上下文自動(dòng)地綁定為 Vue 實(shí)例):
computed: { fullName: { // getter get: function () { return this.firstName + ' ' + this.lastName }, // setter set: function (newValue) { var names = newValue.split(' ') this.firstName = names[0] this.lastName = names[names.length - 1] } } } //這個(gè)時(shí)候在控制臺(tái)直接運(yùn)行【vm.fullName = ‘bibi wang'】,相應(yīng)的firstName和lastName也會(huì)改變。
(2)watch
1、不支持緩存,數(shù)據(jù)變,直接會(huì)觸發(fā)相應(yīng)的操作;
2、支持異步操作;
3、watch是監(jiān)聽器,可以監(jiān)聽某一個(gè)數(shù)據(jù),然后執(zhí)行相應(yīng)的操作;
4、監(jiān)聽的函數(shù)接收兩個(gè)參數(shù),第一個(gè)參數(shù)是最新的值;第二個(gè)參數(shù)是輸入之前的值;
5、watch的函數(shù)名必須和data中的數(shù)據(jù)名一致
6、watch中的函數(shù)有倆個(gè)參數(shù),新舊
7、watch中的函數(shù)是不需要調(diào)用的
8、只會(huì)監(jiān)聽數(shù)據(jù)的值是否發(fā)生改變,而不會(huì)去監(jiān)聽數(shù)據(jù)的地址是否發(fā)生改變,要深度監(jiān)聽需要配合deep:true屬性使用
9、immediate:true 頁面首次加載的時(shí)候做一次監(jiān)聽
var vm = new Vue({ el: '#app', data: { firstName: 'Foo', lastName: 'Bar', fullName: 'Foo Bar' }, watch: { firstName: function (newVal,oldVal) { this.fullName = newVal + ' ' + this.lastName console.log(newVal+'========='+oldVal)//Fooaaaa=========Foo }, lastName: function (newVal,oldVal) { this.fullName = this.firstName + ' ' + newVal console.log(newVal+'========='+oldVal)//Baraaaa=========Bar } } })
注意:如果data中沒有相應(yīng)的屬性的話,是不能watch的,這點(diǎn)和computed不一樣。
三、區(qū)別
1、功能:computed是計(jì)算屬性,watch是監(jiān)聽一個(gè)值的變化而執(zhí)行對(duì)應(yīng)的回調(diào)
2、是否調(diào)用緩存:computed函數(shù)所依賴的屬性不變的時(shí)候會(huì)調(diào)用緩存;watch每次監(jiān)聽的值發(fā)生變化時(shí)候都會(huì)調(diào)用回調(diào)
3、是否調(diào)用return:computed必須有;watch可以沒有
4、使用場(chǎng)景:computed當(dāng)一個(gè)屬性受多個(gè)屬性影響的時(shí)候;例如購物車商品結(jié)算;watch當(dāng)一條數(shù)據(jù)影響多條數(shù)據(jù)的時(shí)候,例如搜索框
5、是否支持異步:computed函數(shù)不能有異步;watch可以
總結(jié)
- 當(dāng)多個(gè)屬性影響一個(gè)屬性的時(shí)候,建議用computed
- 當(dāng)一個(gè)值發(fā)生變化之后,會(huì)引起一系列的操作(改變其他屬性值),這種情況就適合用watch
到此這篇關(guān)于Vue中computed和watch的區(qū)別小結(jié)的文章就介紹到這了,更多相關(guān)Vue中computed和watch的區(qū)別內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
100行代碼理解和分析vue2.0響應(yīng)式架構(gòu)
通過100行代碼幫助大家理解和分析vue2.0響應(yīng)式架構(gòu)的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03vue項(xiàng)目網(wǎng)頁自適應(yīng)等比例放大縮小實(shí)例代碼
等比例縮放可以在不同的分辨率下都能夠一屏展示,不會(huì)有滾動(dòng)條的問題,也不會(huì)有適配問題,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目網(wǎng)頁自適應(yīng)等比例放大縮小的相關(guān)資料,需要的朋友可以參考下2022-11-11Vue.js 實(shí)現(xiàn)微信公眾號(hào)菜單編輯器功能(二)
這篇文章主要介紹了Vue.js 實(shí)現(xiàn)微信公眾號(hào)菜單編輯器功能,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2018-05-05webpack 3 + Vue2 使用dotenv配置多環(huán)境的步驟
這篇文章主要介紹了webpack 3 + Vue2 使用dotenv配置多環(huán)境,env文件在配置文件都可以用, vue頁面用的時(shí)候需要在 webpack.base.conf.js 重新配置,需要的朋友可以參考下2023-11-11