Vue.js 响应式原理详解

新时代牛马2026-08-14 10:36

Vue.js 是一款流行的前端渐进式框架，其核心特性之一就是响应式系统。本文深入讲解 Vue 响应式的实现原理。

什么是响应式

当数据发生变化时，视图会自动更新。Vue 通过数据劫持 + 依赖收集实现这一机制。

核心实现

Vue 2 使用 Object.defineProperty 劫持属性的 getter/setter。

javascript 复制代码

function observe(obj) {
  Object.keys(obj).forEach(key => {
    let value = obj[key]
    Object.defineProperty(obj, key, {
      get() { return value },
      set(newVal) {
        if (newVal !== value) {
          value = newVal
          // 触发更新
        }
      }
    })
  })
}

Vue 3 的 Proxy 方案

Vue 3 使用 ES6 的 Proxy 实现响应式，性能更高，支持新增属性。

javascript 复制代码

const proxy = new Proxy(target, {
  get(target, key) { track(target, key) },
  set(target, key, value) { trigger(target, key) }
})

总结

理解响应式原理有助于编写高质量 Vue 应用，也是面试的重点。