【手撕源码】vue3响应式原理解析（文末抽奖）

🐱 个人主页：不叫猫先生
🙋‍♂️ 作者简介：2022年度博客之星前端领域TOP 2，前端领域优质作者、阿里云专家博主，专注于前端各领域技术，共同学习共同进步，一起加油呀！
💫优质专栏：vue3从入门到精通、TypeScript从入门到实践
📢 资料领取：前端进阶资料以及文中源码可以找我免费领取
🔥 前端学习交流：博主建立了一个前端交流群，汇集了各路大神，一起交流学习，期待你的加入！(文末有我wx或者私信)。

【手撕源码】vue3响应式原理解析（文末抽奖）

目录

  • 一、认识Proxy
  • 二、原理分析
    • 1.reactive
    • 2.track
    • 3.trigger
    • 4.ref
    • 5.effect
    • 6.ReactiveEffect
    • 7.computed
    • 8.mount
  • 三、源码地址
    • 🌟粉丝福利（抽奖）

一、认识Proxy

Proxy 用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”（meta programming），即对编程语言进行编程。
Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。
new Proxy(target,handler)表示生成一个Proxy实例，target参数表示所要拦截的目标对象，它可以是任意类型的对象，包括内置的数组，函数等，handler也是一个对象，用来定制拦截行为，当发生某些操作时触发该对象。

二、原理分析

1.reactive

声明副作用变量，如果该变量没有值就不进行追踪。在 Vue2 的时候，有一个“全局变量”，叫做 Dep.target – watcher，vue3中还要有这么一个全局变量，就是activeEffect。

//副作用变量
let activeEffect;

targetMap用来存放依赖

let targetMap = new WeakMap();

判断传入的数据data是否为对象，需要除去data为null的情况。因为typeof null === ‘object’，null的机器码都是0，object机器码为000

function isObject(data) {
	return data && typeof data === 'object'
}

声明reactive函数，返回proxy实例。proxy支持get、set、deleteProperty、has、ownKeys等方法。

receiver代表当前proxy对象或者继承proxy的对象，保证传递正确的this 给 getter、setter。

export function reactive(data) {
    //判断是否为对象
	if (!isObject(data)) return 
	// 返回proxy实例
	return new Proxy(data, { 
		get(target, key, receiver) {
			const ret = Reflect.get(target, key, receiver);
			// 收集依赖
			track(target, key)
			//如果获取的数据还是对象的话就递归，继续为此对象创建 Proxy 代理
			return isObject(ret) ? reactive(ret) : ret
		},
		//set修改数据，需要返回一个布尔值
		set(target, key, value,receiver) {
           // 首先获取旧值
            const oldValue = Reflect.get(target, key, receiver)
            // 判断新值和旧值是否一样来决定是否更新setter
            let result = true;
            // 当新值不等于旧值的时候执行更新草错
            if (oldValue !== value) {
                result = Reflect.set(target, key, value, receiver)
                // 更新操作
                trigger(target, key)
            }
            //返回布尔类型
            return result
		},
		deleteProperty(target, key) {
		    //首先需要判断是否有要删除的key
		    const hasK = hasKey(target, key)
		    const ret = Reflect.deleteProperty(target, key)
		    //存在key且有值则更新
		    if(hasK&&ret){
		    //更新
			 trigger(target, key)
		    }
			return ret
		},
		has(target, key) {
			track(target, key)
			const ret = Reflect.has(target, key)
		},
		ownKeys(target, key) {
			track(target)
			return Reflect.ownKeys(targety)
		},
	})
}
// 判断对象中key是否存在
const hasKey = (target, key) => Object.prototype.hasOwnProperty.call(target, key)

2.track

track里面会收集各种依赖，把依赖关系做成各种映射的关系，映射关系就叫 targetMap， 内部拿到这个key，就可以通过映射关系找到对应的value，就可以影响这个执行函数，

function track(target, key) {
	// 如果当前没有effect就不执行追踪
    if (!activeEffect) return
    //找target有么有被追踪
	let depsMap = targetMap.get(target);
	//判断target是否为空，如果target为空则没被追踪，则set设置一个值
	if (!depsMap) targetMap.set(target, (depsMap = new Map()));
	//判断depsMap中有没有key，没有key就set一个（判断target.key有没有被追踪）
	let dep = depsMap.get(key)
	// 如果key没有被追踪，那么添加一个
	if (!dep) depsMap.set(key, (dep = new Set()))
	//触发副作用函数
	trackEffect(dep)
}

//副作用函数
function trackEffect(dep) {
	//相当于 Dep.target && dep.add(Dep.target)
	//如果key没有添加activeEffect，则添加一个
	if (!dep.has(activeEffect)) dep.add(activeEffect);
}

3.trigger

修改数据时通过 trigger目标对象找到key，根据映射关系找到cb函数执行更新视图。

function trigger(target, key) {
    // 获取依赖数据，对依赖数据循环，
	const depsMap = targetMap.get(target)
	console.log(depsMap,'depsMap')
	if (!depsMap) return
	//如果effect存在则执行run方法，run方法就是执行的视图更新回调
	depsMap.get(key).forEach(effect =>
		effect && effect.run()
	);
}

4.ref

ref中声明了一个RefImpl类，初始化时传入参数init。

export function ref(init) {
	class RefImpl {
		constructor(init) {
		// 接收传过来的参数
			this.__value = init;
		}
		//获取数据，直接返回传过来的数据
		get value() {
			track(this, 'value')
			return this.__value
		}
		//更新数据
		set value(newVal) {
			this.__value = newVal;
			trigger(this, 'value')
		}
	}
	return new RefImpl(init);
}

5.effect

effect第一个参数是函数，如果这个函数中有使用 ref/reactive 对象，当该对象的值改变的时候effect就会执行。

function effect(fn,option={}){
   //effect 数据类型为ReactiveEffect，一上来就会执行run方法，之后可以自定义执行run方法，即设置option的内容
  let __effect = new ReactiveEffect(fn);
  if(!option.lazy){
	  __effect.run();
  }
  return __effect
}

6.ReactiveEffect

声明ReactiveEffect类，间接定义effect的数据类型。

class ReactiveEffect{
	constructor(fn){
		this.fn = fn;
	}
	// 依赖收集之前触发
	run(){
		activeEffect = this;
		return this.fn()
	}
}

7.computed

计算属性

export function computed(fn){
//只考虑函数情况
let __computed;
const e = effect(fn,{lazy:true })
__computed = {
	get value(){
		return e.run();
	}
}
return __computed
}

8.mount

mount的参数instance相当于整个app，el相当于挂在的节点

export function mount(instance,el){
   // 执行effect
	effect(function(){
		instance.$data && update(instance,el)
	})
	instance.$data = instance.setup();
	//更新节点
	update(instance,el)
	function update(instance,el){
	    //挂载节点的render函数返回值内容复制给节点的innerHTML，进行更新
		el.innerHTML = instance.render();
	}
}

三、源码地址

附：源码地址

🌟粉丝福利（抽奖）

《低代码开发实战——基于低代码平台构建企业级应用》
抽奖规则：抽奖助手小程序随机抽奖
活动时间：即日起至2023年4月18日 12:00
温馨提示：参与活动者提前参加博主wx（zbsguilai），以避免错过中奖通知。
【手撕源码】vue3响应式原理解析（文末抽奖）

标签 , ,

发表回复