Vue.js 响应式原理详解

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

什么是响应式

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

核心实现

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

functionobserve(obj){Object.keys(obj).forEach(key=>{letvalue=obj[key]Object.defineProperty(obj,key,{get(){returnvalue},set(newVal){if(newVal!==value){value=newVal// 触发更新}}})})}

Vue 3 的 Proxy 方案

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

constproxy=newProxy(target,{get(target,key){track(target,key)},set(target,key,value){trigger(target,key)}})

总结

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