前端面经-VUE3篇--vue3基础知识（二）计算属性(computed)、监听属性（Watch）

 一、计算属性(computed)

计算属性（Computed Properties）是 Vue 中一种特殊的响应式数据，它能基于已有的响应式数据动态计算出新的数据。

计算属性有以下特性：

• 自动缓存：只有当它依赖的响应式数据发生变化时，才会重新计算。

• 响应式更新：依赖的数据变化后，会自动触发计算属性重新计算。

• 简化模板：在模板中使用计算属性可以减少复杂逻辑，让模板更清晰、易读。

简单来说：

计算属性是基于其他响应式数据而自动计算得到的值，且具有缓存和响应式的特性。

1、计算属性的基本用法

<script setup>
import { ref, computed } from 'vue'// 响应式数据
const firstName = ref('Tom')
const lastName = ref('Jerry')// 计算属性（根据响应式数据动态计算）
const fullName = computed(() => {return `${firstName.value} ${lastName.value}`
})
</script><template><div>{{ fullName }}</div> <!-- 显示：Tom Jerry -->
</template>

注意默认计算属性是只读的，但也可以定义成可写。当你尝试修改一个计算属性时，你会收到一个运行时警告。只在某些特殊场景中你可能才需要用到“可写”的属性，你可以通过同时提供 getter 和 setter 来创建：

<script setup>
import { ref, computed } from 'vue'const firstName = ref('John')
const lastName = ref('Doe')const fullName = computed({// getterget() {return firstName.value + ' ' + lastName.value},// setterset(newValue) {// 注意：我们这里使用的是解构赋值语法[firstName.value, lastName.value] = newValue.split(' ')}
})
</script>

 现在当你再运行 fullName.value = 'John Doe' 时，setter 会被调用而 firstName 和 lastName 会随之更新。

注意，computed()里面不接受任何的参数，我们看到里面有一个回调函数，这个回调函数本质上是getter函数

• 之前版本（<3.4），这个 getter 函数没有参数。

• 从 3.4 开始，这个 getter 函数可以接受一个参数：就是上一次计算属性的计算结果。

简单来说：

如果需要，可以通过访问计算属性的 getter 的第一个参数来获取计算属性返回的上一个值：

<script setup>
import { ref, computed } from 'vue'const count = ref(2)// 这个计算属性在 count 的值小于或等于 3 时，将返回 count 的值。
// 当 count 的值大于等于 4 时，将会返回满足我们条件的最后一个值
// 直到 count 的值再次小于或等于 3 为止。
const alwaysSmall = computed((previous) => {if (count.value <= 3) {return count.value}return previous
})
</script>

 如果你正在使用可写的计算属性的话：

<script setup>
import { ref, computed } from 'vue'const count = ref(2)const alwaysSmall = computed({get(previous) {if (count.value <= 3) {return count.value}return previous},set(newValue) {count.value = newValue * 2}
})
</script>

 2、计算属性与方法（methods）的详细区别

两者区别如下：

对比维度	计算属性（computed）	方法（methods）
缓存机制	有缓存，仅数据变化才重新计算	无缓存，每次调用都会执行
调用方式	不需要括号调用，像属性一样使用	需要括号调用，明确为函数
适用场景	基于响应式数据的计算	处理事件或显式调用的场景
性能开销	性能较高（缓存优化）	性能较低（频繁调用时）

计算属性与方法性能差异分析

假设模板多次渲染对比：

• 计算属性：

  <div>{{ doubleCount }}</div>
  <div>{{ doubleCount }}</div>
  <div>{{ doubleCount }}</div>
  

  • 只计算一次，缓存结果。

• 方法调用：

  <div>{{ getDoubleCount() }}</div>
  <div>{{ getDoubleCount() }}</div>
  <div>{{ getDoubleCount() }}</div>
  

  • 每次都调用一次，共调用3次，性能浪费。

因此，对于频繁使用但数据不频繁变化的场景，建议使用计算属性。

3、计算属性什么时候不能用？

计算属性适用于：

• 同步、快速的计算逻辑。

• 无副作用的计算（纯函数）。

计算属性不适合：

• 异步逻辑（如请求数据）。

• 执行副作用（修改其他数据、DOM 操作）。

 二、监听属性

在 Vue 中，监听属性（Watch） 是一种响应式机制，用于监测响应式数据的变化：

• 当你想在数据发生变化时执行某些逻辑（如发送请求、更新数据或执行某些副作用）时，就可以使用监听属性。

• 监听属性通过 Vue 提供的 watch() 或 watchEffect() 函数实现。

简单来说：

监听属性让你能够对数据变化做出反应，执行一些副作用或异步操作。

1、监听属性的基本用法（watch）

<script setup>
import { ref, watch } from 'vue'const count = ref(0)// 监听 count 的变化
watch(count, (newValue, oldValue) => {console.log(`count变化了：从${oldValue}到${newValue}`)
})
</script><template><button @click="count++">增加 ({{ count }})</button>
</template>

当 count 的值改变时，watch 会自动触发，执行回调函数。

监听多个数据： 

const firstName = ref('Tom')
const lastName = ref('Jerry')// 同时监听 firstName 和 lastName
watch([firstName, lastName], ([newFirst, newLast], [oldFirst, oldLast]) => {console.log(`名字变化了：${oldFirst} ${oldLast} => ${newFirst} ${newLast}`)
})

2、监听属性的参数与选项（高级用法）

🔹 监听属性的函数签名：watch(source, callback, options)

• source: 需要监听的响应式数据，可以是单个或多个。可以是不同形式的“数据源”：它可以是一个 ref (包括计算属性)、一个响应式对象、一个 getter 函数、或多个数据源组成的数组：

• callback: 数据变化时执行的回调函数。

• options: 可选参数，控制监听器行为。

🔹 常用的监听选项（options）：

选项	含义	默认值
immediate	是否立即执行一次监听回调	false
deep	是否深度监听对象内部属性变化	false
flush	控制监听器回调的执行时机	'pre'

 深度监听（deep）到底是什么？

• 默认情况下，Vue 的监听器只能监听对象引用本身的变化（比如替换对象）。

• 使用 deep: true 时，能监听对象或数组内部属性或元素的变化。

const user = ref({ name: 'Tom', age: 18 })// 默认浅监听（只能监听整个对象变化）
watch(user, () => {console.log('浅监听：user变化了')
})user.value.age = 19 // ❌不会触发浅监听（对象引用未变）
user.value = { name: 'Jerry', age: 19 } // ✔️触发// 深度监听（对象内部属性变化也会触发）
watch(user, () => {console.log('深监听：user变化了')
}, { deep: true })user.value.age = 20 // ✔️触发深度监听

 监听属性的执行时机（flush）

flush 控制监听回调的执行时机：

flush 值	含义	使用场景
pre	默认值，组件更新之前执行	大多数情况
post	组件更新之后执行	需要访问更新后的DOM时
sync	同步触发，数据变化立即执行	非常特殊情况

3、watch vs watchEffect 的区别

在 Vue 中，watch() 和 watchEffect() 都用于响应式地执行一些副作用操作（如发起请求、改变 DOM），但二者的追踪数据依赖方式不同：

特性	watch()	watchEffect()
如何追踪依赖	手动显式指定要监听的数据（明确）	自动追踪回调中访问的数据（隐式）
首次执行	默认不立即执行，需手动开启	自动立即执行一次
控制粒度	精确控制监听的数据项，控制更细	自动追踪所有访问的响应式数据，更灵活
适用场景	明确知道监听什么数据变化	数据依赖较多或复杂，更希望自动追踪

 举个简单例子，监听单个明确的数据：

const todoId = ref(1)
const data = ref(null)watch(todoId,async () => {const response = await fetch(`https://jsonplaceholder.typicode.com/todos/${todoId.value}`)data.value = await response.json()},{ immediate: true }
)

 特点：

• todoId 被显式声明为监听的源。

• 回调函数只在明确的源数据（todoId）改变时触发。

• 必须用 { immediate: true } 来立即执行一次，否则首次不会执行。

1、 watchEffect() 如何简化上面的例子？

const todoId = ref(1)
const data = ref(null)watchEffect(async () => {const response = await fetch(`https://jsonplaceholder.typicode.com/todos/${todoId.value}`)data.value = await response.json()
})

特点：

• 自动立即执行一次，无需手动指定 { immediate: true }。

• 无需手动指定监听源，回调函数内的所有响应式数据访问（这里是 todoId.value）会自动被 Vue 跟踪。

• 一旦被跟踪的数据变化（例如：todoId.value 改变），回调会自动再次执行。

 2、watchEffect() 的依赖跟踪原理（关键）：

watchEffect() 会自动追踪回调函数在同步执行时访问的所有响应式数据。
但有个重要提示：

如果回调是异步函数，那么只有在第一个 await 之前访问的数据才会被追踪！

watchEffect(async () => {console.log(todoId.value) // ✅ 被追踪，因为在 await 之前访问const response = await fetch('...')console.log(someOtherRef.value) // ❌ 不被追踪，因为在 await 之后访问
})

原因是：

• Vue 只能追踪同步执行阶段访问的数据。

• 在异步操作完成后的回调内访问的数据不会被 Vue 追踪。

3、watchEffect() 在实际场景中的优势：

优势一：自动跟踪多个数据源（不必手动指定）：

假如你有多个响应式数据：

const firstName = ref('Tom')
const lastName = ref('Jerry')watchEffect(() => {console.log(`Name: ${firstName.value} ${lastName.value}`)
})Vue 自动监控 firstName 和 lastName。无论哪个改变，都会触发回调函数。使用 watch() 则必须手动指定数据源：
watch([firstName, lastName], () => {console.log(`Name: ${firstName.value} ${lastName.value}`)
})

优势二：更精细地跟踪对象属性（比深监听高效）：

假如你有复杂对象：

const user = ref({name: 'Tom',age: 20,address: { city: 'Shanghai', street: 'Main St' }
})watchEffect(() => {console.log(`User city: ${user.value.address.city}`)
})watchEffect() 只监听了对象的部分属性 (address.city)，高效、精准。如果用深监听 (watch(user, ..., { deep: true }))，会监听所有属性的变化，性能可能较差。

4、什么时候用 watch()？什么时候用 watchEffect()？

场景	推荐方式	理由
明确知道监听的数据源	✅ 使用 watch()	明确指定，粒度精准
多个数据源或依赖复杂	✅ 使用 watchEffect()	自动跟踪，代码更简洁、更灵活
动态数据请求或复杂副作用	✅ watchEffect()	自动监听，省去手动指定烦恼

4、监听属性的常见使用场景

场景	示例
数据变化请求API	表单值变化时重新获取数据
数据变化存储数据	自动保存用户输入
执行副作用	数据变化时更新DOM或执行动画

5、监听属性的注意事项 

• 避免无限循环：

  watch(count, (val) => {count.value++ // ⚠️ 无限循环，不要这样做
  })
  

• 不要监听非响应式数据（监听无效）：

  const plain = { name: 'Tom' }
  watch(plain, () => {}) // ❌ 无效
  

• 使用深监听时注意性能问题（深监听成本较高）：

  watch(obj, () => {}, { deep: true }) // 谨慎使用
  

  注意，你不能直接侦听响应式对象的属性值，例如、

const obj = reactive({ count: 0 })// 错误，因为 watch() 得到的参数是一个 number
watch(obj.count, (count) => {console.log(`Count is: ${count}`)
})

 这里需要用一个返回该属性的 getter 函数：

// 提供一个 getter 函数
watch(() => obj.count,(count) => {console.log(`Count is: ${count}`)}
)

6、副作用清理

在 Vue 中，所谓的副作用通常指：

• 异步请求（如 API 请求）

• 定时器 (setTimeout、setInterval)

• DOM 操作、监听事件

• 其他非纯函数的逻辑

这些操作不是立即完成的，可能会在未来某个时刻继续执行。

 为什么需要副作用清理？

以 API 请求为例：假设我们有一个监听器监听 id：
watch(id, (newId) => {fetch(`/api/${newId}`).then(() => {console.log('请求完成，当前ID:', newId)})
})

可能的问题：

当你快速修改 id：

• 请求 1 (/api/1) 发出后，还未完成。

• 请求 2 (/api/2) 立即发出。

• 如果请求 2 的响应比请求 1 快，那么请求 1 的响应（较慢）回来时，结果是过时的，但还是会被处理。

我们想要的：

• 当数据变化时，上一个异步请求应被取消或忽略，不再执行后续逻辑。

为了解决这个问题，Vue 提供了副作用清理机制。

副作用清理函数 (onCleanup())

从 Vue 3.0 开始，Vue 提供了一个清理机制，称为 onCleanup。

watch(id, (newId, oldId, onCleanup) => {const controller = new AbortController()fetch(`/api/${newId}`, { signal: controller.signal }).then((res) => res.json()).then((data) => {console.log('请求结果:', data)})onCleanup(() => {controller.abort() // 取消上一个请求})
})

含义解释：

• 每次监听的数据 (id) 变化时：

  • 先调用上一次注册的 onCleanup 清理函数。

  • 然后再执行新一次监听回调。

• 因此，上一次的异步请求会自动终止，避免过时请求的结果被错误处理。

 watchEffect() 中的副作用清理

watchEffect((onCleanup) => {const timer = setInterval(() => {console.log('定时执行')}, 1000)onCleanup(() => {clearInterval(timer) // 清理定时器})
})

原理相同：

• 每次响应式数据变化重新执行副作用之前，先调用清理函数。

• 确保副作用（定时器、请求等）不重叠，避免内存泄漏或数据错乱。

从 Vue 3.5 版本开始，引入了新 API：onWatcherCleanup()： 

import { watch, onWatcherCleanup } from 'vue'watch(id, (newId) => {const controller = new AbortController()fetch(`/api/${newId}`, { signal: controller.signal }).then(() => {console.log('请求完成:', newId)})onWatcherCleanup(() => {controller.abort() // 取消上一个请求})
})

特点：

• 不再需要第三个参数 onCleanup。

• 可以独立地在监听器或 watchEffect() 回调函数内调用清理函数。

 使用限制：

• 必须在同步阶段调用，不可放在 await 之后。

• 因此，必须在异步操作之前注册。

正确用法（同步调用）：watch(id, (newId) => {const controller = new AbortController()onWatcherCleanup(() => controller.abort()) // 同步调用，正确！fetch(`/api/${newId}`, { signal: controller.signal })
})❌ 错误用法（异步调用）：watch(id, async (newId) => {const controller = new AbortController()await someAsyncOperation()onWatcherCleanup(() => controller.abort()) // ❌ 错误！异步调用