郑州网站制作推广,3d动画制作自学教程,济源网站建设的公司,照明公司网站制作computed
在 Vue 3 的 Composition API 中#xff0c;computed 用于定义响应式计算属性
它的核心特性是自动追踪依赖、缓存计算结果#xff08;依赖未变化时不会重新计算#xff09; 基本用法
1. 定义只读计算属性
import { ref, computed } from vue;const count ref(…computed
在 Vue 3 的 Composition API 中computed 用于定义响应式计算属性
它的核心特性是自动追踪依赖、缓存计算结果依赖未变化时不会重新计算 基本用法
1. 定义只读计算属性
import { ref, computed } from vue;const count ref(0);
const doubleCount computed(() count.value * 2); // 返回一个 Ref 对象console.log(doubleCount.value); // 0 → 初始值
count.value 2;
console.log(doubleCount.value); // 4 → 自动更新2. 在模板中使用
templatediv{{ doubleCount }}/div !-- 自动解包无需 .value --
/templatecomputed 的响应式依赖
自动追踪依赖计算属性会追踪其内部使用的所有响应式变量如 ref 或 reactive。缓存机制只有依赖变化时才会重新计算否则直接返回缓存值。
const a ref(1);
const b ref(2);
const sum computed(() a.value b.value);a.value 3; // sum 自动重新计算 → 3 2 5
b.value 4; // sum 再次计算 → 3 4 7可写计算属性Setter
computed 可以接受一个包含 get 和 set 的对象实现双向绑定
const firstName ref(John);
const lastName ref(Doe);// 可写计算属性
const fullName computed({get: () ${firstName.value} ${lastName.value},set: (newValue) {const [first, last] newValue.split( );firstName.value first;lastName.value last;},
});// 修改计算属性
fullName.value Jane Smith; // 自动更新 firstName 和 lastName
console.log(firstName.value); // Jane
console.log(lastName.value); // Smith与 reactive 结合使用
将计算属性绑定到 reactive 对象中
import { reactive, computed } from vue;const state reactive({price: 100,quantity: 2,
});// 计算总价
state.total computed(() state.price * state.quantity);console.log(state.total.value); // 200性能优化避免重复计算
计算属性会缓存结果以下场景体现优势
const list ref([1, 2, 3, 4, 5]);// 计算过滤后的列表只有 list 变化时重新计算
const evenNumbers computed(() list.value.filter(num num % 2 0));list.value.push(6); // evenNumbers 自动更新为 [2,4,6]注意事项 避免副作用计算属性应是纯函数不要在其中修改外部状态。 // ❌ 错误示例副作用
const invalidComputed computed(() {count.value; // 禁止修改依赖return count.value;
});依赖非响应式数据如果依赖非响应式变量计算属性不会更新 let staticValue 10;
const badComputed computed(() staticValue); // 不会更新性能敏感场景复杂计算建议使用 computed 缓存结果而非在模板中直接调用方法。 与 Vue 2 的对比
特性Vue 2 的 computedVue 3 的 computed定义位置computed 选项在 setup 中通过函数定义返回值类型直接通过属性访问Ref 对象需 .value 访问响应式依赖追踪自动自动可写性不支持 Setter支持 Setter 完整示例
templatedivinput v-modelprice typenumber placeholder价格input v-modelquantity typenumber placeholder数量p总价: {{ total }}/pbutton clickresetTotal重置总价/button/div
/templatescript setup
import { ref, computed } from vue;const price ref(0);
const quantity ref(0);// 计算总价
const total computed({get: () price.value * quantity.value,set: (value) {price.value value / 2;quantity.value 2;},
});// 通过 Setter 修改计算属性
const resetTotal () {total.value 0; // 触发 Setter → price0, quantity0
};
/script
