【面试题】手写简单vue3响应式原理

奋斗吧
奋斗吧
擅长邻域:未填写

标签: 【面试题】手写简单vue3响应式原理 HarmonyOS博客 51CTO博客

2023-04-08 18:24:00 104浏览

【面试题】手写简单vue3响应式原理,我介绍Vue3的响应式原理,那么在这篇文章中来带大家来简单手写一下Vue3中的几个响应式api。


【面试题】手写简单vue3响应式原理_原始数据

 

我介绍Vue3的响应式原理,那么在这篇文章中来带大家来简单手写一下Vue3中的几个响应式api

Proxy

首先得先来介绍一下Proxy这个强大的API:

在Vue3中使用Proxy对象来代替 Vue 2 中基于 Object.defineProperty,消除了 Vue 2 中基于 Object.defineProperty 所存在的一些局限,比如无法监听数组索引,length属性等等

在Proxy中默认监听动态添加属性和属性的删除操作,就很方便

Proxy配合Reflect使用,ReflectES6出现的新特性,代码运行期间用来设置或获取对象成员(操作对象成员),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>

复制代码

【面试题】手写简单vue3响应式原理_javascript_02

收集依赖/触发更新

上面我们还有get中收集依赖没有完成,收集依赖涉及道track , effect 还有依赖地图,下面我给出一张图先介绍一下effect和track是如何收集依赖的

【面试题】手写简单vue3响应式原理_vue.js_03

响应式顺序: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, 并且是响应式的

【面试题】手写简单vue3响应式原理_原始数据_04

区别于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解构后的属性也是响应式

【面试题】手写简单vue3响应式原理_响应式_05


好博客就要一起分享哦!分享海报

此处可发布评论

评论(0展开评论

暂无评论,快来写一下吧

展开评论

您可能感兴趣的博客

客服QQ 1913284695