Vue3 中的 监视 watch

1.定义

        与Vue2 中的监视功能一致，.当监视的属性发生变化时，回调函数会自动调用，进行相关操作，Vue3 中的监视 watch 为一个函数

2.watch的使用

        watch的功能配置项有：immediate: true，deep:true  等等

        注意：功能配置项是一个对象

        1.使用前引入组合式的API watch

import {watch} from 'vue'

         2.watch 函数中的参数

                参数一： 要监视的响应式数据

                参数二：监视的回调函数

                参数三：监视的配置

        2.使用 watch 所出现的情况

                情况一：

                        watch 监视一个 ref 所定义的响应式数据

                        语法：watch(要监视的属性, (newValue, oldValue) => {......}, {功能配置项})

                        具体代码实现：

watch(num,(newValue, oldValue) => console.log('num发生了变化',newValue, oldValue ))

                情况二：

                        watch 监视多个 ref 所定义的响应式数据

                        语法：watch([要监视的属性合集], (newValue, oldValue) => {......}, {功能配置项})

                        具体代码实现：

 watch([num, msg], (newValue, oldValue) => console.log('num或msg发生了变化', newValue, oldValue ), {immediate: true})

                情况三：

                        watch 监视一个 reactive 所定义的响应式数据

                        语法：watch(要监视的属性, (newValue, oldValue) => {......}, {功能配置项})

                        注意：

                                1.这里无法正确获取 oldValue

                                2.这里强制开启 深度监视 (deep 配置无效)

                        具体代码实现：

watch(person, (newValue, oldValue) => console.log('person中的 name 或 age 发生了变化',newValue,oldValue ))

                情况四：

                        watch 监视一个 reactice 所定义的响应式数据中的某个属性

                        语法：watch(() => perosn.要监视的person中的某个属性, (newValue, oldValue) => {......},{功能配置项})

                        注意：监视 reactice 所定义的响应式数据中的某个属性时，watch 中的第一个参数为一个函数，返回值为要监视的属性

                        具体代码实现：

watch(() => person.name, (newValue, oldValue) => console.log(newValue, oldValue))

                情况五：

                        watch 监视一个 reactive 所定义的响应式数据中的某些属性

                        语法：watch([() => perosn.要监视的person中的某个属性, () => perosn.要监视的person中的某个属性], (newValue) => {......}, {功能配置项})

                        注意：监视 reactice 所定义的响应式数据中的某个属性时，watch 中的第一个参数为一个数组，数组中的存放着回到函数，返回值为要监视的属性

                        具体代码实现：

watch([() => person.name, () => person.age], (newValue, oldValue) => console.log(newValue, oldValue))

                情况六：

                        watch 监视一个 reactive 所定义的响应式数据中的某个属性，该属性是一个对象

                        语法：watch(() => perosn.要监视的person中的某个属性, (newValue, oldValue) => {......},{deep: true})

                        注意：

                                1.这里需要开启深度监视才可以监视到该属性中的里面值的改变

                                2.这里无法正确获取 oldValue

                        具体代码实现：

            watch(() => person.job, (newValue, oldValue) => console.log(newValue, oldValue), {deep: true})

3.两个小坑：

        1. 监视 reactive 定义的响应式数据时：oldValue 无法正确获取，强制开启了深度监视（deep 配置监视无效）

        2. 监视 reactive 定义的响应式数据中的某个属性（该属性是一个对象）时：需要开启深度监视，deep: true

4.完整代码展示：

<template>
  <h3>当前和为：{{ num }}</h3>
  <button @click="num++">点击num++</button>
  <h3>当前信息为：{{ msg }}</h3>
  <button @click="msg += '!'">点击更改信息</button>
  <hr>
  <h3>姓名：{{ person.name }}</h3>  
  <button @click="person.name += '?'">点击更改姓名</button>
  <h3>年龄：{{ person.age }}</h3>
  <button @click="person.age++">点击年龄加一</button>
  <h3>薪资：{{ person.job.j1.salary }}K</h3>
  <button @click="person.job.j1.salary++">涨薪</button>
</template>

<script>    
    // 引入 recative 函数
    import {reactive, computed, ref, watch} from 'vue'
    export default {
        name: 'Demo',
         // vue3 配置
        setup() {
            // 数据
            let num = ref(18)
            let msg = ref('你好啊')

            let person = reactive({
                name: '张三',
                age: 18,
                job: {
                    j1: {
                        salary: 20,
                    }
                }
            })

            // watch 为一个函数，函数可以传递三个参数
            // 参数一： 要监视的响应式数据
            // 参数二：监视的回调函数
            // 参数三：监视的配置
        
            // 情况一
            // watch 监视一个 ref 所定义的响应式数据 
            // watch(num,(newValue, oldValue) => console.log('num发生了变化',newValue, oldValue ))

            // 情况二
            // watch 监视多个 ref 所定义的响应式数据
            watch([num, msg], (newValue, oldValue) => console.log('num或msg发生了变化', newValue, oldValue ), {immediate: true})

            // 情况三
            // watch 监视一个 reactive 所定义的响应式数据
            // 注意：这里无法正确获取 oldValue
            // 注意：强制开启 深度监视 (deep 配置无效)
            // watch(person, (newValue, oldValue) => console.log('person中的 name 或 age 发生了变化',newValue,oldValue ))

            // 情况四
            // watch 监视一个 reactice 所定义的响应式数据中的某个属性
            // watch(() => person.name, (newValue, oldValue) => console.log(newValue, oldValue))

            // 情况五
            // watch 监视一个 reactive 所定义的响应式数据中的某些属性
            // watch([() => person.name, () => person.age], (newValue, oldValue) => console.log(newValue, oldValue))

            // 情况六
            // watch 监视一个 reactive 所定义的响应式数据中的某个属性，该属性是一个对象
            // 注意：若监视一个 reactive 所定义的响应式数据中的某个属性，该属性是一个对象，需要开启深度监视，深度监视配置有效
            // 注意：这里无法正确获取 oldValue
            watch(() => person.job, (newValue, oldValue) => console.log(newValue, oldValue), {deep: true})


            // 返回数据
            return {
                num,
                msg,
                person
            }

        }
    }
</script>

<style>

</style>