一篇文章教你簡(jiǎn)單使用Vue的watch偵聽(tīng)器
更新時(shí)間：2021年12月08日 15:51:44 作者：wait......
這篇文章主要為大家介紹了Vue watch偵聽(tīng)器，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
偵聽(tīng)器watch?
- 函數(shù)名就是要偵聽(tīng)的元素的名字
- 傳入的參數(shù)第一個(gè)是變化后的新值newval，第二個(gè)是變化前的舊值oldval?
格式
方法格式的偵聽(tīng)器
- 無(wú)法在剛進(jìn)入頁(yè)面時(shí)自動(dòng)觸發(fā)，只有在偵聽(tīng)到變化才會(huì)觸發(fā)
- 如果偵聽(tīng)的是對(duì)象，當(dāng)對(duì)象的屬性發(fā)生變化時(shí)，不會(huì)偵聽(tīng)到
對(duì)象格式的偵聽(tīng)器
- 通過(guò)immediate選項(xiàng)，可以讓偵聽(tīng)器自動(dòng)觸發(fā)
- 通過(guò)deep選項(xiàng)，使偵聽(tīng)器深度偵聽(tīng)到對(duì)象中屬性的變化
這是Vue實(shí)例中的data對(duì)象：
設(shè)置偵聽(tīng)器：
下面分別是方法格式的偵聽(tīng)器和對(duì)象格式的偵聽(tīng)器：
方法格式的偵聽(tīng)器實(shí)現(xiàn)的是，當(dāng)input中內(nèi)容變化時(shí)，觸發(fā)偵聽(tīng)，偵聽(tīng)input中的內(nèi)容（內(nèi)容是與tem綁定好的），如果當(dāng)前input中的內(nèi)容不在already數(shù)組中，就添加到already中，否則彈出提示框該名稱已存在
對(duì)象格式的偵聽(tīng)器實(shí)現(xiàn)的是，頁(yè)面一旦載入就立即觸發(fā)偵聽(tīng)，偵聽(tīng)foo對(duì)象name屬性的變化。
總結(jié)
本篇文章就到這里了，希望能夠給你帶來(lái)幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
您可能感興趣的文章:
- Vue 基礎(chǔ)語(yǔ)法之計(jì)算屬性(computed)、偵聽(tīng)器(watch)、過(guò)濾器(filters)詳解
- Vue3源碼分析偵聽(tīng)器watch的實(shí)現(xiàn)原理
- 詳解Vue3中的watch偵聽(tīng)器和watchEffect高級(jí)偵聽(tīng)器
- 一文搞懂Vue3中watchEffect偵聽(tīng)器的使用
- 詳解Vue3中偵聽(tīng)器watch的使用教程
- Vue2和Vue3如何使用watch偵聽(tīng)器詳解
- Vue 2.0 偵聽(tīng)器 watch屬性代碼詳解
- Vue.js中關(guān)于偵聽(tīng)器（watch）的高級(jí)用法示例
- Vue數(shù)據(jù)監(jiān)聽(tīng)器watch和watchEffect的使用
相關(guān)文章
Electron也可以快速地將你的網(wǎng)站打包成一個(gè)原生應(yīng)用發(fā)布,下面這篇文章主要給大家介紹了關(guān)于Electron集成React和Vue的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
vue項(xiàng)目實(shí)現(xiàn)圖形驗(yàn)證碼
這篇文章主要為大家詳細(xì)介紹了vue項(xiàng)目實(shí)現(xiàn)圖形驗(yàn)證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-04-04
Vue?axios和vue-axios的關(guān)系及使用區(qū)別
axios是基于promise的HTTP庫(kù)，可以使用在瀏覽器和node.js中，它不是vue的第三方插件，vue-axios是axios集成到Vue.js的小包裝器，可以像插件一樣安裝使用:Vue.use(VueAxios, axios)，本文給大家介紹Vue?axios和vue-axios關(guān)系，感興趣的朋友一起看看吧2022-08-08
這篇文章主要介紹了Vue之Mixins(混入)的使用方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
Vue.js中輕松解決v-for執(zhí)行出錯(cuò)的三個(gè)方案
v-for標(biāo)簽可以用來(lái)遍歷數(shù)組，將數(shù)組的每一個(gè)值綁定到相應(yīng)的視圖元素中去，下面這篇文章主要給大家介紹了關(guān)于在Vue.js中輕松解決v-for執(zhí)行出錯(cuò)的三個(gè)方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-06-06
如何修改element-ui中tree組件的icon圖標(biāo)(小白都會(huì)的前端技能)
這篇文章主要給大家介紹了關(guān)于如何修改element-ui中tree組件的icon圖標(biāo)的相關(guān)資料,本文介紹的是小白都會(huì)的前端技能,文中通過(guò)代碼以及圖文介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
本篇文章主要介紹了詳解Vue整合axios的實(shí)例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06
vue 獲取url參數(shù)、get參數(shù)返回?cái)?shù)組的操作
這篇文章主要介紹了vue 獲取url參數(shù)、get參數(shù)返回?cái)?shù)組的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
關(guān)于Vue3路由push跳轉(zhuǎn)問(wèn)題(解決Vue2this.$router.push失效）
這篇文章主要介紹了Vue3路由push跳轉(zhuǎn)問(wèn)題(解決Vue2this.$router.push失效）,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-07-07
本文將詳細(xì)介紹前端性能優(yōu)化的7大手段，包括減少請(qǐng)求數(shù)量、減小資源大小、優(yōu)化網(wǎng)絡(luò)連接、優(yōu)化資源加載、減少重繪回流、使用性能更好的API和構(gòu)建優(yōu)化2020-02-02