深入對(duì)Vue.js $watch方法的理解
博主最近對(duì)著vue.js的官方教程在自學(xué)vue.js，博主自幼愚鈍，在教程中真的是好多點(diǎn)都不太理解，接下來(lái)要說(shuō)的這個(gè)$watch方法就是其中一個(gè)不太理解的點(diǎn)了。咱們先來(lái)看一下對(duì)于$watch方法在vue.js的API中是怎么解釋的吧：觀察 Vue 實(shí)例變化的一個(gè)表達(dá)式或計(jì)算屬性函數(shù)?；卣{(diào)函數(shù)得到的參數(shù)為新值和舊值。表達(dá)式只接受監(jiān)督的鍵路徑。對(duì)于更復(fù)雜的表達(dá)式，用一個(gè)函數(shù)取代。官方示例：
// 鍵路徑
vm.$watch('a.b.c', function (newVal, oldVal) {
// 做點(diǎn)什么
})
// 函數(shù)
vm.$watch(
function () {
return this.a + this.b
},
function (newVal, oldVal) {
// 做點(diǎn)什么
}
)
vm.$watch 返回一個(gè)取消觀察函數(shù)，用來(lái)停止觸發(fā)回調(diào)：
var unwatch = vm.$watch('a', cb)
// 之后取消觀察
unwatch()
博主很認(rèn)真地看了看，當(dāng)時(shí)就懵逼了，沒(méi)看懂。還好網(wǎng)上大神多，查了查終于搞明白這個(gè)$watch方法的用法了。說(shuō)白了$watch這貨就是觀察一個(gè)值的變化，觀察的這個(gè)值一變化的話，那么就執(zhí)行function里面的語(yǔ)句。廢話不多說(shuō)，咱們直接看代碼：
HTML：
<div id="watch">
firstName:<input type="text" name="li" v-model="firstName">
<br>
lastName:<input type="text" name="fei" v-model="lastName">
<p>fullName: {{fullName}}</p>
</div>
JS：
var vm = new Vue({
el: '#watch',
data: {
firstName: 'a',
lastName: 'fei',
fullName: 'a fei'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
})
在代碼中，我們用wach方法監(jiān)聽(tīng)了firstName和lastName這兩個(gè)變量，我們?cè)趇nput框框那里做了雙綁定，這樣子的話，我們?cè)趂irstName輸入框中輸入的值就會(huì)改變變量firstName的值，同理可得lastName，因?yàn)橹档母淖兒蛍atch這貨的觀察，所以watch里面的function代碼就會(huì)運(yùn)行，這樣子fullName也就會(huì)相應(yīng)地改變了。這樣子$watch這方法的用法也就一下子明了了。上述的例子中$watch就和原生js里面的on-change差不多了。
以上就是博主對(duì)$watch方法的理解了，希望可以幫助大家理解這一方法，要是上述有何不對(duì)的地方，麻煩各位看官多多指出，謝謝大家。
相關(guān)文章
vue-pdf如何通過(guò)文件流預(yù)覽pdf文件
這篇文章主要介紹了vue-pdf如何通過(guò)文件流預(yù)覽pdf文件問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue.prototype全局變量的實(shí)現(xiàn)示例
在Vue中可以使用Vue.prototype向Vue的全局作用域添加屬性或方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-06-06
利用vue實(shí)現(xiàn)打印頁(yè)面的幾種方法總結(jié)
在項(xiàng)目里有個(gè)打印功能,將頁(yè)面的部分內(nèi)容打印出來(lái),所以下面這篇文章主要給大家介紹了關(guān)于利用vue實(shí)現(xiàn)打印頁(yè)面的幾種方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
基于vue循環(huán)列表時(shí)點(diǎn)擊跳轉(zhuǎn)頁(yè)面的方法
今天小編就為大家分享一篇基于vue循環(huán)列表時(shí)點(diǎn)擊跳轉(zhuǎn)頁(yè)面的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
vue+intro.js插件實(shí)現(xiàn)引導(dǎo)功能
使用 intro.js這個(gè)插件,來(lái)實(shí)現(xiàn)一個(gè)引導(dǎo)性的效果,經(jīng)常在一些新手引導(dǎo)頁(yè)遇到這樣的需求,下面通過(guò)本文給大家分享vue+intro.js插件實(shí)現(xiàn)引導(dǎo)功能,感興趣的朋友一起看看吧2024-06-06
vue3語(yǔ)法中使用vscode打開(kāi)滿屏紅線報(bào)錯(cuò)的完美解決方法
這篇文章主要介紹了vue3語(yǔ)法中使用vscode打開(kāi)滿屏紅線報(bào)錯(cuò)的完美解決方法,本文通過(guò)圖文并茂的形式給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-06-06
less是css預(yù)處理器,對(duì)原先css進(jìn)行了擴(kuò)展和補(bǔ)充,下面這篇文章主要給大家介紹了關(guān)于vue2中l(wèi)ess的安裝以及使用的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
Vue-scoped(局部)樣式使用方法及實(shí)例代碼
這篇文章主要介紹了Vue-scoped(局部)樣式使用方法及實(shí)例代碼，文中示例代碼介紹了的非常詳細(xì)感興趣的同學(xué)可以參考閱讀一下2023-05-05
karma+webpack搭建vue單元測(cè)試環(huán)境的方法示例
本篇文章主要介紹了karma+webpack搭建vue單元測(cè)試環(huán)境的方法示例，這次搭建的測(cè)試環(huán)境和開(kāi)發(fā)環(huán)境隔離，所以理論上適用所有使用vue的開(kāi)發(fā)環(huán)境。感興趣的小伙伴們可以參考一下2018-05-05
vue實(shí)現(xiàn)移動(dòng)端原生小球滑塊
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)移動(dòng)端原生小球滑塊，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03