上文谈到了 vue 的响应式原理, 然后再回头理解该如何在 vue 中给对象 / 数组添加响应式属性 / 项, 就简单多了
上文链接
我相信大部分同学都踩过这个坑: 诶? 为什么我改变了这个值, 界面上没有更新呢?
原因很简单: 直接修改对象属性或数组中的值时, vue 没有给属性或值添加监听, 即 getter/setter 方法
1. 给对象添加响应式属性
Vue.set(obj, key, value)
弊端: 不能一次性添加多个属性
Object.assign({},obj,src)
注意: 一定要跟空对象混合, 这样才能触发设置 getter/setter 的代码
2. 给数组添加响应式的项
- Vue.set(items, IndexOfItem, value)
- items.splice(IndexOfItem, 1, value)
splice 方法改变了原数组, 会触发 watcher
3. 修改数组长度
items.splice(length)
路漫漫其修远兮, 吾将上下而求索. 共勉
来源: http://www.jianshu.com/p/2a4892936531