Vue.js watch監(jiān)視屬性知識點總結
這個屬性用來監(jiān)視某個數據的變化,并觸發(fā)相應的回調函數執(zhí)行
1.基本用法
(1)添加watch屬性,值為一個對象。對象的屬性名就是要監(jiān)視的數據,屬性值為回調函數,每當這個屬性名對應的值發(fā)生變化,就會觸發(fā)該回調函數執(zhí)行
(2)回調函數有2個參數:
newVal:數據發(fā)生改變后的值
oldVal:數據發(fā)生改變前的值
var vm = new Vue({ el:'#app', data: { name: '郭靖' }, watch: { name(newVal,oldVal){ console.log('name的值發(fā)生了變化') console.log(newVal,oldVal) } } }) vm.name = "郭大俠" // 執(zhí)行這行代碼,會觸發(fā)對應的回調函數
執(zhí)行結果:
name的值發(fā)生了變化 郭大俠 郭靖
2.監(jiān)聽對象內部屬性的變化
前面的例子只是監(jiān)聽data中的第一層數據,如果要監(jiān)聽多層次的數據,例如a.b.c,則屬性名需要用引號包裹起來
<body> <div id="app"> <p>{{name}}</p> <button @click="test">修改wife.name</button> <button @click="test2">修改wife</button> </div> </body> <script> var vm = new Vue({ el:'#app', data: { name: '郭靖', age: 20, wife: { name: '黃蓉', sex: '女' } }, watch: { //監(jiān)聽wife中的name屬性 'wife.name'(newVal,oldVal){ console.log('wife.name發(fā)生了改變') }, //監(jiān)聽wife 'wife'(newVal,oldVal){ console.log('wife發(fā)生了改變') } }, methods:{ test(){ this.wife.name = "'黃幫主'" }, test2(){ this.wife = {name:'我不是黃蓉',sex:'women'} } } }) </script>
運行結果表明,無論是他父級對象的值發(fā)生了改變,還是它本身的值發(fā)生了改變,都會使這個監(jiān)視屬性的回調函數執(zhí)行。
3.監(jiān)聽路由變化
提示:路由的路徑信息保存在$route.path中
watch:{ '$route.path':function(newval){ console.log('change') } }
4.深度監(jiān)聽
監(jiān)視屬性只能監(jiān)聽到當前對象值的變化,而對象內部的屬性變化不會監(jiān)聽到,前面我們監(jiān)聽了wife和wife.name,修改了wife.name并不會觸發(fā)監(jiān)聽wife的回調函數。
想要監(jiān)聽對象內部的屬性值變化,需要進行相應的配置。
- deep:深度監(jiān)聽,默認false
- handler:回調函數
- immediate:頁面初始化時是否觸發(fā)回調,默認false
var vm = new Vue({ el:'#app', data: { name: '郭靖', age: 20, wife: { name: '黃蓉', sex: '女' } }, watch: { wife:{ deep:true, handler:function(newVal,oldVal){ console.log('value is change') }, immediate:true } } }) vm.wife.name = '黃幫主' // 觸發(fā)wife屬性對應的回調
以上就是關于Vue.js watch監(jiān)視屬性的全部知識點,感謝大家的學習和對腳本之家的支持。
相關文章
Vue源碼解讀之Component組件注冊的實現(xiàn)
這篇文章主要介紹了Vue源碼解讀之Component組件注冊的實現(xiàn),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-08-08Vue項目引用百度地圖并實現(xiàn)搜索定位等功能(案例分析)
這篇文章主要介紹了Vue項目引用百度地圖并實現(xiàn)搜索定位等功能(案例分析),本篇文章為案例分析,技術點較多,所以篇幅較長,認真閱覽的你一定會學到很多知識,需要的朋友可以參考下2022-09-09