vue 3 中 computed 默认具备缓存特性，前提是 getter 仅访问响应式数据（如 ref.value、reactive 属性等），避免副作用、非响应式变量及深层响应丢失。
在 Vue 3 中，编写具有缓存特性的计算属性，核心是使用 computed 函数，并确保它作用于响应式数据（如 ref、reactive 或其嵌套属性）。缓存不是手动开启的开关，而是 computed 的默认行为——只要写法合规，缓存自动生效。
必须基于响应式源数据
计算属性的缓存依赖 Vue 的依赖追踪系统。只有当内部访问的是真正的响应式值时，Vue 才能建立依赖关系并实现“依赖不变就不重算”。
- ✅ 正确：读取
ref的.value、reactive对象的属性、toRef创建的引用 - ❌ 错误：传入普通 JS 变量、解构后的非响应式副本（如
const { count } = reactive({ count: 0 })）、或从 props 直接解构未用toRef包装的值 - 示例：
<script setup><br> import { ref, computed } from '<a style="color:#f60; text-decoration:underline;" title= "vue"href="https://m.php.cn/zt/15721.html" target="_blank">vue'<br> const list = ref([{ done: true }, { done: false }])<br> // ✅ 缓存有效：list 是 ref，.value 是响应式数组<br> const completedCount = computed(() => list.value.filter(i => i.done).length)<br> </script>
避免在 getter 中产生副作用或外部依赖
缓存机制假设计算逻辑是纯函数：输出只由响应式输入决定。一旦引入非响应式变量、定时器、全局状态、或异步等待，缓存就可能失效或行为异常。
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章