vue中给对象/数组添加响应式属性/项

上文谈到了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)

路漫漫其修远兮，吾将上下而求索。共勉 😶