- 首页 > it技术 > >
- 第一种场景：
原因：
受现代 JavaScript 的限制 (以及废弃 Object.observe)，Vue 不能检测到对象属性的添加或删除。
template:
- {{ item.num ? item.num : item }}
methods:
btnChange() {
this.arrData[0] = 6
console.log('更改后', this.arrData);
},//不会重新渲染
btnReplace() {
this.arrData = https://www.it610.com/article/[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实例创建时会遍历data里的属性，并且通过Object.defineProperty()拦截数据操作，将属性转为getter/setter，在内部使 Vue 追踪依赖，在属性被访问和修改时通知变化，由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的，所以当实例创建完成后在追加属性，则view层不能响应
const vm = new Vue({
data: {
a: 1
}
})
// `vm.a` 是响应的
vm.b = 2
// `vm.b` 是非响应的Vue.set(vm.someObject, 'b', 2)
推荐阅读
