手写简单vue3响应式原理-六虎

在之前的文章里小浪介绍过Vue2的呼应式原理，谈论中有掘友谈论想让我介绍Vue3的呼应式原理，那么在这篇文章中小浪来带咱们来简略手写一下Vue3中的几个呼应式api

Proxy

首要得先来介绍一下Proxy这个强壮的API：

在Vue3中运用Proxy目标来代替 Vue 2 中依据 Object.defineProperty，消除了 Vue 2 中依据 Object.defineProperty 所存在的一些限制，比方无法监听数组索引，length特点等等

在Proxy中默认监听动态增加特点和特点的删去操作，就很便利

Proxy合作Reflect运用，Reflect是ES6呈现的新特性，代码运行期间用来设置或获取目标成员（操作目标成员），Reflect没有呈现前运用Object的一些办法比方 Object.getPrototypeOf, Reflect也有对应的办法 Reflect.getPrototypeOf,两者都是相同的，不过Reflect更有语义。

下面来看一下根本的运用

const target = {
    name: '小浪',
    age: 22,
}
const handler = {
    get(target, key, receiver) {
        console.log(`获取目标特点${key}值`)
        return Reflect.get(target, key, receiver)
    },
    set(target, key, value, receiver) {
        console.log(`设置目标特点${key}值`)
        return Reflect.set(target, key, value, receiver)
    },
    deleteProperty(target, key) {
        console.log(`删去目标特点${key}值`)
        return Reflect.deleteProperty(target, key)
    },
}
const proxy = new Proxy(target, handler)
console.log(proxy.age)
proxy.age = 21
console.log(delete proxy.age)

输出

获取目标特点age值
22
设置目标特点age值
删去目标特点age值
true

target：参数表明所要阻拦的目标目标

handler：参数也是一个目标，用来定制阻拦行为

留意：

this 要害字表明的是署理的 handler 目标，所以不能运用this而是要用 receiver传递，receiver代表当时proxy目标或许承继proxy的目标，它确保传递正确的 this 给 getter，setter
set 和 deleteProperty 也需求回来（增加return ），回来的是一个布尔值，设置/删去成功回来true，反之回来false

reactive

了解了上面的Proxy和Reflect，咱们来看一下reactive的完成，reactive，回来proxy目标，这个reactive可以深层次递归，假如发现子元素存在引证类型，递归处理。

// 判别是否为目标 ，留意 null 也是目标
const isObject = val => val !== null && typeof val === 'object'
// 判别key是否存在
const hasOwn = (target, key) => Object.prototype.hasOwnProperty.call(target, key)
export function reactive(target) {
    // 首要先判别是否为目标
    if (!isObject(target)) return target
    const handler = {
        get(target, key, receiver) {
            console.log(`获取目标特点${key}值`)
            // ... 这里还需求搜集依靠，先空着
            const result = Reflect.get(target, key, receiver)
            // 递归判别的要害, 假如发现子元素存在引证类型，递归处理。
            if (isObject(result)) {
                return reactive(result)
            }
            return result
        },
        set(target, key, value, receiver) {
            console.log(`设置目标特点${key}值`)
            // 首要先获取旧值
            const oldValue = Reflect.get(target, key, reactive)
            // set 是需求回来 布尔值的
            let result = true
            // 判别新值和旧值是否相同来决议是否更新setter
            if (oldValue !== value) {
                result = Reflect.set(target, key, value, receiver)
                // 更新操作 等下再补
            }
            return result
        },
        deleteProperty(target, key) {
            console.log(`删去目标特点${key}值`)
            // 先判别是否有key
            const hadKey = hasOwn(target, key)
            const result = Reflect.deleteProperty(target, key)
            if (hadKey && result) {
                // 更新操作 等下再补
            }
            return result
        },
    }
    return new Proxy(target, handler)
}

测试

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title></title>
    </head>
    <body>
        <script type="module">
            import { reactive } from '../src/reactive.js'
            const obj = {
                name: '小浪',
                age: 22,
                test: {
                    test1: {
                        test2: 21,
                    },
                },
            }
            const proxy = reactive(obj)
            console.log(proxy.age)
            proxy.test.test1.test2 = 22
            console.log(delete proxy.age)
        </script>
    </body>
</html>

搜集依靠/触发更新

上面咱们还有get中搜集依靠没有完结，搜集依靠触及道track , effect 还有依靠地图，下面我给出一张图先介绍一下effect和track是如何搜集依靠的

呼应式次序：effect > track > trigger > effect

在组件烘托过程中，一个 effect 会会触发get，从而对值进行 track，当值发生改动，就会进行 trigge，履行 effect 来完结一个呼应

那么先来完成 effect

effect

effect的完成很简略

// activeEffect 表明当时正在走的 effect
let activeEffect = null
export function effect(callback) {
    activeEffect = callback
    callback()
    activeEffect = null
}

track

然后便是对 track 的完成

// targetMap 表里每个key都是一个一般目标 对应他们的 depsMap
let targetMap = new WeakMap()
export function track(target, key) {
    // 假如当时没有effect就不履行追寻
    if (!activeEffect) return
    // 获取当时目标的依靠图
    let depsMap = targetMap.get(target)
    // 不存在就新建
    if (!depsMap) {
        targetMap.set(target, (depsMap = new Map()))
    }
    // 依据key 从 依靠图 里获取到到 effect 集合
    let dep = depsMap.get(key)
    // 不存在就新建
    if (!dep) {
        depsMap.set(key, (dep = new Set()))
    }
    // 假如当时effectc 不存在，才注册到 dep里
    if (!dep.has(activeEffect)) {
        dep.add(activeEffect)
    }
}

最终增加到hander 里 get 中

get(target, key, receiver) {
    // ...
    // 搜集依靠
    track(target, key)
   	// ...
},

触发更新

经过上面的图，咱们知道在set中运用trigger函数来触发更新，咱们来完成一下吧

// trigger 呼应式触发
export function trigger(target, key) {
    // 拿到 依靠图
    const depsMap = targetMap.get(target)
    if (!depsMap) {
        // 没有被追寻，直接 return
        return
    }
    // 拿到了 视图烘托effect 就可以进行排队更新 effect 了
    const dep = depsMap.get(key)
    // 遍历 dep 集合履行里边 effect 副作用办法
    if (dep) {
        dep.forEach(effect => {
            effect()
        })
    }
}

最终增加到hander 的 set 和 deleteProperty 中

set(target, key, value, receiver) {
    // ...
    if (oldValue !== value) {
        result = Reflect.set(target, key, value, receiver)
        trigger(target, key)
    }
	// ...
},
deleteProperty(target, key) {
    // ...
    if (hadKey && result) {
        // 更新操作
        trigger(target, key)
    }
	// ...
}

ref

把一个基础类型包装成一个有value呼应式目标（这里是运用get/set 存取器，来进行追寻和触发），假如是一般目标就调用 reactive 来创立呼应式目标

// 判别是否是一个目标，是就用 reactive 来署理
const convert = val => (isObject(val) ? reactive(val) : val)
class RefImpl {
    constructor(_rawValue) {
        this._rawValue = _rawValue
        this.__v_isRef = true
        // 判别 _rawValue 是否是一个目标
        // 假如是目标调用reactive运用 proxy来署理
        // 不是回来 _rawValue 本身
        this._value = convert(_rawValue)
    }
    // 运用get/set 存取器，来进行追寻和触发
    get value() {
        // 追寻依靠
        track(this, 'value')
        // 当然 get 得回来 this._value
        return this._value
    }
    set value(newValue) {
        // 判别旧值和新值是否一向
        if (newValue !== this._value) {
            this._rawValue = newValue
            // 设置新值的时分也得运用 convert 处理一下，判别新值是否是目标
            this._value = convert(this._rawValue)
            // 触发依靠
            trigger(this, 'value')
        }
    }
}
export function ref(rawValue) {
    // __v_isRef 用来标识是否是 一个 ref 假如是直接回来，不必再转
    if (isObject(rawValue) && rawValue.__v_isRef) return rawValue
    return new RefImpl(rawValue)
}

toRef

toRef传入两个参数，目标目标，目标当中的特点名，它的回来成果便是特点名的可呼应式数据，便是将目标中的某个值转化为呼应式数据 toRef(obj,key)

那么简略来完成一下

class ObjectRefImpl {
    constructor(proxy, _key) {
        this._proxy = proxy
        this._key = _key
        // __v_isRef 用来标识是否是 一个 ref
        this.__v_isRef = true
    }
    get value() {
        // 这里不必搜集依靠
        // this._proxy 便是呼应式目标，当拜访[this._key]时，this._proxy里边会去自动搜集依靠
        return this._proxy[this._key]
    }
    set value(newVal) {
        // 这里不必搜集依靠
        // this._proxy 呼应式目标，会在this._proxy里边set去调用trigger
        this._proxy[this._key] = newVal
    }
}
// 露出出去的办法
export function toRef(proxy, key) {
    return new ObjectRefImpl(proxy, key)
}

测试

import { ref, effect, toRef, reactive } from '../src/reactive.js'
const obj = reactive({
    name: '小浪',
})
const age = toRef(obj, 'age')
age.value = 21
console.log(obj)
effect(() => {
    age.value = 22
})
console.log(obj)

原来的obj目标没有 age 特点，运用 toRef 增加了 age，并且是呼应式的

差异于ref:

ref是对原始数据的复制，当修正ref数据时，模板中的视图会发生改动，但是原始数据并不会改动。 toRef是对原始数据的引证，修正toRef数据时，原始数据也会发生改动，但是视图并不会更新。

toRefs

想必这个咱们常常运用吧，平常假如运用reactive创立目标，咱们不能直接进行解构，咱们要运用 toRefs 帮助咱们进行解构，把整个 reactive 创立的目标变成一般目标，然后把每个特点变成 ref 呼应式目标。那么直接上手写一下吧，其实它的核心仍是运用了 toRef

export function toRefs(proxy) {
    // 判别 当时 proxy 是 proxy 数组， 仍是 proxy 目标
    const ret = proxy instanceof Array ? new Array(proxy.length) : {}
    for (const key in proxy) {
        // 内部仍是调用 toRef 进行转为 呼应式
        ret[key] = toRef(proxy, key)
    }
    return ret
}

测试

import { reactive, toRefs } from '../src/reactive.js'
const obj = reactive({
    name: '小浪',
    age: 22,
})
const { name, age } = toRefs(obj)
console.log(obj)
name.value = '小云'
age.value = 21
console.log(obj)

测试成功，toRefs解构后的特点也是呼应式

代码

github

结语: 身边的小伙伴们都在准备秋招，这段时间除了实习之外的时间我也在慢慢准备，好久没更文了，感谢咱们一向以来对小浪的支持，持续加油努力学习！！！

手写简单vue3响应式原理

Proxy

reactive

搜集依靠/触发更新

effect

track

触发更新

ref

toRef

toRefs

代码

相关文章

前端录屏+定位源码，帮你快速定位线上bug

一篇搞定H5直播中的小动画，评论/点赞/关注/抽奖

蒙提霍尔问题

国产自主研发，完全可控 IDE！

作者信息