当前位置：首页 > news >正文

响应式原理

news 来源：原创 2025/6/1 10:38:52

下面，我们来系统的梳理关于 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)