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