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