vue3中侦听器的使用

写在前面

现在vue3的使用越来越普遍了，vue3这方面的学习我们要赶上，今天说一下vue3中侦听器的使用。

1. 监听ref定义的响应式数据

// 1、侦听器-基本类型
const count = ref(10)
// 侦听普通值基本使用
watch(count, (newValue, oldValue) => {
  console.log(newValue, oldValue)
})

总结：侦听普通数据可以获取修改前后的值；被侦听的数据必须是响应式的。

2. 监听reactive定义的响应式数据

const obj = reactive({
  msg: 'tom'
})

// 侦听对象
// watch(obj, (newValue, oldValue) => {
watch(obj, () => {
  // console.log(newValue === oldValue)
  console.log(obj.msg)
})

const handleClick = () => {
  obj.msg = 'jerry'
}

总结：如果侦听对象，那么侦听器的回调函数的两个参数是一样的结果，表示最新的对象数据，此时，也可以直接读取被侦听的对象，那么得到的值也是最新的。

3. 监听多个响应式数据数据

// 3、侦听器-侦听多个数据
const n1 = ref(1)
const n2 = ref(2)

watch([n1, n2], (v1, v2) => {
  // v1和v2都是数组
  // v1表示被监听的所有值的最新值
  // v2表示被监听的所有值的原有值
  console.log(v1, v2)
})

总结：可以得到更新前后的值；侦听的结果也是数组，数据顺序一致

4. 监听reactive定义的响应式数据的某一个属性

// 4、侦听对象中的某个属性
// 如果侦听对象中当个属性，需要使用函数方式
setup(){
 const stuInfo = reactive({
      uname: 'lisi',
      age: 12,
      friend: {
        uname: 'zhangsan'
      }
    })

watch(() => obj.age, (v1, v2) => {
  console.log(v1, v2)
})}

总结：如果侦听对象中当个属性，需要使用函数方式，侦听更少的数据有利于提高性能。

5. 配置选项用法

// watch方法的配置选项
// 如果要侦听的是对象中的对象，要进行深度监听
// immediate: true 表示，组件渲染后，立即触发一次
setup(){
 const stuInfo = reactive({
      uname: 'lisi',
      age: 12,
      friend: {
        uname: 'zhangsan'
      }
    })

  watch(() => stuInfo.friend, () => {
  console.log('sutInfo')
}, {
  immediate: true,
  // 被侦听的内容需要是函数的写法 () => stuInfo.friend
  deep: true
})
})}

总结：

1. immediate: true,表示组件渲染时立即调用
2. deep:true，表示深度监听对象里面的子属性（被侦听的内容需要是函数的写法）

写在后面

来吧，试试看