vue $set

Posted 2020-11-06 guoyu234

problem：
vue 项目中经常遇到一些需要改变 table 的某项数据，或者往 table 中 增删改 某些数据（诸如此类在 created 周期后改变已经初始化的 值）
操作结束后发现 页面根本就不能正常渲染

reason： 

受现代 javascript 的限制 (以及废弃 Object.observe)，Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，

所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的.。 （详情见 VUE 深入响应式原理）

Demo：

// 伪 code 

 var arr = [
 {name:‘peter‘,age:18}  
]
this.data_arr = arr

this.data_arr[0].age = 100

　　这段代码想 改变 数组中 peter 的 age，但是如果是在 created 周期后改变，页面可能无法正常渲染

我们可以这么干：

this.$set( this.data_arr[0],"age",20 )   ， 具体操作数组和对象的方法如下：

then， 数组会变化，页面会正常渲染，操作非常友好。

 以上 ~ 88