在我的前端学习生涯中，见证了从jQuery的DOM操作时代，到Angular的脏检查机制，再到Vue2的Object.defineProperty，最后到Vue3的Proxy革命。每一次技术演进都让我深深震撼，而Vue3的响应式系统设计更是让我看到了前端框架的未来。今天，我想用最通俗易懂的方式，带你一层层剥开Vue3响应式系统的神秘面纱。
开篇思考：响应式到底解决了什么问题？
从一个简单例子说起
想象你在开发一个购物车功能，当用户修改商品数量时，总价需要自动更新。在原生JavaScript中，你可能会这样写：
let price = 100
let quantity = 2
let total = price * quantity // 200
quantity = 3
// 问题：total 依然是 200，并没有自动更新！
这就是数据变化与视图更新不同步的问题。而响应式系统要解决的核心问题就是：
当数据发生变化时，如何自动执行相关的副作用函数？
Vue2时代的解决方案与痛点
Vue2使用Object.defineProperty来拦截对象属性的读写操作：
function defineReactive(obj, key, val) {
Object.defineProperty(obj, key, {
get() {
console.log(`读取了 ${key} 属性`)
return val
},
set(newVal) {
console.log(`设置了 ${key} 属性为 ${newVal}`)
val = newVal
// 触发更新
update()
}
})
}
看起来不错，但实际项目中我遇到了这些痛点：
痛点1：无法检测数组索引变化
const arr = [1, 2, 3]
arr[0] = 999 // 无法被检测到！
痛点2：无法检测对象属性的添加删除
const obj = { name: 'Vue2' }
obj.age = 18 // 无法被检测到！
痛点3：嵌套对象需要递归处理，性能开销大
const deepObj = {
level1: {
level2: {
level3: {
value: 'deep value'
}
}
}
}
// 需要递归遍历所有属性，一次性创建所有getter/setter
这些问题在我之前的项目中造成了不少bug和性能问题，直到Vue3的出现…
一、Vue3的Proxy革命：从根本上重新设计响应式
Proxy vs Object.defineProperty：技术选型的智慧
当Vue3团队决定使用Proxy时，很多人质疑："为什么要抛弃已经成熟的Object.defineProperty？"让我们通过几个关键对比来理解这个决策的智慧。
对比1：拦截能力的差异
Object.defineProperty的局限
const obj = { name: 'Vue2' }
// 只能拦截已存在的属性
Object.defineProperty(obj, 'name', {
set(val) {
console.log('设置name:', val)
}
})
obj.name = 'New Name' // ✅ 能拦截
obj.age = 18 // ❌ 无法拦截新增属性
delete obj.name // ❌ 无法拦截删除操作
Proxy的强大之处
const obj = new Proxy({ name: 'Vue3' }, {
set(target, key, value) {
console.log(`设置${key}:`, value)
target[key] = value
return true
},
deleteProperty(target, key) {
console.log(`删除${key}`)
delete target[key]
return true
}
})
obj.name = 'New Name' // ✅ 能拦截
obj.age = 18 // ✅ 能拦截新增属性
delete obj.name // ✅ 能拦截删除操作
核心差异：Object.defineProperty是属性级别的拦截，而Proxy是对象级别的拦截。
对比2：数组处理的优雅程度
Vue2的数组处理有多复杂？
在Vue2中，为了监听数组变化，源码中有这样一段"黑魔法"：
// Vue2需要重写数组的7个方法
const arrayProto = Array.prototype
const arrayMethods = Object.create(arrayProto)
;['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse']
.forEach(function (method) {
const original = arrayProto[method]
arrayMethods[method] = function mutator(…args) {
const result = original.apply(this, args)
const ob = this.__ob__ // 获取Observer实例
let inserted
switch (method) {
case 'push':
case 'unshift':
inserted = args
break
case 'splice':
inserted = args.slice(2)
break
}
if (inserted) ob.observeArray(inserted) // 观察新插入的元素
ob.dep.notify() // 手动通知更新
return result
}
})
这段代码做了什么？简单说就是：重写数组原型方法，手动触发更新。
Vue3的数组处理有多简单？
const arr = reactive([1, 2, 3])
// 以下所有操作都能被自动拦截，无需特殊处理
arr[0] = 999 // ✅ 自动拦截
arr.push(4) // ✅ 自动拦截
arr.length = 0 // ✅ 自动拦截
delete arr[1] // ✅ 自动拦截
核心优势：Proxy天然支持数组的所有操作，无需任何hack手段。
深入理解：Proxy的13种拦截操作
很多人只知道Proxy能拦截get/set，但实际上Proxy提供了13种拦截操作。在Vue3的响应式系统中，主要用到了这几种：
const handler = {
// 拦截属性读取
get(target, key, receiver) {
console.log(`读取属性: ${key}`)
return Reflect.get(target, key, receiver)
},
// 拦截属性设置
set(target, key, value, receiver) {
console.log(`设置属性: ${key} = ${value}`)
return Reflect.set(target, key, value, receiver)
},
// 拦截 in 操作符
has(target, key) {
console.log(`检查属性: ${key}`)
return Reflect.has(target, key)
},
// 拦截delete操作
deleteProperty(target, key) {
console.log(`删除属性: ${key}`)
return Reflect.deleteProperty(target, key)
},
// 拦截Object.keys()
ownKeys(target) {
console.log('遍历所有属性')
return Reflect.ownKeys(target)
}
}
为什么要配合Reflect使用？
你可能注意到，每个拦截器里都用了Reflect。这不是多此一举，而是有深层次的考虑：
// 不使用Reflect的写法
const proxy = new Proxy(obj, {
set(target, key, value) {
target[key] = value // 直接赋值
return true
}
})
// 使用Reflect的写法
const proxy = new Proxy(obj, {
set(target, key, value, receiver) {
return Reflect.set(target, key, value, receiver) // 使用Reflect
}
})
为什么要这样做？
让我用一个例子说明receiver的重要性：
const parent = {
name: 'parent',
get value() {
return this.name
}
}
const child = {
name: 'child'
}
// 设置原型链
Object.setPrototypeOf(child, parent)
// 不使用receiver
const proxy1 = new Proxy(child, {
get(target, key) {
return target[key] // this指向target(child)
}
})
// 使用receiver
const proxy2 = new Proxy(child, {
get(target, key, receiver) {
return Reflect.get(target, key, receiver) // this指向receiver(proxy)
}
})
console.log(proxy1.value) // 'child' – this指向原始对象
console.log(proxy2.value) // 'child' – this指向代理对象
Vue3响应式系统的核心架构
现在我们来看Vue3是如何基于Proxy构建响应式系统的。整个系统可以分为三个核心部分：
1. reactive函数：创建响应式对象
// 简化版的reactive实现
function reactive(target) {
// 类型检查
if (!isObject(target)) {
return target
}
// 避免重复代理
if (target.__v_reactive) {
return target
}
const proxy = new Proxy(target, {
get(target, key, receiver) {
// 标记为响应式对象
if (key === '__v_reactive') {
return true
}
// 依赖收集
track(target, key)
const result = Reflect.get(target, key, receiver)
// 懒代理：只有访问到才进行代理
if (isObject(result)) {
return reactive(result)
}
return result
},
set(target, key, value, receiver) {
const oldValue = target[key]
const result = Reflect.set(target, key, value, receiver)
// 只有值真正改变时才触发更新
if (oldValue !== value) {
trigger(target, key, value, oldValue)
}
return result
}
})
return proxy
}
懒代理的优势
注意上面的懒代理策略，这是Vue3性能优化的一个关键点：
const state = reactive({
user: {
profile: {
address: {
city: 'Beijing'
}
}
}
})
// 只有访问到user.profile时，profile才会被代理
console.log(state.user.profile.address.city)
这比Vue2的"一次性递归代理所有属性"要高效得多。
二、响应式系统的核心：依赖收集与派发更新
什么是依赖收集？用一个生活例子来理解
想象你是一个图书管理员，有很多读者对不同的书籍感兴趣。当某本书有更新时，你需要通知所有关注这本书的读者。
在这个例子中：
- 书籍 = 响应式数据
- 读者 = 副作用函数（effect）
- 读者登记表 = 依赖收集系统
- 通知读者 = 派发更新
依赖收集的数据结构设计
Vue3的依赖收集系统采用了一个巧妙的三层Map结构：
WeakMap {
target1: Map {
key1: Set [effect1, effect2],
key2: Set [effect3]
},
target2: Map {
key1: Set [effect1, effect4]
}
}
为什么要这样设计？让我们逐层分析：
第一层：WeakMap
const targetMap = new WeakMap()
为什么用WeakMap而不是Map？
// 使用Map的问题
const targetMap = new Map()
let obj = { name: 'Vue3' }
targetMap.set(obj, new Map())
obj = null // obj被回收，但targetMap仍然持有引用，造成内存泄漏
// 使用WeakMap的优势
const targetMap = new WeakMap()
let obj = { name: 'Vue3' }
targetMap.set(obj, new Map())
obj = null // obj被回收时，WeakMap中的条目也会自动被回收
关键优势：WeakMap的键是弱引用，当对象被垃圾回收时，对应的依赖关系也会自动清理。
第二层：Map（属性映射）
let depsMap = targetMap.get(target)
if (!depsMap) {
targetMap.set(target, (depsMap = new Map()))
}
每个响应式对象都有一个Map，存储这个对象的所有属性依赖关系。
第三层：Set（效果函数集合）
let dep = depsMap.get(key)
if (!dep) {
depsMap.set(key, (dep = new Set()))
}
每个属性对应一个Set，存储所有依赖于这个属性的副作用函数。
为什么用Set而不是Array？
// Array的问题：可能有重复的effect
const deps = []
deps.push(effect1)
deps.push(effect1) // 重复添加
console.log(deps.length) // 2，会导致effect执行两次
// Set的优势：自动去重
const deps = new Set()
deps.add(effect1)
deps.add(effect1) // 重复添加无效
console.log(deps.size) // 1，effect只执行一次
依赖收集的核心流程
现在让我们看看依赖收集是如何工作的：
1. effect函数的执行机制
let activeEffect = null // 当前正在执行的副作用函数
const effectStack = [] // 副作用函数调用栈
function effect(fn) {
const effectFn = () => {
try {
// 清理旧的依赖
cleanup(effectFn)
// 设置当前活跃的effect
activeEffect = effectFn
effectStack.push(effectFn)
// 执行副作用函数，期间会触发依赖收集
return fn()
} finally {
// 恢复上一个effect
effectStack.pop()
activeEffect = effectStack[effectStack.length – 1]
}
}
effectFn.deps = [] // 存储这个effect依赖的所有dep
effectFn() // 立即执行一次
return effectFn
}
为什么需要effectStack？
考虑嵌套effect的情况：
effect(() => {
console.log('外层effect')
effect(() => {
console.log('内层effect')
state.inner // 这应该被内层effect收集
})
state.outer // 这应该被外层effect收集
})
没有栈的话，state.outer会被错误地收集到内层effect中。
2. track函数的实现细节
function track(target, key) {
// 没有活跃的effect，直接返回
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()))
}
// 建立双向连接
if (!dep.has(activeEffect)) {
dep.add(activeEffect) // dep收集effect
activeEffect.deps.push(dep) // effect收集dep
}
}
为什么要双向连接？
这是为了方便清理。当effect重新执行时，需要从所有相关的dep中移除自己：
function cleanup(effectFn) {
for (let i = 0; i < effectFn.deps.length; i++) {
const dep = effectFn.deps[i]
dep.delete(effectFn) // 从dep中移除effect
}
effectFn.deps.length = 0 // 清空effect的deps数组
}
派发更新的智能优化
当数据发生变化时，如何高效地通知所有相关的副作用函数？
1. 基础的trigger实现
function trigger(target, key, value, oldValue) {
const depsMap = targetMap.get(target)
if (!depsMap) return
// 收集需要执行的effects
const effects = new Set()
// 添加直接依赖的effects
const deps = depsMap.get(key)
if (deps) {
deps.forEach(effect => effects.add(effect))
}
// 执行所有effects
effects.forEach(effect => effect())
}
2. 数组的特殊处理
数组操作比对象更复杂，因为一个操作可能影响多个索引：
function trigger(target, key, value, oldValue) {
const depsMap = targetMap.get(target)
if (!depsMap) return
const effects = new Set()
const add = (effectsToAdd) => {
if (effectsToAdd) {
effectsToAdd.forEach(effect => effects.add(effect))
}
}
// 普通属性变化
add(depsMap.get(key))
// 数组长度变化的特殊处理
if (isArray(target)) {
if (key === 'length') {
// 长度变短时，大于新长度的索引都要触发更新
depsMap.forEach((dep, key) => {
if (key === 'length' || key >= value) {
add(dep)
}
})
} else if (isIntegerKey(key)) {
// 数组索引变化，可能影响length
add(depsMap.get('length'))
}
}
effects.forEach(effect => effect())
}
为什么要这样处理数组？
考虑这个场景：
const arr = reactive([1, 2, 3])
effect(() => {
console.log('数组长度:', arr.length) // 依赖length
})
effect(() => {
console.log('第四个元素:', arr[3]) // 依赖索引3
})
arr.length = 2 // 这个操作应该触发哪些effect？
当length变为2时，索引3的元素被删除了，所以依赖索引3的effect也应该被触发。
性能优化：批量更新
在实际应用中，一次操作可能触发多个数据变化：
state.name = 'Vue3'
state.version = '3.0'
state.author = 'Evan You'
如果每次赋值都立即执行effects，会造成不必要的重复计算。Vue3使用了调度器（scheduler） 来解决这个问题：
const queue = []
let isFlushing = false
function queueJob(job) {
if (!queue.includes(job)) {
queue.push(job)
}
if (!isFlushing) {
isFlushing = true
Promise.resolve().then(() => {
isFlushing = false
const jobs = queue.splice(0)
jobs.forEach(job => job())
})
}
}
// 在trigger中使用调度器
function trigger(target, key, value, oldValue) {
// … 收集effects的逻辑
effects.forEach(effect => {
if (effect.scheduler) {
effect.scheduler(effect) // 使用调度器
} else {
effect() // 直接执行
}
})
}
这样，多个同步的数据变化会被合并到下一个微任务中批量执行，大大提升了性能。
三、实战应用：从理论到企业级实践
理解了Vue3响应式原理后，让我们看看如何在实际项目中应用这些知识。
场景1：构建一个智能的购物车系统
假设我们要开发一个电商网站的购物车功能，需要实现以下需求：
- 商品数量变化时，自动计算总价
- 优惠券使用时，自动重新计算价格
- 库存不足时，自动禁用结算按钮
- 价格变化时，自动更新推荐商品
传统方式的问题
在没有响应式系统的情况下，我们可能会这样写：
class ShoppingCart {
constructor() {
this.items = []
this.coupon = null
this.total = 0
}
addItem(item) {
this.items.push(item)
this.updateTotal() // 手动调用
this.checkStock() // 手动调用
this.updateRecommends() // 手动调用
}
updateQuantity(itemId, quantity) {
const item = this.items.find(i => i.id === itemId)
item.quantity = quantity
this.updateTotal() // 手动调用
this.checkStock() // 手动调用
}
applyCoupon(coupon) {
this.coupon = coupon
this.updateTotal() // 手动调用
}
// 需要手动调用的方法
updateTotal() { /* 计算总价 */ }
checkStock() { /* 检查库存 */ }
updateRecommends() { /* 更新推荐 */ }
}
问题显而易见：
- 需要手动调用更新方法
- 容易遗漏某些更新逻辑
- 代码冗余，维护困难
使用Vue3响应式系统的优雅解决方案
import { reactive, computed, watch, effect } from 'vue'
export function useShoppingCart() {
// 响应式状态
const state = reactive({
items: [],
coupon: null,
stockInfo: {}
})
// 自动计算总价
const totalPrice = computed(() => {
const itemsTotal = state.items.reduce((sum, item) => {
return sum + (item.price * item.quantity)
}, 0)
// 应用优惠券
if (state.coupon) {
return itemsTotal * (1 – state.coupon.discount)
}
return itemsTotal
})
// 自动检查库存状态
const canCheckout = computed(() => {
return state.items.every(item => {
const stock = state.stockInfo[item.id]
return stock && stock.available >= item.quantity
})
})
// 自动计算商品统计
const itemCount = computed(() => {
return state.items.reduce((sum, item) => sum + item.quantity, 0)
})
// 监听总价变化，自动更新推荐商品
watch(totalPrice, async (newTotal) => {
if (newTotal > 0) {
await updateRecommendations(newTotal)
}
})
// 监听商品变化，自动更新库存信息
watch(() => state.items.map(item => item.id), async (itemIds) => {
const stockData = await fetchStockInfo(itemIds)
Object.assign(state.stockInfo, stockData)
}, { immediate: true })
// 添加商品
const addItem = (product, quantity = 1) => {
const existingItem = state.items.find(item => item.id === product.id)
if (existingItem) {
existingItem.quantity += quantity
} else {
state.items.push({
id: product.id,
name: product.name,
price: product.price,
quantity
})
}
}
// 更新数量
const updateQuantity = (itemId, quantity) => {
const item = state.items.find(item => item.id === itemId)
if (item) {
if (quantity <= 0) {
removeItem(itemId)
} else {
item.quantity = quantity
}
}
}
// 移除商品
const removeItem = (itemId) => {
const index = state.items.findIndex(item => item.id === itemId)
if (index > –1) {
state.items.splice(index, 1)
}
}
// 应用优惠券
const applyCoupon = (coupon) => {
state.coupon = coupon
}
return {
// 状态
state: readonly(state),
// 计算属性
totalPrice,
canCheckout,
itemCount,
// 方法
addItem,
updateQuantity,
removeItem,
applyCoupon
}
}
优势显而易见：
- ✅ 数据变化时，相关计算自动更新
- ✅ 无需手动调用更新方法
- ✅ 代码逻辑清晰，易于维护
- ✅ 性能优异，只更新必要的部分
场景2：实现一个高性能的数据表格
在企业级应用中，我们经常需要处理大量数据的表格展示。让我们看看如何利用Vue3的响应式系统来优化性能。
问题分析
传统的表格组件面临这些性能问题：
- 数据量大时，所有行都被渲染，造成性能问题
- 排序、筛选时，整个表格重新渲染
- 数据更新时，不相关的组件也被更新
智能响应式表格解决方案
import { reactive, computed, shallowRef, triggerRef } from 'vue'
export function useDataTable(initialData = []) {
// 使用shallowRef存储大量数据，避免深度响应式的性能开销
const rawData = shallowRef([…initialData])
// 响应式的表格配置
const tableState = reactive({
currentPage: 1,
pageSize: 20,
sortColumn: null,
sortOrder: 'asc',
filters: {},
searchKeyword: ''
})
// 智能的数据过滤
const filteredData = computed(() => {
let result = rawData.value
// 搜索过滤
if (tableState.searchKeyword) {
const keyword = tableState.searchKeyword.toLowerCase()
result = result.filter(item =>
Object.values(item).some(value =>
String(value).toLowerCase().includes(keyword)
)
)
}
// 列过滤
Object.keys(tableState.filters).forEach(column => {
const filterValue = tableState.filters[column]
if (filterValue !== null && filterValue !== '') {
result = result.filter(item => item[column] === filterValue)
}
})
return result
})
// 智能排序
const sortedData = computed(() => {
if (!tableState.sortColumn) {
return filteredData.value
}
return […filteredData.value].sort((a, b) => {
const aVal = a[tableState.sortColumn]
const bVal = b[tableState.sortColumn]
if (aVal === bVal) return 0
const result = aVal > bVal ? 1 : –1
return tableState.sortOrder === 'desc' ? –result : result
})
})
// 分页数据
const paginatedData = computed(() => {
const start = (tableState.currentPage – 1) * tableState.pageSize
const end = start + tableState.pageSize
return sortedData.value.slice(start, end)
})
// 分页信息
const pagination = computed(() => ({
current: tableState.currentPage,
pageSize: tableState.pageSize,
total: sortedData.value.length,
totalPages: Math.ceil(sortedData.value.length / tableState.pageSize)
}))
// 更新数据（高性能）
const updateData = (newData) => {
rawData.value = […newData]
triggerRef(rawData) // 手动触发更新
}
// 添加单条数据
const addRow = (rowData) => {
rawData.value.push(rowData)
triggerRef(rawData)
}
// 更新单条数据
const updateRow = (index, newData) => {
const targetIndex = rawData.value.findIndex(item => item.id === index)
if (targetIndex > –1) {
Object.assign(rawData.value[targetIndex], newData)
triggerRef(rawData)
}
}
// 删除数据
const removeRow = (id) => {
const index = rawData.value.findIndex(item => item.id === id)
if (index > –1) {
rawData.value.splice(index, 1)
triggerRef(rawData)
}
}
// 排序
const sort = (column) => {
if (tableState.sortColumn === column) {
tableState.sortOrder = tableState.sortOrder === 'asc' ? 'desc' : 'asc'
} else {
tableState.sortColumn = column
tableState.sortOrder = 'asc'
}
}
// 设置过滤
const setFilter = (column, value) => {
tableState.filters[column] = value
tableState.currentPage = 1 // 重置到第一页
}
// 搜索
const search = (keyword) => {
tableState.searchKeyword = keyword
tableState.currentPage = 1
}
// 分页
const changePage = (page) => {
if (page >= 1 && page <= pagination.value.totalPages) {
tableState.currentPage = page
}
}
return {
// 数据
data: paginatedData,
pagination,
// 状态
tableState: readonly(tableState),
// 方法
updateData,
addRow,
updateRow,
removeRow,
sort,
setFilter,
search,
changePage
}
}
在组件中使用
<template>
<div class="data-table">
<!— 搜索栏 —>
<div class="table-header">
<input
v–model="searchKeyword"
@input="search(searchKeyword)"
placeholder="搜索…"
/>
</div>
<!— 表格 —>
<table>
<thead>
<tr>
<th @click="sort('name')" class="sortable">
姓名
<span v–if="tableState.sortColumn === 'name'">
{{ tableState.sortOrder === 'asc' ? '↑' : '↓' }}
</span>
</th>
<th @click="sort('age')" class="sortable">年龄</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v–for="item in data" :key="item.id">
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
<td>
<button @click="removeRow(item.id)">删除</button>
</td>
</tr>
</tbody>
</table>
<!— 分页 —>
<div class="pagination">
<button
@click="changePage(pagination.current – 1)"
:disabled="pagination.current === 1"
>
上一页
</button>
<span>{{ pagination.current }} / {{ pagination.totalPages }}</span>
<button
@click="changePage(pagination.current + 1)"
:disabled="pagination.current === pagination.totalPages"
>
下一页
</button>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
import { useDataTable } from '@/composables/useDataTable'
const props = defineProps({
initialData: Array
})
const searchKeyword = ref('')
const {
data,
pagination,
tableState,
sort,
search,
changePage,
removeRow
} = useDataTable(props.initialData)
</script>
性能优化的关键点
通过这两个实战案例，我们可以总结出几个性能优化的关键点：
1. 合理使用 shallowRef
// ❌ 对大数据使用 reactive，会创建深度响应式
const data = reactive([…largeArray])
// ✅ 对大数据使用 shallowRef，只监听引用变化
const data = shallowRef([…largeArray])
2. 计算属性的缓存机制
// Vue3会自动缓存计算属性的结果
const expensiveValue = computed(() => {
console.log('只有依赖变化时才会执行')
return heavyCalculation(data.value)
})
3. 监听器的精确控制
// ❌ 监听整个对象，任何属性变化都会触发
watch(state, callback, { deep: true })
// ✅ 只监听需要的属性
watch(() => state.specificProperty, callback)
// ✅ 监听多个特定属性
watch([() => state.prop1, () => state.prop2], callback)
这些实战案例展示了Vue3响应式系统在实际项目中的强大威力。通过深入理解原理，我们能够写出既优雅又高性能的代码。
四、性能优化的实战经验
4.1 响应式数据的性能陷阱
在大型项目中，我发现以下几个容易被忽视的性能问题：
// ❌ 错误示例：深层嵌套对象的性能问题
const state = reactive({
data: {
// 深层嵌套的大型数据结构
level1: {
level2: {
level3: {
// … 大量数据
list: new Array(10000).fill(0).map((_, i) => ({ id: i, value: Math.random() }))
}
}
}
}
})
// ✅ 正确示例：使用 shallowReactive 优化
import { shallowReactive, triggerRef } from 'vue'
const state = shallowReactive({
data: {
// 只对第一层进行响应式处理
list: []
}
})
// 当需要更新深层数据时，手动触发更新
function updateDeepData(newData) {
state.data.list = newData
triggerRef(state.data)
}
4.2 计算属性的缓存策略
// 高性能的计算属性设计
export function useOptimizedComputed() {
const expensiveData = ref([])
// 使用 shallowRef 避免深度响应式
const processedData = shallowRef([])
// 防抖处理，避免频繁计算
const debouncedProcess = debounce(() => {
processedData.value = expensiveData.value
.filter(item => item.active)
.map(item => ({
…item,
computed: heavyComputation(item)
}))
}, 100)
watch(expensiveData, debouncedProcess, { deep: true })
return {
expensiveData,
processedData: readonly(processedData)
}
}
五、总结与展望
经过多年的项目实践，我深刻体会到Vue3响应式系统的强大之处。它不仅解决了Vue2的历史问题，更为我们提供了构建高性能、可维护应用的技术基础。
核心要点回顾：
如果这篇文章对你有帮助，欢迎点赞收藏，也欢迎在评论区分享你在Vue3开发中遇到的问题和心得。让我们一起在前端技术的道路上共同成长！
