前言&遇到的bug
reactive与ref都是Vue3中非常重要的API，众所周知，用这两个API可以创建响应式数据，从而实现Vue的数据驱动视图。
平时用的时候只知道用ref定义基本数据类型，reactive定义引用数据类型。
因为今天发现一个bug：
let arr1 = reactive([//arr1数组内容
])let arr2 = reactive([])//异步操作之后把arr1赋值给arr2arr2 = arr1
console.log(arr2) //proxy数组为Array(0)解决：给arr2外层包裹一个对象
let arr1 = reactive([//arr1数组内容
])let list = reactive({arr2:[]
})//异步操作list.arr2 = arr1
console.log(list.arr2)这样可以赋值成功
参考带你看懂vue3中最重要的API——ref和reactive_vue ref reactive-CSDN博客
发现要么所有数据用ref单独定义，要么用reactive定义一个外层对象，在对象里定义数据（类似Vue2的data） ，最好不要用reactive直接定义数组。
接下来复习一下reactive原理
Proxy
文档链接：Proxy - JavaScript | MDN (mozilla.org)
先回顾Vue2的数据劫持：
通过 Object.defineProperty 方法实现，递归地将一个普通对象的每个属性转换为 getter/setter 的形式来实现数据劫持，每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。但是：
- 无法监听数组的变化： Object.defineProperty 只能劫持对象的属性访问和修改，无法直接监听数组的变化。
- 初始化时递归遍历对象： 在初始化时，Vue 2 需要递归遍历对象的所有属性来进行劫持，这会导致在初始化大型对象时性能较差。
- 无法监听属性的添加和删除： 使用 Object.defineProperty 只能劫持已经存在的属性，无法监听动态添加和删除的属性。
Proxy 的原理是通过在目标对象和代理对象之间建立一个拦截层，所有对代理对象的操作都会先经过这个拦截层进行处理。在拦截层，可以对不同操作定义不同的事件处理程序。
创建proxy
const p = new Proxy(target, handler)target -- 要使用 Proxy 包装的目标对象
handler -- 一个通常以函数作为属性的对象，各属性中的函数分别定义了对代理对象进行各种操作时的拦截行为
在handler中有13个方法（参见文档），比较常用的是get和set.
Vue3中的响应式
reactive
reactive的内部就是基于proxy，使用reactive定义的对象会返回这个对象的代理。
当Proxy 对象监听到了的数据变更时，会触发handler中的相应函数，从而实现自定义拦截操作。
手写reactive ↓
const reactiveHandler = {get (target, key) {if (key==='_is_reactive') return truereturn Reflect.get(target, key)},set (target, key, value) {//Reflect.set是执行该事件的默认行为，不需要对默认行为重写//在执行完自定义拦截行为后调用默认行为即可//vue3在这里会通知与该对象关联的视图进行更新来实现响应式const result = Reflect.set(target, key, value)console.log('添加或修改了属性', key, value)return result},deleteProperty (target, key) {const result = Reflect.deleteProperty(target, key)console.log('删除了属性', key)return result},
}function reactive (target) {if (target && typeof target==='object') {if (target instanceof Array) { // 数组target.forEach((item, index) => {target[index] = reactive(item)})} else { // 对象Object.keys(target).forEach(key => {target[key] = reactive(target[key])})}const proxy = new Proxy(target, reactiveHandler)return proxy}return target
}const obj = {name:'小明',age:18,family:{father:{name:'大明',age:40},mother:{name:'大红',age:38}}
}const objProxy = reactive(obj)
console.log(objProxy)objProxy.age ++ //这里每次修改 都会执行你在handler中的自定义行为
objProxy.family.father.age ++
objProxy.family.mother.name = '小红'
ref
把基本数据类型通过value包裹成引用式数据类型，再用reactive定义
也就是说，通过ref定义的基本数据类型，返回的是一个对象，但这个对象只有一个属性.value
本质上，ref(0) 等于 reactive( { value:0 })
-----------------------------------------------------------------------------------------------------------------------------
还有更深层的文档介绍深入响应式系统 | Vue.js (vuejs.org)
呜呜后面有空看
