vue watch普通監(jiān)聽和深度監(jiān)聽實(shí)例詳解(數(shù)組和對(duì)象)
更新時(shí)間：2018年08月16日 10:54:13 投稿：mrr
這篇文章主要介紹了vue watch普通監(jiān)聽和深度監(jiān)聽(數(shù)組和對(duì)象)，文中單獨(dú)通過代碼給大家介紹了vue watch 深度監(jiān)聽的方法，感興趣的朋友一起看看吧
下面通過一段代碼給大家介紹vue watch的普通監(jiān)聽和深度監(jiān)聽，具體代碼如下所示：
var vm=new Vue({
data:{
num:1,
obj:{
name:'三兒',
age:'21',
sex:'女'
}
},
watch:{
num(val, oldVal){
//普通的watch監(jiān)聽
console.log(“num: “+val, oldVal);
},
obj:{
//深度監(jiān)聽，可監(jiān)聽到對(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)聽
watch:{} 對(duì)象，可監(jiān)聽數(shù)據(jù)，數(shù)據(jù)發(fā)生變化， 處理函數(shù)
目的： watch雖可監(jiān)聽，但只是淺監(jiān)聽，只監(jiān)聽數(shù)據(jù)第一層或者第二層，
何為第二層？
let obj = {name: 'xx', child: {age: 11}};
child之后的值就為第二層或者深層
實(shí)現(xiàn)目標(biāo): 如果 要監(jiān)聽一個(gè)對(duì)象中的屬性，屬性最高也是第二層了，watch可能監(jiān)聽不到，
所有要使用深度監(jiān)聽：
實(shí)現(xiàn)代碼:
watch: {
' user.phone ' : {
handel:function() { //特別注意，不能用箭頭函數(shù)，箭頭函數(shù)，this指向全局
處理函數(shù)
},
deep: true //深度監(jiān)聽
}
}
總結(jié)
以上所述是小編給大家介紹的vue watch普通監(jiān)聽和深度監(jiān)聽實(shí)例詳解(數(shù)組和對(duì)象)，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了Vue父子組件屬性傳遞實(shí)現(xiàn)方法，我們主要從案例出發(fā)，用Vue3的寫法寫父子組件之間的屬性傳遞，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-02-02
Vue使用.sync 實(shí)現(xiàn)父子組件的雙向綁定數(shù)據(jù)問題
這篇文章主要介紹了Vue使用.sync 實(shí)現(xiàn)父子組件的雙向綁定數(shù)據(jù),需要的朋友可以參考下2019-04-04
這篇文章主要介紹了Vue-CLI與Vuex使用方法,結(jié)合實(shí)例形式分析了Vue-CLI創(chuàng)建項(xiàng)目與Vuex相關(guān)概念、使用方法及操作注意事項(xiàng),需要的朋友可以參考下2020-01-01
Vue+Spring Boot簡(jiǎn)單用戶登錄(附Demo)
這篇文章主要介紹了Vue+Spring Boot簡(jiǎn)單用戶登錄，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
Ant Design Vue 添加區(qū)分中英文的長(zhǎng)度校驗(yàn)功能
這篇文章主要介紹了Ant Design Vue 添加區(qū)分中英文的長(zhǎng)度校驗(yàn)功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下功能，2020-01-01
這篇文章是一篇Vue.js的教程，目標(biāo)在于用一種常見的業(yè)務(wù)場(chǎng)景——分頁/無限加載，以及編寫過程中自己的錯(cuò)誤寫法，分享給大家，幫助讀者更好的理解Vue.js中的一些設(shè)計(jì)思想。2016-10-10
這篇文章主要介紹了Vue使用echarts可視化組件的方法,本文通過實(shí)例代碼案例給大家詳細(xì)介紹，需要的朋友可以參考下2021-07-07
下面小編就為大家分享一篇解決Vue 通過下表修改數(shù)組,頁面不渲染的問題。具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要為大家詳細(xì)介紹了vue驗(yàn)證碼插件使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
指令是Vue.js中一個(gè)重要的特性， 主要提供了一種機(jī)制將數(shù)據(jù)的變化映射為DOM行為。下面通過本文給大家分享Vue.js的組件和模板，需要的朋友參考下吧2017-10-10