vue3中watch的使用

import { ref, reactive, watch } from 'vue'
watch(data, (newVal, oldVal) => {}, {immediate: true, deep: true})

一、监听普通类型

const name = ref('握奇')
const age = ref(21)

// 监听单个普通类型
watch(name, (newVal, oldVal) => { 
  console.log(newVal)
})

// 监听多个普通类型，返回数组
watch([name, age], (newVal, oldVal) => { 
  console.log(newVal)
})

二、监听整个对象

const person = reactive({
  name: '握奇',
  infos: {
    age: 21,
    address: '上海'
  }
})

// 监听对象person时，vue3将强制开启deep深度监听
watch(person, (newVal, oldVal) => { 
  console.log(newVal)
})

watch(() => person, (newVal, oldVal) => { 
  console.log(newVal)
}, { deep: true })

两种实现方式效果相同，只要对象中有任何变化就会触发watch方法

三、监听对象中的属性

const person = reactive({
  name: '握奇',
  infos: {
    age: 21,
    address: '上海'
  }
})

// 只有当person对象中的name属性发生变化才会触发watch方法
watch(() => person.name, (newVal, oldVal) => { 
  console.log(newVal)
})

// 注意：监听对象的属性为复杂数据类型时，需要开启deep深度监听
watch(() => person.infos, (newVal, oldVal) => { 
  console.log(newVal)
}, { deep: true })

注意：第一个参数是一个箭头函数

watch 的第三个参数：

1. deep: 深度监听
2. immediate: 作用就是设置是否立即执行监控，当值设置为 true 时，那么被监控的对象在初始化时就会触发一次 watch 方法。