Vue 3 监听属性教程
1. 什么是监听属性？
在 Vue 3 中，监听属性（Watchers）是一种强大的响应式系统特性，允许您追踪和响应数据变化。Vue 提供了两种主要的监听方法：watch 和 watchEffect。
2. 基本 watch 使用方法
2.1 监听单个响应式引用
import { ref, watch } from 'vue'export default {setup() {const count = ref(0)// 监听 count 变化watch(count, (newValue, oldValue) => {console.log(`count 从 ${oldValue} 变为 ${newValue}`)})return { count }}
}
2.2 监听多个数据源
import { ref, watch } from 'vue'export default {setup() {const firstName = ref('张')const lastName = ref('三')// 监听多个数据源watch([firstName, lastName], ([newFirstName, newLastName], [oldFirstName, oldLastName]) => {console.log(`名字从 ${oldFirstName} ${oldLastName} 变为 ${newFirstName} ${newLastName}`)})return { firstName, lastName }}
}
3. 深度监听
3.1 监听对象
import { ref, watch } from 'vue'export default {setup() {const user = ref({name: '张三',age: 25,details: {city: '北京'}})// 深度监听对象watch(user, (newUser) => {console.log('用户信息发生变化', newUser)}, { deep: true })return { user }}
}
3.2 监听对象特定属性
import { ref, watch } from 'vue'export default {setup() {const user = ref({name: '张三',age: 25})// 监听对象的特定属性watch(() => user.value.name, (newName, oldName) => {console.log(`用户名从 ${oldName} 变为 ${newName}`)})return { user }}
}
4. watchEffect 的使用
watchEffect 是一个更加自动和灵活的监听方法，它会自动收集依赖并在依赖变化时重新执行。
import { ref, watchEffect } from 'vue'export default {setup() {const count = ref(0)const doubled = ref(0)// watchEffect 自动追踪依赖watchEffect(() => {doubled.value = count.value * 2console.log(`count 变化，doubled 现在是 ${doubled.value}`)})return { count, doubled }}
}
5. watchEffect 与 watch 的区别
-
依赖追踪：
watchEffect自动收集依赖watch需要显式指定要监听的数据源
-
初始执行：
watchEffect会立即执行一次watch默认不会在初始化时执行
-
访问旧值：
watch可以同时获取新值和旧值watchEffect只能访问当前值
6. 停止监听
import { ref, watch } from 'vue'export default {setup() {const count = ref(0)// 创建可停止的监听器const stopWatch = watch(count, (newValue) => {console.log(`count 变为 ${newValue}`)})// 在需要时停止监听// stopWatch()return { count }}
}
7. 最佳实践
- 尽量使用
watch监听特定数据源 - 对于复杂的副作用，使用
watchEffect - 注意性能，避免过于频繁的监听
- 在组件卸载时停止不必要的监听器
8. 常见陷阱和注意事项
- 避免在监听器中修改正在监听的数据源，可能导致无限循环
- 对于大型对象，使用深度监听时要注意性能开销
- 使用箭头函数可能会影响
this的指向
通过合理使用 Vue 3 的监听属性，您可以更加灵活地处理数据变化和副作用。