vue修改数据页面不重新渲染

},

methods:{

addProperty(){

this.item.newProperty = “新值” // 为items添加新属性

console.log(this.items) // 输出带有newProperty的items

}

}

};

点击按钮，发现结果不及预期，数据虽然更新了（console打印出了新属性），但页面并没有更新

二、原理分析

下面来分析一下

vue2是用过Object.defineProperty实现数据响应式

const item = {}

Object.defineProperty(obj, ‘oldProperty’, {

get() {

console.log(get oldProperty:${val});

return val

},

set(newVal) {

if (newVal !== val) {

console.log(set oldProperty:${newVal});

val = newVal

}

}

})

}

原因：组件初始化时，对data中的item进行递归遍历，对item的每一个属性进行劫持，添加set,get方法。我们后来新加的newProperty属性，并没有通过Object.defineProperty设置成响应式数据，修改后不会视图更新。