认识

2023年06月10日

柏拉文

越努力，越幸运

一、认识

---

Vue.set(target, key, val) 由于 Vue 无法探测普通的新增 property (比如 this.myObject.newProperty = 'hi')，所以通过 Vue.set 为向响应式对象中添加一个 property，可以确保这个新 property 同样是响应式的，且触发视图更新。主要过程如下:

1. 更新数组指定下标的元素：Vue.set(array, idx, val)，内部通过 splice 方法实现响应式更新

2. 更新对象已有属性：Vue.set(obj, key ,val)，直接更新即可 => obj[key] = val

3. 不能向 Vue 实例或者 $data 动态添加根级别的响应式数据

4. Vue.set(obj, key, val)，如果 obj 不是响应式对象，会执行 obj[key] = val，但是不会做响应式处理

5. Vue.set(obj, key, val)，为响应式对象 obj 增加一个新的 key，则通过 defineReactive 方法设置响应式，并触发依赖更新

二、细节

---