Vue3的响应式原理解析

这篇文章主要为大家介绍了Vue3的响应式原理解析，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助

Vue3使用的是ES6的Proxy特性

function reactive(obj) {
    
    
    if (typeof obj !== 'object' && obj != null) {
    
    
        return obj
    }
    // Proxy相当于在对象外层加拦截
    // http://es6.ruanyifeng.com/#docs/proxy
    const observed = new Proxy(obj, {
    
    
        get(target, key, receiver) {
    
    
            // Reflect用于执行对象默认操作，更规范、更友好
            // Proxy和Object的方法Reflect都有对应
            // http://es6.ruanyifeng.com/#docs/reflect
            const res = Reflect.get(target, key, receiver)
            console.log(`获取${
      
      key}:${
      
      res}`)
            return res
        },
        set(target, key, value, receiver) {
    
    
            const res = Reflect.set(target, key, value, receiver)
            console.log(`设置${
      
      key}:${
      
      value}`)
            return res
        },
        deleteProperty(target, key) {
    
    
            const res = Reflect.deleteProperty(target, key)
            console.log(`删除${
      
      key}:${
      
      res}`)
            return res
        }
    })
    return observed
}
//代码测试
const state = reactive({
    
    
    foo: 'foo',
    bar: {
    
    
        a: 1
    }
})
// 1.获取
state.foo // ok
// 2.设置已存在属性
state.foo = 'fooooooo' // ok
// 3.设置不存在属性
state.dong = 'dong' // ok
// 4.删除属性
delete state.dong // ok

嵌套对象响应式

测试：嵌套对象不能响应

// 设置嵌套对象属性
react.bar.a = 10 // no ok

添加对象类型递归

// 提取帮助方法
const isObject = val => val !== null && typeof val === 'object'

function reactive(obj) {
    
    
    //判断是否对象
    if (!isObject(obj)) {
    
    
        return obj
    }
    const observed = new Proxy(obj, {
    
    
        get(target, key, receiver) {
    
    
            // ...
            // 如果是对象需要递归
            return isObject(res) ? reactive(res) : res
        },
        //...
    })
}

避免重复代理

重复代理，比如

reactive (data) // 已代理过的纯对象
reactive (react) // 代理对象

解决方式：将之前代理结果缓存，get 时直接使用

const toProxy = new WeakMap() // 形如obj:observed
      const toRaw = new WeakMap() // 形如observed:obj
      function reactive (obj) {
    
    
        //...
        // 查找缓存，避免重复代理
        if (toProxy.has(obj)) {
    
    
          return toProxy.get(obj)
        }
        if (toRaw.has(obj)) {
    
    
          return obj
        }
        const observed = new Proxy(...)
        // 缓存代理结果
        toProxy.set(obj, observed)
        toRaw.set(observed, obj)
        return observed
      }
      // 测试效果
      console.log(reactive(data) === state)
      console.log(reactive(state) === state)