Vue3中watch监视属性用法

watch属性

这里先写下Vue2的写法

vue2的写法
        watch:{
            简写
            sum(newVal,oldVal){
                console.log(newVal,oldVal)
            },
            完整写法
            sum:{
                immediate:true,//立即监听
                deep:true,//深度监视
                handler(newVal,oldVal){
                    console.log(newVal,oldVal)
                }
            }
        }

在Vue3中watch变成了一个组合式api

第一步：引入watch

 import {watch} from  'vue'

使用watch

在Vue3中watch是一个函数，组合api就是一个内置的函数

watch第一个参数就是监视目标，第二个参数是一个回调函数。里面有两个参数，分别是目标的新值以及旧值。第三个参数就是用来配置深度监视以及立即监听等。

watch(sum,(newVal,oldVal)=>{
                console.log(newVal,oldVal)
            },{immediate:true});

完整示例代码：

<template>
    <div class="hello">
        <h1>监视属性属性</h1>
        <h2>当前求和为：{{sum}}</h2>
        <button @click="sum++">+1</button>
        <hr>
        <h2>当前求和为：{{sum1}}</h2>
        <button @click="sum1++">+1</button>
        <hr>
        <h2>姓名：{{obj.name}}</h2>
        <h2>年龄：{{obj.age}}</h2>
        <h2>薪资：{{obj.job.j1.salary}}</h2>
        <button @click="obj.name+='-'">修改姓名</button>
        <button @click="obj.age++">修改年龄</button>
    </div>
    
</template>

<script>
    import {ref,reactive,watch} from  'vue'
    export default {
        name: 'Home',
        setup() {
            let sum = ref(99);
            let sum1 = ref(1);
            let obj = reactive({
                name:'小明',
                age:99,
                job:{
                    j1:{
                        salary:20
                    }
                }
            })

            //情况一：监视ref所定义的一个响应式数据
            watch(sum,(newVal,oldVal)=>{
                console.log(newVal,oldVal)
            },{immediate:true});

            //情况二：监视ref所定义的多个响应式数据
            watch([sum,sum1],(newVal,oldVal)=>{
                console.log(newVal,oldVal)
            },{immediate:true});

            //情况三：监视reactive所定义的一个响应式数据的全部属性。
            // 1.注意，此处无法正确的获取oldVal
            // 1.注意，此处强制开启了深度监视（deep配置无效）
            watch(obj,(newVal,oldVal)=>{
                console.log(newVal, oldVal);
            });

            //情况四：监视reactive所定义的一个响应式数据下的某一个属性.
            //不能直接obj.age。要写成一个函数，以函数返回值的形式。想监视谁就返回谁。
            watch(()=>obj.age,(newVal,oldVal)=>{
                console.log(newVal, oldVal);
            });

            // 情况五：监视reactive所定义的一个响应式数据下的多个属性.
            //监视多个属性，写法还是以函数返回的形式。但是多个属性，要用数组包起来
            watch([()=>obj.age,()=>obj.name],(newVal,oldVal)=>{
                console.log(newVal, oldVal);
            });

            //特殊情况,此处由于是监视的是reactive定义的对象中的某个属性（这个属性的值得是某个对象），所以deep配置有效
            watch(()=>obj.job,(newVal,oldVal)=>{
                console.log(newVal, oldVal);
            },{deep:true})


            return {
                sum,
                sum1,
                obj
            }
        },

        // vue2的写法
        // watch:{
        //     简写
        //     sum(newVal,oldVal){
        //         console.log(newVal,oldVal)
        //     },
        //     完整写法
        //     sum:{
        //         immediate:true,//立即监听
        //         deep:true,//深度监视
        //         handler(newVal,oldVal){
        //             console.log(newVal,oldVal)
        //         }
        //     }
        // }

    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

以上就是Vue3中watch监视的基本用法。