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)聽
}
}

總結

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

您可能感興趣的文章:

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