vue $set

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 



猜你喜欢

转载自www.cnblogs.com/guoyu234/p/9061302.html