看一下演示代碼垮抗，先是增加數(shù)組和對(duì)象虏束。
<template>
<div>
<p>這是我定義的數(shù)組</p>
<div>{{this.arr}}</div>
<button @click="changeArr">點(diǎn)擊這里我就要修改數(shù)組里第一個(gè)</button>
<p>這是我的對(duì)象</p>
<div>{{this.haha}}</div>
<button @click="changeObj">點(diǎn)擊這里我就要添加對(duì)象的屬性</button>
</div>
</template>
<script>
export default {
name: "test",
data() {
return {
arr: [0, 1, 2, 3, 4, 5, 6],
haha: {
name: "123",
age: 12,
story: "從前有座山",
}
};
},
watch:{
'arr':{
handler:function(val,oldval){
console.log('修改后',val,'修改前',oldval);
},
},
'haha':{
handler:function(val,oldval){
console.log('修改后',val,'修改前',oldval);
}
}
},
methods: {
changeArr() {
this.arr.push('12332') // 添加數(shù)組
console.log("這是修改之后的數(shù)組", this.arr);
},
changeObj() {
this.haha.content = "我是一個(gè)小和尚"; // 添加對(duì)象
console.log("這是修改之后的對(duì)象", this.haha);
}
}
};
</script>
控制臺(tái)輸出
11.png
由此可見(jiàn)洪添，watch監(jiān)聽(tīng)到了數(shù)組的增加绅项，并沒(méi)有監(jiān)聽(tīng)到對(duì)象的增加（沒(méi)有監(jiān)聽(tīng)到所以視圖中的數(shù)據(jù)并沒(méi)有發(fā)生改變）
22.png
接下來(lái)修改數(shù)組和對(duì)象(修改了對(duì)象中的value)
changeArr() {
this.arr[0]=1232 // 修改數(shù)組
console.log("這是修改之后的數(shù)組", this.arr);
},
changeObj() {
this.haha.story = "我是一個(gè)小和尚"; // 修改對(duì)象的value
console.log("這是修改之后的對(duì)象", this.haha);
}
image.png
watch是監(jiān)聽(tīng)不到的，解決方法：
驚赋续！VUE居然數(shù)據(jù)不能驅(qū)動(dòng)視圖男翰？$set詳細(xì)教程
