下面通過一段代碼給大家介紹vue watch的普通監聽和深度監聽,具體代碼如下所示:
var vm=new Vue({ data:{ num:1, obj:{ name:'三兒', age:'21', sex:'女' } }, watch:{ num(val, oldVal){ //普通的watch監聽 console.log(“num: “+val, oldVal); }, obj:{ //深度監聽,可監聽到對象、數組的變化 handler(val, oldVal){ console.log(“obj.name: “+val.name, oldVal.name); }, deep:true } } }) vm.num=2 vm.obj.name='二兒'下面單獨給大家介紹下vue-watch 深度監聽
watch:{} 對象,可監聽數據,數據發生變化, 處理函數
目的: watch雖可監聽,但只是淺監聽,只監聽數據第一層或者第二層,
何為第二層?
let obj = {name: 'xx', child: {age: 11}};
child之后的值就為第二層或者深層
實現目標: 如果 要監聽一個對象中的屬性,屬性最高也是第二層了,watch可能監聽不到,
所有要使用深度監聽:
實現代碼:
watch: {' user.phone ' : {handel:function() { //特別注意,不能用箭頭函數,箭頭函數,this指向全局處理函數},deep: true //深度監聽}}總結
以上所述是小編給大家介紹的vue watch普通監聽和深度監聽實例詳解(數組和對象),希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持!
新聞熱點
疑難解答