快捷導(dǎo)航

vue watch普通監(jiān)聽(tīng)和深度監(jiān)聽(tīng)實(shí)例詳解(數(shù)組和對(duì)象)

更新時(shí)間：2018年08月16日 10:54:13 投稿：mrr

這篇文章主要介紹了vue watch普通監(jiān)聽(tīng)和深度監(jiān)聽(tīng)(數(shù)組和對(duì)象)，文中單獨(dú)通過(guò)代碼給大家介紹了vue watch 深度監(jiān)聽(tīng)的方法，感興趣的朋友一起看看吧

下面通過(guò)一段代碼給大家介紹vue watch的普通監(jiān)聽(tīng)和深度監(jiān)聽(tīng)，具體代碼如下所示：

var vm=new Vue({ 
 data:{ 
 num:1, 
 obj:{ 
 name:'三兒', 
age:'21', 
sex:'女' 
} 
 }, 
watch:{ 
 num(val, oldVal){ 
 //普通的watch監(jiān)聽(tīng) 
console.log(“num: “+val, oldVal); 
 }, 
 obj:{ 
 //深度監(jiān)聽(tīng)，可監(jiān)聽(tīng)到對(duì)象、數(shù)組的變化 
handler(val, oldVal){ 
 console.log(“obj.name: “+val.name, oldVal.name); 
 }, 
 deep:true 
 } 
 } 
 }) 
 vm.num=2 
 vm.obj.name='二兒'

下面單獨(dú)給大家介紹下vue-watch 深度監(jiān)聽(tīng)

watch:{} 對(duì)象，可監(jiān)聽(tīng)數(shù)據(jù)，數(shù)據(jù)發(fā)生變化，處理函數(shù)

目的： watch雖可監(jiān)聽(tīng)，但只是淺監(jiān)聽(tīng)，只監(jiān)聽(tīng)數(shù)據(jù)第一層或者第二層，

何為第二層？

let obj = {name: 'xx', child: {age: 11}};

child之后的值就為第二層或者深層

實(shí)現(xiàn)目標(biāo): 如果要監(jiān)聽(tīng)一個(gè)對(duì)象中的屬性，屬性最高也是第二層了，watch可能監(jiān)聽(tīng)不到，

所有要使用深度監(jiān)聽(tīng)：

實(shí)現(xiàn)代碼:

watch: {
' user.phone ' : {
handel:function() {  //特別注意，不能用箭頭函數(shù)，箭頭函數(shù)，this指向全局
處理函數(shù)
},
deep: true  //深度監(jiān)聽(tīng)
}
}

總結(jié)

以上所述是小編給大家介紹的vue watch普通監(jiān)聽(tīng)和深度監(jiān)聽(tīng)實(shí)例詳解(數(shù)組和對(duì)象)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

Vue父子組件屬性傳遞實(shí)現(xiàn)方法詳解
這篇文章主要介紹了Vue父子組件屬性傳遞實(shí)現(xiàn)方法，我們主要從案例出發(fā)，用Vue3的寫(xiě)法寫(xiě)父子組件之間的屬性傳遞，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧
2023-02-02
Vue使用.sync 實(shí)現(xiàn)父子組件的雙向綁定數(shù)據(jù)問(wèn)題
這篇文章主要介紹了Vue使用.sync 實(shí)現(xiàn)父子組件的雙向綁定數(shù)據(jù),需要的朋友可以參考下
2019-04-04
Vue-CLI與Vuex使用方法實(shí)例分析
這篇文章主要介紹了Vue-CLI與Vuex使用方法,結(jié)合實(shí)例形式分析了Vue-CLI創(chuàng)建項(xiàng)目與Vuex相關(guān)概念、使用方法及操作注意事項(xiàng),需要的朋友可以參考下
2020-01-01
Vue+Spring Boot簡(jiǎn)單用戶(hù)登錄(附Demo)
這篇文章主要介紹了Vue+Spring Boot簡(jiǎn)單用戶(hù)登錄，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-11-11
Ant Design Vue 添加區(qū)分中英文的長(zhǎng)度校驗(yàn)功能
這篇文章主要介紹了Ant Design Vue 添加區(qū)分中英文的長(zhǎng)度校驗(yàn)功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下功能，
2020-01-01
vue制作加載更多功能的正確打開(kāi)方式
這篇文章是一篇Vue.js的教程，目標(biāo)在于用一種常見(jiàn)的業(yè)務(wù)場(chǎng)景——分頁(yè)/無(wú)限加載，以及編寫(xiě)過(guò)程中自己的錯(cuò)誤寫(xiě)法，分享給大家，幫助讀者更好的理解Vue.js中的一些設(shè)計(jì)思想。
2016-10-10
Vue使用echarts可視化組件的方法
這篇文章主要介紹了Vue使用echarts可視化組件的方法,本文通過(guò)實(shí)例代碼案例給大家詳細(xì)介紹，需要的朋友可以參考下
2021-07-07
解決Vue 通過(guò)下表修改數(shù)組,頁(yè)面不渲染的問(wèn)題
下面小編就為大家分享一篇解決Vue 通過(guò)下表修改數(shù)組,頁(yè)面不渲染的問(wèn)題。具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-03-03
vue驗(yàn)證碼(identify)插件使用方法詳解
這篇文章主要為大家詳細(xì)介紹了vue驗(yàn)證碼插件使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
探討Vue.js的組件和模板
指令是Vue.js中一個(gè)重要的特性，主要提供了一種機(jī)制將數(shù)據(jù)的變化映射為DOM行為。下面通過(guò)本文給大家分享Vue.js的組件和模板，需要的朋友參考下吧
2017-10-10