Vue 进阶：深入解析 computed 和 watch 的核心区别

一、Vue 核心概念解析

1.1 计算属性

计算属性是基于它们的响应式依赖进行缓存的。只有在相关响应式依赖发生改变时它才会重新求值。它是自动执行的，没有回调函数的概念。

1.2 侦听器

侦听器允许我们执行异步操作（例如 API 调用）并在数据变化时采取相应的行动。它提供回调函数，由开发者主动调用。

二、computed 与 watch 的核心区别

2.1 缓存机制与性能

computed 具有缓存机制。只要依赖的响应式数据没有发生改变，computed 属性会立即返回之前的缓存结果。这对于昂贵的计算非常有利。

watch 没有缓存。每次数据发生变化时，watch 的回调函数都会被执行。如果回调函数中有重操作，频繁触发可能导致性能下降。

2.2 数据流向与定义方式

computed 接收单个 getter 函数，返回一个派生值。它更像是数据的转换器。

watch 接收一个字符串方法名、一个表达式或一个选项对象。它通常用于监视单一数据点或深层变化。

2.3 适用范围

computed 适合监听一个数据的变化并计算出一个新的值。例如：过滤列表、格式化日期。

watch 适合在数据变化时执行异步操作或执行一组更复杂的操作。例如：监听 userAge 变化后请求用户详情。

三、决策流程图与选择指南

3.1 使用场景选择

我们可以通过以下流程图来决定何时使用 computed，何时使用 watch。

#publish-mermaid-1785344856180-0{font-family:inherit;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#publish-mermaid-1785344856180-0 .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#publish-mermaid-1785344856180-0 .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#publish-mermaid-1785344856180-0 .error-icon{fill:#552222;}#publish-mermaid-1785344856180-0 .error-text{fill:#552222;stroke:#552222;}#publish-mermaid-1785344856180-0 .edge-thickness-normal{stroke-width:1px;}#publish-mermaid-1785344856180-0 .edge-thickness-thick{stroke-width:3.5px;}#publish-mermaid-1785344856180-0 .edge-pattern-solid{stroke-dasharray:0;}#publish-mermaid-1785344856180-0 .edge-thickness-invisible{stroke-width:0;fill:none;}#publish-mermaid-1785344856180-0 .edge-pattern-dashed{stroke-dasharray:3;}#publish-mermaid-1785344856180-0 .edge-pattern-dotted{stroke-dasharray:2;}#publish-mermaid-1785344856180-0 .marker{fill:#333333;stroke:#333333;}#publish-mermaid-1785344856180-0 .marker.cross{stroke:#333333;}#publish-mermaid-1785344856180-0 svg{font-family:inherit;font-size:16px;}#publish-mermaid-1785344856180-0 p{margin:0;}#publish-mermaid-1785344856180-0 .label{font-family:inherit;color:#333;}#publish-mermaid-1785344856180-0 .cluster-label text{fill:#333;}#publish-mermaid-1785344856180-0 .cluster-label span{color:#333;}#publish-mermaid-1785344856180-0 .cluster-label span p{background-color:transparent;}#publish-mermaid-1785344856180-0 .label text,#publish-mermaid-1785344856180-0 span{fill:#333;color:#333;}#publish-mermaid-1785344856180-0 .node rect,#publish-mermaid-1785344856180-0 .node circle,#publish-mermaid-1785344856180-0 .node ellipse,#publish-mermaid-1785344856180-0 .node polygon,#publish-mermaid-1785344856180-0 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#publish-mermaid-1785344856180-0 .rough-node .label text,#publish-mermaid-1785344856180-0 .node .label text,#publish-mermaid-1785344856180-0 .image-shape .label,#publish-mermaid-1785344856180-0 .icon-shape .label{text-anchor:middle;}#publish-mermaid-1785344856180-0 .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#publish-mermaid-1785344856180-0 .rough-node .label,#publish-mermaid-1785344856180-0 .node .label,#publish-mermaid-1785344856180-0 .image-shape .label,#publish-mermaid-1785344856180-0 .icon-shape .label{text-align:center;}#publish-mermaid-1785344856180-0 .node.clickable{cursor:pointer;}#publish-mermaid-1785344856180-0 .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#publish-mermaid-1785344856180-0 .arrowheadPath{fill:#333333;}#publish-mermaid-1785344856180-0 .edgePath .path{stroke:#333333;stroke-width:1px;}#publish-mermaid-1785344856180-0 .flowchart-link{stroke:#333333;fill:none;}#publish-mermaid-1785344856180-0 .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#publish-mermaid-1785344856180-0 .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#publish-mermaid-1785344856180-0 .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#publish-mermaid-1785344856180-0 .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#publish-mermaid-1785344856180-0 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#publish-mermaid-1785344856180-0 .cluster text{fill:#333;}#publish-mermaid-1785344856180-0 .cluster span{color:#333;}#publish-mermaid-1785344856180-0 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:inherit;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#publish-mermaid-1785344856180-0 .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#publish-mermaid-1785344856180-0 rect.text{fill:none;stroke-width:0;}#publish-mermaid-1785344856180-0 .icon-shape,#publish-mermaid-1785344856180-0 .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#publish-mermaid-1785344856180-0 .icon-shape p,#publish-mermaid-1785344856180-0 .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#publish-mermaid-1785344856180-0 .icon-shape .label rect,#publish-mermaid-1785344856180-0 .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#publish-mermaid-1785344856180-0 .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#publish-mermaid-1785344856180-0 .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#publish-mermaid-1785344856180-0 .node .neo-node{stroke:#9370DB;}#publish-mermaid-1785344856180-0 [data-look=\”neo\”].node rect,#publish-mermaid-1785344856180-0 [data-look=\”neo\”].cluster rect,#publish-mermaid-1785344856180-0 [data-look=\”neo\”].node polygon{stroke:#9370DB;filter:drop-shadow(1px 2px 2px rgba(185, 185, 185, 1));}#publish-mermaid-1785344856180-0 [data-look=\”neo\”].swimlane.cluster rect{filter:none;}#publish-mermaid-1785344856180-0 [data-look=\”neo\”].node path{stroke:#9370DB;stroke-width:1px;}#publish-mermaid-1785344856180-0 [data-look=\”neo\”].node .outer-path{filter:drop-shadow(1px 2px 2px rgba(185, 185, 185, 1));}#publish-mermaid-1785344856180-0 [data-look=\”neo\”].node .neo-line path{stroke:#9370DB;filter:none;}#publish-mermaid-1785344856180-0 [data-look=\”neo\”].node circle{stroke:#9370DB;filter:drop-shadow(1px 2px 2px rgba(185, 185, 185, 1));}#publish-mermaid-1785344856180-0 [data-look=\”neo\”].node circle .state-start{fill:#000000;}#publish-mermaid-1785344856180-0 [data-look=\”neo\”].icon-shape .icon{fill:#9370DB;filter:drop-shadow(1px 2px 2px rgba(185, 185, 185, 1));}#publish-mermaid-1785344856180-0 [data-look=\”neo\”].icon-shape .icon-neo path{stroke:#9370DB;filter:drop-shadow(1px 2px 2px rgba(185, 185, 185, 1));}#publish-mermaid-1785344856180-0 :root{–mermaid-font-family:inherit;}

是

否/需要副作用

是

否/简单值监听

开始: 需要处理数据

是否需要派生新值?

选择 computed

提供 getter 函数

返回计算后的值

是否需要异步或操作副作用?

选择 watch

配置回调函数

处理数据变化

选择 watch

监听基本类型变化

3.2 代码示例对比

computed 示例：

computed: {
fullName() {
return firstName.value + ' ' + lastName.value;
}
}

watch 示例：

watch: {
firstName(newVal, oldVal) {
console.log('First name changed from', oldVal, 'to', newVal);
}
}

四、进阶：深度侦听与立即执行

4.1 watch 的深度选项

watch 默认不监听对象内部属性的变化。要深度监听，请使用 deep: true。

watch: {
user: {
handler(newVal) {
console.log('User data deep changed:', newVal);
},
deep: true
}
}

4.2 watch 的立即执行选项

默认情况下，侦听器在挂载后才会触发。使用 immediate: true 在创建时立即执行回调。

watch: {
message: {
handler(newVal) {
console.log('Message:', newVal);
},
immediate: true
}
}