Vue3的响应式原理是什么
最新回答
朕射你无罪
2026-01-19 13:26:25
Vue3的响应式原理基于Proxy和Reflect实现，核心流程包括依赖收集和触发更新，具体分为以下步骤：
1. 创建响应式对象
通过reactive()函数将普通对象转换为Proxy代理对象，拦截get和set操作：
- get拦截：调用track()收集依赖，若属性值为对象则递归代理。
- set拦截：调用trigger()触发更新，通过Reflect完成实际赋值。
2. 依赖收集（track）
- 定义全局变量activeEffect存储当前副作用函数。
- effect()执行时，将副作用函数赋值给activeEffect并立即运行，触发目标属性的get拦截。
- track()建立三级映射关系：
WeakMap(target) → Map(key) → Set(effect)，记录对象、属性与副作用函数的关联。
3. 触发更新（trigger）
- 当属性被修改时，set拦截调用trigger()。
- 根据target和key从targetMap中找到关联的副作用函数集合，遍历执行以更新视图。
关键API作用
- Proxy：拦截对象操作（如get/set），是响应式核心。
- Reflect：确保拦截操作后仍能执行默认行为（如返回属性值）。
- WeakMap/Map/Set：高效存储依赖关系，避免内存泄漏。
示例流程
- reactive({counter: 1})创建代理对象。
- effect(() => { #app.innerHTML = state.counter })触发track()，记录state.counter与副作用函数的依赖。
- state.counter += 1触发set拦截，调用trigger()重新执行副作用函数，更新DOM。
此机制实现了自动追踪依赖和精准更新，替代了Vue2的Object.defineProperty，支持动态属性、数组监听等优化。
热门标签
