Vue3常用API之watch监听函数

watch监听函数

1. 在vue3中的watch监听函数的配置项（deep、immediate）与vue2中一致，该函数有三个参数
   1. 第一个参数：被监听的属性
   2. 第二个参数：监听的回调函数
   3. 第三个参数：为一个对象，监听函数的配置项，在对象内进行配置项配置（deep、immediate）
2. 语法如下：

   <template>
       <div>{{address}}</div>
   </template>
   import {ref, watch} from 'vue'
   export default {
       name: 'App',
       setup () {
           const address = ref('广东省')
           
           // 监听address，并配置immediate为true，进行立刻监听
           watch(address, (newValue, oldValue) => {
               console.log('监听到address的改变', newValue, oldValue)
           }, {immediate: true})
           
           return {
               address
           }
       }
   }
   

3. 在vue3中watch监听函数有以下几个注意点和坑：
   1. 坑一：当监听的对象为reactive定义的响应式对象属性时，watch监听的回调函数中无法准确获取oldValue，目前无法解决（若watch监听使用ref定义响应式数据，也是同样的效果，因为使用ref定义对象类型的数据时，底层还是求助reactive实现的）
   2. 坑二：当监听的对象为reactive定义的响应式对象属性时，watch函数自动开启deep深度监听，此时手动配置deep: false无效
   3. 注意点：主要为以下几种情况

      <template>
          <div>{{address}}</div>
      	<div>{{person}}</div>
      </template>
      import {reactive, ref, watch} from 'vue'
      export default {
          name: 'App',
          setup () {
              const address = ref('广东省')
              const msg = '暂居'
              const person = reactive({
                  age: 18,
                  name: '张三',
                  job: {
                      type: '前端开发'
                  }
              })
              
              // 情况一：监听ref定义的响应式基本数据类型address
              watch(address, (newValue, oldValue) => {
                  console.log('监听到address的改变', newValue, oldValue)
              })
              
              // 情况二：监听多个ref定义的响应式基本数据类型address, msg
              watch([address, msg], (oldValue, newValue) => {
                  console.log('监听到address或msg的改变', newValue, oldValue)
                  // 输出为一个数组，数组元素为address, msg，如['广东省', '暂居']
              })
              
              // 情况三：监听reactive定义的响应式对象中的属性时
              watch(() => person.age, (oldValue, newValue) => {
                  console.log('监听到person.age的改变', newValue, oldValue)
              })
              
              // 情况四：监听reactive定义的响应式对象中的多个属性时
              watch([() => person.age, () => person.name], (oldValue, newValue) => {
                  console.log('监听到person.age的改变', newValue, oldValue)
                  // 输出为一个数组，数组元素为address, msg，如[18, '张三']
              })
              
              // 情况五：监听reactive定义的响应式对象中的属性的值为对象时
              // deep配置有效
              watch(() => person.job, (oldValue, newValue) => {
                   console.log('监听到person.age的改变', newValue, oldValue)
              }, {deep: true})
              
              return {
                  person,
                  address
              }
          }
      }