🐱 个人主页：不叫猫先生
🙋♂️ 作者简介：2022年度博客之星前端领域TOP 2，前端领域优质作者、阿里云专家博主，专注于前端各领域技术，共同学习共同进步，一起加油呀！
💫优质专栏：vue3从入门到精通、TypeScript从入门到实践
📢 资料领取：前端进阶资料以及文中源码可以找我免费领取
🔥 前端学习交流：博主建立了一个前端交流群，汇集了各路大神，一起交流学习，期待你的加入！(文末有我wx或者私信)。
一、认识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等方法。
- get
- 通过Reflect.get(target, key, receiver)获取到属性为key的值
- track收集依赖
- ret为对象则递归为对象创建proxy代理
- set
- Reflect.set(target, key, value, receiver)设置属性为key的值
- trigger 执行更新
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。
-
get
- 追踪变量，收集依赖
- 返回初始化变量的值
-
set
- 修改旧值，赋新值
- trigger 更新
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();
}
}
三、源码地址
附：源码地址文章来源：https://www.toymoban.com/news/detail-435462.html
🌟粉丝福利（抽奖）
《低代码开发实战——基于低代码平台构建企业级应用》
抽奖规则：抽奖助手小程序随机抽奖
活动时间：即日起至2023年4月18日 12:00
温馨提示：参与活动者提前参加博主wx（zbsguilai），以避免错过中奖通知。
文章来源地址https://www.toymoban.com/news/detail-435462.html
到了这里，关于【手撕源码】vue3响应式原理解析（文末抽奖）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
