computed、watch、methods 怎么选
先理解原理和示例,再练习完整口述与追问。
回答要点
computed 表达派生值并按响应式依赖缓存;watch 处理变化引发的副作用;methods 用于显式调用。深度监听有遍历成本,嵌套对象原地修改时新旧引用可能相同;computed 通常应保持无副作用。
原理拆解
computed 是由响应式输入派生出的值,通常惰性求值并缓存,依赖变化后失效;methods 是每次调用执行的普通方法;watch 在指定值变化时执行副作用,适合请求、存储和与外部系统同步。选择依据是“我要得到一个值,还是执行一件事”,不是某种写法更高级。computed 的 getter 应尽量纯,避免修改依赖造成循环。
示例与推演
computed: {
total() { return this.rows.reduce((n, row) => n + row.price, 0) }
},
watch: {
keyword(value) { this.loadSuggestions(value) }
}
模板多处读取 total 可以复用缓存;keyword 变化触发请求则是副作用。watch 还需根据业务处理防抖、取消与旧响应,不能只写一个 async 回调就认为完整。
易错点
Date.now 不是响应式依赖,放 computed 中不会自行每秒更新。deep watch 的嵌套修改中,新旧对象经常是同一引用;要比较历史快照,需要主动保存业务所需副本。
参考回答可直接练习口述
computed 表达派生数据并按依赖缓存,例如合计或过滤结果;watch 适合变化引起的副作用,例如条件改变后请求;methods 是显式操作和可传参计算。computed getter 应尽量无副作用。deep watch 会遍历深层属性,成本随数据规模增加;原地修改对象时新旧值可能仍是同一引用,不能靠它自动拿到完整修改前快照。