对下面视频的总结：
【课程】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不会影响到垃圾回收
- 如果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）
track和trigger的自动执行
activeEffect & ref
activeEffect
product.quantity被执行时会调用track函数，从而遍历targetMap和它的各种依赖，但这是没必要的，为此加入了activeEffect，解决方法有如下两步：
-
定义一个activeEffect，让其只在定义effect函数时不为null。
-
修改track函数，让其只在activeEffect不为null时可执行。
ref
当salePrice不是响应式的，那salePrice被修改，total不会被修改，所以要把salePrice变成响应式的，这就要用到ref。
js的object accessors
object accessors就是当给user.fullName赋值就会触发get，调用user.fullName就会触发set，感觉和Object.defineProperty很像。
ref
把ref定义成reactive的结构，同时用到object accessors的属性。
Computed & Vue 3 Source
Computed
将effect转为computed
Vue3对象新增的属性自动获得响应式
Vue2中响应式对象新增的属性无法自动获得响应式，需要执行以下语句才行
Vue.set(product,'name','Socks')
而Vue3中新增属性的动作在reactive的代理中的Reflect执行了好像。
网友评论