vue2和vue3数据响应式原理分析及如何实现

发布时间：2021-12-22 20:22:07 作者：柒染
来源：亿速云阅读：213

# Vue2和Vue3数据响应式原理分析及如何实现

## 目录
1. [响应式系统概述](#响应式系统概述)
2. [Vue2响应式原理](#vue2响应式原理)
   - [Object.defineProperty实现](#objectdefineproperty实现)
   - [数组处理特殊情况](#数组处理特殊情况)
   - [存在的问题](#存在的问题)
3. [Vue3响应式原理](#vue3响应式原理)
   - [Proxy基础实现](#proxy基础实现)
   - [Reflect的作用](#reflect的作用)
   - [性能优化](#性能优化)
4. [手写实现对比](#手写实现对比)
   - [Vue2风格实现](#vue2风格实现)
   - [Vue3风格实现](#vue3风格实现)
5. [升级变化总结](#升级变化总结)
6. [最佳实践建议](#最佳实践建议)

## 响应式系统概述

响应式编程是Vue的核心机制，其本质是建立**数据与依赖的自动关联**。当数据变化时，所有依赖该数据的相关操作（如DOM更新、计算属性等）都能自动执行。

```javascript
// 理想中的响应式行为
const data = { count: 0 }
watchEffect(() => {
  console.log(`Count is: ${data.count}`)
})
data.count++ // 应自动触发日志输出

Vue2响应式原理

Object.defineProperty实现

Vue2通过Object.defineProperty对数据对象进行递归劫持：

function defineReactive(obj, key) {
  let value = obj[key]
  const dep = new Dep() // 依赖收集器
  
  Object.defineProperty(obj, key, {
    get() {
      if (Dep.target) {
        dep.depend() // 收集依赖
      }
      return value
    },
    set(newVal) {
      if (newVal === value) return
      value = newVal
      dep.notify() // 触发更新
    }
  })
}

// 递归处理整个对象
function observe(obj) {
  if (typeof obj !== 'object' || obj === null) return
  new Observer(obj)
}

class Observer {
  constructor(value) {
    if (Array.isArray(value)) {
      // 数组特殊处理
    } else {
      this.walk(value)
    }
  }
  
  walk(obj) {
    Object.keys(obj).forEach(key => {
      defineReactive(obj, key)
    })
  }
}

数组处理特殊情况

由于Object.defineProperty对数组无效，Vue2采用了拦截器模式：

const arrayProto = Array.prototype
const arrayMethods = Object.create(arrayProto)

['push', 'pop', 'shift', 'unshift'].forEach(method => {
  const original = arrayProto[method]
  def(arrayMethods, method, function mutator(...args) {
    const result = original.apply(this, args)
    const ob = this.__ob__
    ob.dep.notify() // 手动触发更新
    return result
  })
})

存在的问题

初始化递归性能问题：嵌套对象需要深度遍历
动态新增属性：必须使用Vue.set
数组限制：通过索引修改元素无法检测
ES6+数据结构：Map/Set等不支持

Vue3响应式原理

Proxy基础实现

Vue3采用ES6的Proxy实现响应式：

function reactive(obj) {
  return new Proxy(obj, {
    get(target, key, receiver) {
      track(target, key) // 依赖收集
      return Reflect.get(target, key, receiver)
    },
    set(target, key, value, receiver) {
      const result = Reflect.set(target, key, value, receiver)
      trigger(target, key) // 触发更新
      return result
    }
  })
}

// 依赖收集与触发
const targetMap = new WeakMap()
function track(target, key) {
  if (!activeEffect) return
  let depsMap = targetMap.get(target)
  if (!depsMap) {
    targetMap.set(target, (depsMap = new Map()))
  }
  let dep = depsMap.get(key)
  if (!dep) {
    depsMap.set(key, (dep = new Set()))
  }
  dep.add(activeEffect)
}

function trigger(target, key) {
  const depsMap = targetMap.get(target)
  if (!depsMap) return
  const effects = depsMap.get(key)
  effects && effects.forEach(effect => effect())
}

Reflect的作用

保证正确的this绑定
提供更规范的返回值（如Reflect.set返回布尔值）
与Proxy方法一一对应

性能优化

惰性响应：只有访问到的属性才会被代理
缓存机制：同一对象重复reactive返回相同代理
嵌套处理：仅在访问深层次属性时才会继续代理

function reactive(obj) {
  // 已有代理直接返回
  if (proxyMap.has(obj)) {
    return proxyMap.get(obj)
  }
  
  const proxy = new Proxy(obj, {
    get(target, key, receiver) {
      if (key === '__isReactive') return true
      const res = Reflect.get(target, key, receiver)
      track(target, key)
      return isObject(res) ? reactive(res) : res // 惰性代理
    }
    // ...其他trap
  })
  
  proxyMap.set(obj, proxy)
  return proxy
}

手写实现对比

Vue2风格实现

class Dep {
  constructor() {
    this.subs = new Set()
  }
  depend() {
    if (Dep.target) this.subs.add(Dep.target)
  }
  notify() {
    this.subs.forEach(sub => sub())
  }
}

function defineReactive(obj, key) {
  const dep = new Dep()
  let value = obj[key]
  
  Object.defineProperty(obj, key, {
    get() {
      dep.depend()
      return value
    },
    set(newVal) {
      if (newVal === value) return
      value = newVal
      dep.notify()
    }
  })
}

Vue3风格实现

const effectStack = []

function effect(fn) {
  const e = createReactiveEffect(fn)
  e()
  return e
}

function createReactiveEffect(fn) {
  const effect = function() {
    try {
      effectStack.push(effect)
      return fn()
    } finally {
      effectStack.pop()
    }
  }
  return effect
}

const proxyMap = new WeakMap()
function reactive(target) {
  const existingProxy = proxyMap.get(target)
  if (existingProxy) return existingProxy
  
  const proxy = new Proxy(target, {
    get(target, key, receiver) {
      track(target, key)
      const res = Reflect.get(target, key, receiver)
      return typeof res === 'object' ? reactive(res) : res
    },
    set(target, key, value, receiver) {
      const oldValue = target[key]
      const result = Reflect.set(target, key, value, receiver)
      if (oldValue !== value) {
        trigger(target, key)
      }
      return result
    }
  })
  
  proxyMap.set(target, proxy)
  return proxy
}

升级变化总结

特性	Vue2	Vue3
核心API	Object.defineProperty	Proxy
数组处理	方法重写	原生支持
新增属性	需要Vue.set	直接支持
数据类型支持	有限	全面
性能	初始化递归消耗大	按需代理
代码量	约1,000行核心代码	约600行核心代码

最佳实践建议

Vue2项目：
- 复杂对象使用Vue.set
- 大数组避免索引操作
- 考虑冻结不需要响应式的数据
Vue3项目：
- 优先使用reactive和ref
- 只读数据使用readonly
- 利用markRaw跳过代理

性能优化：

// 避免不必要的响应式
const staticData = markRaw({
 largeList: [...], // 不会被代理
 config: {...}
})

组合式开发：

export function useCounter() {
 const count = ref(0)
 const double = computed(() => count.value * 2)


 function increment() {
   count.value++
 }


 return { count, double, increment }
}

响应式系统的演进体现了前端技术的快速发展，理解其原理有助于我们编写更高效的Vue应用。 “`