响应式原理
下面，我们来系统的梳理关于 Vue 响应式原理 的基本知识点
一、响应式核心思想
Vue 的响应式系统通过 数据劫持 + 依赖收集 + 派发更新 实现，当数据变化时自动触发视图更新。这是 Vue 实现「数据驱动视图」的核心机制。
二、核心实现原理
1. Vue2 实现方案（Object.defineProperty）
// 简化版数据劫持实现
function defineReactive(obj, key, val) {const dep = new Dep() // 依赖收集器Object.defineProperty(obj, key, {get() {if (Dep.target) { // 当前 Watcher（依赖）dep.addSub(Dep.target) // 收集依赖}return val},set(newVal) {if (newVal === val) returnval = newValdep.notify() // 通知所有 Watcher 更新}})
}
- 特性：
- 只能劫持已存在的属性
- 对数组需特殊处理（重写数组方法）
- 新增属性需使用
Vue.set触发响应
2. Vue3 实现方案（Proxy）
const reactive = (target) => {return new Proxy(target, {get(target, key, receiver) {track(target, key) // 收集依赖return Reflect.get(target, key, receiver)},set(target, key, value, receiver)