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

您所在的位置：网站首页 › vue响应式数据原理 › 【面试题】手写简单vue3响应式原理

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

2023-04-08 15:04| 来源: 网络整理| 查看: 265

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

我介绍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，反之返回falsereactive

了解了上面的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) } 复制代码

测试

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) 复制代码

【面试题】手写简单vue3响应式原理_vue.js_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

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章