【Vue3源码学习】— CH2

1.核心概念

1.1 Proxy和Reflect

Vue 3 采用 Proxy 来拦截对象操作，配合 Reflect 保证操作的默认行为。这使得 Vue 能够在数据访问或修改时执行自定义逻辑，实现自动的依赖跟踪和更新触发。

1.2 响应式API

通过 reactive、ref 等 API，Vue 允许开发者把普通对象转换成响应式对象，实现数据的自动更新。

1.3 依赖收集与更新触发

Vue 内部通过 track 和 trigger 函数管理依赖关系，确保数据变化时能自动通知并执行相关的副作用函数。

1.4 触发更新（Triggering Updates）：

当响应式数据被修改时，Vue 通过trigger函数查找所有依赖于这个数据的副作用函数，并重新执行它们。这样，基于这些数据的视图或其他副作用就会被更新。

1.5 副作用函数（Effect）

Vue 3通过effect函数包装副作用（如渲染函数、计算属性等），使其能够自动响应数据的变化。每个副作用在执行时都会被ReactiveEffect类的实例封装，这个实例记录了副作用函数以及它所依赖的数据。

1.6 计算属性和观察者

计算属性和观察者也是通过副作用系统实现的。计算属性（computed）和观察者（watch）提供了更细粒度的响应式控制，优化性能同时保持数据更新的逻辑清晰。

1.7 EffectScope

effectScope 管理副作用的生命周期，尤其是在组件卸载时自动停止副作用，避免内存泄漏。

1.8 性能优化：

Vue 3的响应式系统使用了诸如WeakMap和Map这样的原生数据结构来存储依赖关系，减少了内存的使用，并优化了垃圾回收。同时，通过避免不必要的副作用执行和精细的依赖追踪，提高了更新的效率。

2. 手动实现简单响应式系统

在完整的学习了Vue3源码响应式系统部分之后，我们尝试以手动创建一个简化版的响应式系统来加深理解：

//响应式逻辑
let activeEffect = null;
const targetMap = new WeakMap();

const reactive = (target) => {
  return new Proxy(target, handler);
}
const handler = {
  get(target, property, receiver) {
    track(target, property);
    return Reflect.get(target, property, receiver); // 确保返回属性的值
  },
  set(target, property, value, receiver) {
    const result = Reflect.set(target, property, value, receiver); // 设置新值
    trigger(target, property, value);
    return result;
  }
}
const track = (target, property) => {
  if (!activeEffect) return;

  let depsMap = targetMap.get(target);
  if (!depsMap) {
    depsMap = new Map();
    targetMap.set(target, depsMap);
  }
  let deps = depsMap.get(property);
  if (!deps) {
    deps = new Set(); // 使用 Set 存储唯一的副作用函数
    depsMap.set(property, deps);
  }
  deps.add(activeEffect);
}
const trigger = (target, property) => {
  const depsMap = targetMap.get(target)
  if (!depsMap) {
    return;
  }
  const deps = depsMap.get(property);
  deps.forEach(effectFn => {
    effectFn.run();
  })
}
class ReactiveEffect {
  constructor(fn) {
	this.fn=fn;
  }
  run() {


### 刷面试题

刷题的重要性，不用多说。对于应届生或工作年限不长的人来说，刷面试题一方面能够尽可能地快速自己对某个技术点的理解，另一方面在面试时，有一定几率被问到相同或相似题，另外或多或少也能够为自己面试增加一些自信心，可见适当的刷题是很有必要的。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.youkuaiyun.com/topics/618166371)**

* **前端字节跳动真题解析**  

  ![](https://img-blog.csdnimg.cn/img_convert/8d27500df7b25342f252bca635ca0ab3.png)

* **【269页】前端大厂面试题宝典**  

  ![](https://img-blog.csdnimg.cn/img_convert/eac3322374bd31596de9bf548f6ce47f.png)


最后平时要进行自我分析与评价，做好职业规划，不断摸索，提高自己的编程能力和抽象思维能力。大厂面试远没有我们想的那么困难，摆好心态，做好准备，你也可以的。