- 第一種場景：
原因：
受現(xiàn)代 JavaScript 的限制 (以及廢棄 Object.observe)蛹尝，Vue 不能檢測到對象屬性的添加或刪除黄鳍。
template:
<ul>
<li v-for="item in arrData">{{ item.num ? item.num : item }}</li>
</ul>
<button class="btn" @click="btnChange" type="button" name="button">更改</button>
<button class="btn" @click="btnReplace" type="button" name="button">替換</button>
<button class="btn" @click="btnSet" type="button" name="button">set</button>
<button class="btn" @click="btnPush" type="button" name="button">增加</button>
methods:
btnChange() {
this.arrData[0] = 6
console.log('更改后', this.arrData);
},//不會重新渲染
btnReplace() {
this.arrData = [7, 2, 3, 4, 5]
console.log('替換后', this.arrData);
},//會
btnSet() {
Vue.set(this.arrData, 0, 8)
console.log('set后', this.arrData);
},//會
btnPush() {
this.arrData.push({ num : 9 })
console.log('拼接對象后',this.arrData);
},//會
add() {
this.arrDataObject.forEach((item, index) => {
this.$set(item, 'a', 'hah')
item.a = 'hah'
})//會
console.log(this.arrDataObject);
}
- 第二種場景：
原因：由于Vue實例創(chuàng)建時會遍歷data里的屬性绑榴，并且通過Object.defineProperty()攔截數(shù)據(jù)操作悼潭，將屬性轉(zhuǎn)為getter/setter攘乒，在內(nèi)部使 Vue 追蹤依賴设预，在屬性被訪問和修改時通知變化，由于 Vue 會在初始化實例時對屬性執(zhí)行 getter/setter 轉(zhuǎn)化過程智什，所以屬性必須在 data 對象上存在才能讓 Vue 轉(zhuǎn)換它动漾，這樣才能讓它是響應(yīng)的，所以當(dāng)實例創(chuàng)建完成后在追加屬性荠锭，則view層不能響應(yīng)
const vm = new Vue({
data: {
a: 1
}
})
// `vm.a` 是響應(yīng)的
vm.b = 2
// `vm.b` 是非響應(yīng)的
Vue.set(vm.someObject, 'b', 2)
