Vue3源码——响应式原理（Reactivity）

2023-06-27 本文已影响0人麦香菌

对下面视频的总结：
【课程】Vue 3响应式原理 (Vue 3 Reactivity)【中英字幕】- Vue Mastery_哔哩哔哩_bilibili

Motivation

响应式效果

price更新后，前端的Total和Taxes都能自动更新。

但Vue3怎么知道更新这些东西。

JavaScript不自动更新

total一直为10

Vue3 Reactivity

用Vue3建造响应式的方法去建造一个响应式引擎。

let product = {price:5, quantity:2}

为什么要有个targetMap来存储所有的对象，感觉不需要，直接对象自己存depsMap就行了啊？

要有一个Map在公共部分管理所有对象，这样在调用getter或setter时才能找到对象。

targetMap类型为WeakMap，存储的是响应式对象的依赖，也可以是普通的Map，但WeakMap不会影响到垃圾回收
1. 如果target变得无法访问，可以被垃圾回收，那weakMap中对应的value也会被垃圾回收。
depsMap存储的是属性的依赖
dep存储的是一个effect集（Set）的依赖，这些effect集在响应式对象的值发生变化时重新运行

代码实现

track保存effect中的代码

trigger运行所有储存的代码

Proxy and Reflect

vue2响应式的缺点

vue2和vue3的响应式原理 - 简书 (jianshu.com)

vue2的响应式在增删属性时页面无法更新，只在get和set时更新。
vue2通过下标修改数组时无法更新页面。

动机

如何将手动执行track和trigger改为自动执行，会用到代理（Proxy）和反射（Reflect）。

Proxy

JavaScript 代理_zsx0728的博客-CSDN博客

代理语法：new Proxy(target, handler);

new Proxy() - 构造函数
target - 您要代理的对象/功能
handler - 可以重新定义对象的自定义行为

let student1 = {
 age: 24,
 name: "Felix"
}

const handler = {
 get: function(obj, prop) {
 return obj[prop] ? obj[prop] : 'property does not exist';
 }
}

const proxy = new Proxy(student1, handler);
console.log(proxy.name); // Felix
console.log(proxy.age); // 24
console.log(proxy.class); // property does not exist

当handler为空，则代理的行为就像一个原始对象。

Proxy handler

Proxy 提供的handler 方法：

handler.get() ：用于拦截对象的读取属性操作。
handler.set()：设置属性值操作的捕获器。
handler.defineProperty() ：拦截对对象的 Object.defineProperty() 操作。
handler.deleteProperty() ：用于拦截对对象属性的 delete 操作。
handler.has()：针对 in 操作符的代理方法。

get() ：

let student = {
 name: 'Jack',
 age: 24
}

const handler = {

 // get the object key and value
 get(obj, prop) {

 return obj[prop];
 }
}

const proxy = new Proxy(student, handler);
console.log(proxy.name); // Jack

set() ：

let student = {
 name: 'John'
}

let setNewValue = {
 set: function(obj, prop, value) {

 obj[prop] = value;
 return;
 }
};

// setting new proxy
let person = new Proxy(student, setNewValue);

// setting new key/value
person.age = 25;
console.log(person); // Proxy {name: "John", age: 25}

Reflect

在JavaScript中，Reflect是一个内置对象，它提供了一组用于拦截JavaScript操作的方法。这些方法与Proxy的拦截器方法一一对应，并且提供了一些便捷的功能。

JavaScript中的Reflect简介 - 知乎 (zhihu.com)

Reflect在Vue3中有两个用处：

将this指向Proxy本身，保证响应式不失效。vue3响应式Proxy与Reflect的理解及基本使用实例详解vue.js脚本之家 (jb51.net)
Reflect在执行结束时，会返回执行结果，而vue2使用的Object.defineProperty不会返回结果，若代码执行错误，Object.defineProperty中需要写大量的try...catch解决，而Reflect保证了代码的健壮性。（ vue3响应式原理-reflect公孙元二的博客-CSDN博客reflect vue）