Vue3中的reactive与ref

前言&遇到的bug

reactive与ref都是Vue3中非常重要的API，众所周知，用这两个API可以创建响应式数据，从而实现Vue的数据驱动视图。

平时用的时候只知道用ref定义基本数据类型，reactive定义引用数据类型。

因为今天发现一个bug：

let arr1 = reactive([
    //arr1数组内容
])

let arr2 = reactive([])

//异步操作之后把arr1赋值给arr2

arr2 = 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，从而使它关联的组件重新渲染。但是：

1. 无法监听数组的变化： Object.defineProperty 只能劫持对象的属性访问和修改，无法直接监听数组的变化。
2. 初始化时递归遍历对象： 在初始化时，Vue 2 需要递归遍历对象的所有属性来进行劫持，这会导致在初始化大型对象时性能较差。
3. 无法监听属性的添加和删除： 使用 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 true
      return 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)

呜呜后面有空看