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

};

点击按钮，发现结果不及预期，数据虽然更新了（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设置成响应式数据，修改后不会视图更新。

三、解决方案

Vue 不允许在已经创建的实例上动态添加新的响应式属性

若想实现数据与视图同步更新，可采取下面三种解决方案：

• Vue.set()

• Object.assi