VUE对象属性改变视图未更新问题

VUE对象属性改变视图未更新问题

VUE的响应式使得赋值变得非常简单，但最近却碰到了改变对象属性视图没有更新的问题，代码如下：

// 添加/修改属性
this.obj.pro = ‘pro1’； // obj在data中有定义
// 删除属性
delete this.obj.pro；

想了很久都不明白是怎么回事。后来无意中逛官网发现了问题。

引用VUE.JS官网上关于深入响应式原理的描述：受现代 JavaScript 的限制 (以及废弃 Object.observe)，Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。
也就是说用原生js操控VUE中的对象，该对象不会更新到视图。

那有什么办法可以解决这个问题呢，官网也给出了答案。
// 添加/修改属性
Vue.set(object,key,val); 或者 this.$set(object,key,val);

// 删除属性
Vue.delete(object,key); 或者 this.$delete(object,key);