响应式原理|性能优化 vue中的computed，vue中的computed属性用于实现数据的缓存与高效依赖追踪

📌

1. 响应式原理 🎯

   • Vue通过Object.defineProperty（Vue 2）或Proxy（Vue 3）实现数据劫持
   • 依赖收集（Dep/Watcher机制）自动追踪数据变化
   • 触发更新时通知关联视图（Virtual DOM Diff）

2. 性能优化 ⚡

   

   • 减少不必要的重新渲染（v-once、shouldComponentUpdate）
   • 合理使用v-if vs v-show
   • 长列表优化（虚拟滚动、Object.freeze冻结非响应数据）

3. Vue中的computed 💡

   • 缓存机制：基于依赖项的值缓存结果，依赖不变时直接返回缓存
   • 高效依赖追踪：自动关联响应式数据，变化时才重新计算
   • 惰性求值：仅在使用时触发计算（区别于methods）

4. 对比watch 🔄

   

   • computed适合派生状态（如过滤列表）
   • watch适合副作用操作（如异步请求）

5. 实战技巧 🛠️

   • 避免在computed中修改依赖数据（应纯函数）
   • 复杂计算拆分多个computed提升可读性

🌰 示例：

computed: {
  totalPrice() { 
    return this.items.reduce((sum, item) => sum + item.price, 0); 
  } // 依赖`items`变化才重新计算
}

📅 参考：Vue官方文档（2025-08）及核心团队技术演讲