深入對(duì)Vue.js $watch方法的理解
博主最近對(duì)著vue.js的官方教程在自學(xué)vue.js,博主自幼愚鈍,在教程中真的是好多點(diǎn)都不太理解,接下來要說的這個(gè)$watch方法就是其中一個(gè)不太理解的點(diǎn)了。咱們先來看一下對(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ù),用來停止觸發(fā)回調(diào):
var unwatch = vm.$watch('a', cb) // 之后取消觀察 unwatch()
博主很認(rèn)真地看了看,當(dāng)時(shí)就懵逼了,沒看懂。還好網(wǎng)上大神多,查了查終于搞明白這個(gè)$watch方法的用法了。說白了$watch這貨就是觀察一個(gè)值的變化,觀察的這個(gè)值一變化的話,那么就執(zhí)行function里面的語句。廢話不多說,咱們直接看代碼:
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)聽了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)文章
3分鐘搞定vite項(xiàng)目(vue/react)使用vite-plugin-pwa配置為pwa應(yīng)用
這篇文章主要介紹了3分鐘搞定vite項(xiàng)目(vue/react)使用vite-plugin-pwa配置為pwa應(yīng)用,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-02-02Javascript vue.js表格分頁,ajax異步加載數(shù)據(jù)
這篇文章主要介紹了Javascript vue.js表格分頁,ajax異步加載數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下2016-10-10vue 在methods中調(diào)用mounted的實(shí)現(xiàn)操作
這篇文章主要介紹了vue 在methods中調(diào)用mounted的實(shí)現(xiàn)操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08vue實(shí)現(xiàn)權(quán)限控制路由(vue-router 動(dòng)態(tài)添加路由)
今天小編就為大家分享一篇vue實(shí)現(xiàn)權(quán)限控制路由(vue-router 動(dòng)態(tài)添加路由),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11Vue實(shí)現(xiàn)頁面刷新跳轉(zhuǎn)到當(dāng)前頁面功能
在Vue.js應(yīng)用開發(fā)中,有時(shí)候我們需要實(shí)現(xiàn)頁面的刷新或跳轉(zhuǎn)到當(dāng)前頁面的功能,這種需求在某些特定場(chǎng)景下非常有用,本文將詳細(xì)介紹如何在Vue中實(shí)現(xiàn)頁面刷新和跳轉(zhuǎn)到當(dāng)前頁面的功能,并提供多個(gè)示例和使用技巧,需要的朋友可以參考下2024-10-10