Vue的computed用法解析

一、computed 的核心设计哲学(道)

1. 声明式推导替代命令式更新

  • 声明式编程让开发者只需描述"想要什么",Vue 自动维护从依赖追踪到视图更新的全链路。

2. 纯计算与状态隔离

  • computed 强调无副作用的纯计算,保持状态修改与状态计算的清晰分离。

3. 高效缓存与最小化更新

  • 只有当依赖变化时,computed 才会重新计算结果,极大地提升了性能。

二、从设计哲学推导的常用"术"(用法)

1. 单一状态派生

复制代码
const username = ref('zhangsan');
const upperUsername = computed(() => username.value.toUpperCase());

2. 复合状态派生

复制代码
const totalPrice = computed(() => {
  const sum = goods.reduce((acc, item) => acc + item.price * item.count, 0);
  return Math.max(sum - coupon.value, 0);
});

3. 映射全局状态

复制代码
const userInfo = computed(() => `${userStore.name}(${userStore.age}岁)`);

4. 双向推导

复制代码
const allChecked = computed({
  get() { return list.every(item => item.checked); },
  set(value) { list.forEach(item => item.checked = value); }
});

5. 过滤/排序派生数据

复制代码
const filteredGoods = computed(() => goodsList.value.filter(item => 
    item.name.includes(searchKeyword.value)
));

6. 状态合法性校验

复制代码
const isPhoneValid = computed(() => /^1[3-9]\d{9}$/.test(form.phone));
相关推荐
Csvn7 小时前
🕰️ 闭包 + setTimeout 的 5 个经典陷阱:为什么定时器看到的永远不是最新的值?
前端
lilian2337 小时前
Harmony os 技术实战|拼豆制图27:用单字符编码承载 50 张 70×70 图纸
前端·数据库·华为·harmonyos
CarIise8 小时前
CSS选择器与样式关联
前端·css·tensorflow
里欧跑得慢9 小时前
CSS 模块化架构的演进:BEM、CSS Modules 到 CSS-in-JS 的反思
前端·css·flutter·web·css-in-js
IT_陈寒9 小时前
Vue的computed属性把我坑惨了,原来我一直用错姿势
前端·人工智能·后端
小灰灰搞电子10 小时前
Rust+Slint 实现温度计源码分享
前端·rust·slint
计算机魔术师10 小时前
面壁智能 OpenBMB 推出 MathForm,面向 Lean 4 数学自动形式化的开源框架、数据集与模型
前端
NeilCarmack10 小时前
Deepseek-harness增加桌面版端序列:第 2 讲 · spawn Electron:当前进程如何“交棒“
前端·javascript·electron
上海魁鲸科技有限公司11 小时前
APS高级排产系统到底有什么用?一文讲清功能、选型与落地建议
前端·microsoft·excel
陈随易11 小时前
Bun v1.4 更新总结:把浏览器、图片、定时任务和工程工具都装进一个运行时
前端·后端·程序员