Vue 响应式原理

Vue 3 使用 Proxy 实现响应式系统，替代了 Vue 2 中的 Object.defineProperty。

核心概念

reactive()

reactive() 函数接收一个对象，返回一个 Proxy 代理：

import { reactive } from 'vue'

const state = reactive({ count: 0 })

ref()

ref() 用于包装基本类型值：

import { ref } from 'vue'

const count = ref(0)
count.value++ // 通过 .value 访问

依赖追踪

Vue 3 的响应式系统基于「副作用函数」和「依赖收集」：

1. 当读取响应式属性时，收集当前副作用
2. 当属性变化时，通知所有依赖的副作用重新执行

与 Vue 2 的区别

特性	Vue 2	Vue 3
实现方式	Object.defineProperty	Proxy
数组监听	需要特殊处理	原生支持
新增属性	不支持	原生支持
性能	递归遍历	懒代理