<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./asset/vue.js"></script>
<title>Vuejs</title>
</head>
<body>
<div id="app">
<div>
<input type="text" v-model="a" >
</div>
</div>
</body>
<script>
var app=new Vue({
el:'#app',
data:{
a:"hello"
},
methods:{
},
watch:{
a(newVal,oldVal){
console.log(newVal,oldVal);
}
}
})
</script>
</html>
watch 普通監聽
當我們改變a的值的時候 頁面輸出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./asset/vue.js"></script>
<title>Vuejs</title>
</head>
<body>
<div id="app">
<div>
<button @click="changeb">change</button>
</div>
</div>
</body>
<script>
var app=new Vue({
el:'#app',
data:{
b:{
a:'hello'
}
},
methods:{
changeb(){
this.b.a='hello1222'
}
},
watch:{
b:{
handler(newVal,oldVal){
console.log('new',newVal.a);
console.log('old',oldVal.a); //在變更(不是替換)對象或者數組的時候,舊值将與新值相同,因為的引用指向同一個對象或者數組,Vue不會保存更改之前的副本
},
deep:true //深度監聽
}
}
})
</script>
</html>
watch 深度監聽
用以上的寫法可以對對象或者數組進行深度監聽
但是 頁面輸出的時候發現新值和舊值一樣,官方給的解釋如下:
在變更(不是替換)對象或者數組的時候,舊值将與新值相同,因為的引用指向同一個對象或者數組,Vue不會保存更改之前的副本
,更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!
zpostcode 
Recruit 
weather 
mreligion 
Yellowpages 
sport 
constellation 
shopping 
name 
game 
directory 
literature 
Word 
tour 
furnish 
Lottery 
tftnews 
lyrics 
News 
digital 
car 
dir 
Edu 
Finance 
