Vue 3 监听属性教程

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 * 2
      console.log(`count 变化，doubled 现在是 ${doubled.value}`)
    })

    return { count, doubled }
  }
}

5. watchEffect 与 watch 的区别

1. 依赖追踪：

   • watchEffect 自动收集依赖
   • watch 需要显式指定要监听的数据源

2. 初始执行：

   • watchEffect 会立即执行一次
   • watch 默认不会在初始化时执行

3. 访问旧值：

   • 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 的监听属性，您可以更加灵活地处理数据变化和副作用。