溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹Vue.js中watch監視屬性知識點的示例分析，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
這個屬性用來監視某個數據的變化，并觸發相應的回調函數執行
1.基本用法
(1)添加watch屬性，值為一個對象。對象的屬性名就是要監視的數據，屬性值為回調函數，每當這個屬性名對應的值發生變化，就會觸發該回調函數執行
(2)回調函數有2個參數：
newVal：數據發生改變后的值
oldVal：數據發生改變前的值
var vm = new Vue({
el:'#app',
data: {
name: '郭靖'
},
watch: {
name(newVal,oldVal){
console.log('name的值發生了變化')
console.log(newVal,oldVal)
}
}
})
vm.name = "郭大俠" // 執行這行代碼，會觸發對應的回調函數執行結果:
name的值發生了變化 郭大俠 郭靖
2.監聽對象內部屬性的變化
前面的例子只是監聽data中的第一層數據，如果要監聽多層次的數據，例如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: {
//監聽wife中的name屬性
'wife.name'(newVal,oldVal){
console.log('wife.name發生了改變')
},
//監聽wife
'wife'(newVal,oldVal){
console.log('wife發生了改變')
}
},
methods:{
test(){
this.wife.name = "'黃幫主'"
},
test2(){
this.wife = {name:'我不是黃蓉',sex:'women'}
}
}
})
</script>運行結果表明，無論是他父級對象的值發生了改變，還是它本身的值發生了改變，都會使這個監視屬性的回調函數執行。
3.監聽路由變化
提示：路由的路徑信息保存在$route.path中
watch:{
'$route.path':function(newval){
console.log('change')
}
}4.深度監聽
監視屬性只能監聽到當前對象值的變化，而對象內部的屬性變化不會監聽到，前面我們監聽了wife和wife.name，修改了wife.name并不會觸發監聽wife的回調函數。
想要監聽對象內部的屬性值變化，需要進行相應的配置。
deep:深度監聽，默認false
handler:回調函數
immediate:頁面初始化時是否觸發回調，默認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 = '黃幫主' // 觸發wife屬性對應的回調以上是“Vue.js中watch監視屬性知識點的示例分析”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
