【无标题】

VUE3学习笔记

Watch监视器在vue3的应用与特性

watch:

import {reactive,ref,watch} from 'vue'
    export default {
        name:"shhs",
        setup(){
            let sum = ref(0),
            let msg = ref('nihaoa'),
            let person = reactive({
                name:'aa',
                age:12,
                job:{}
            })
            watch([sum,msg],(newvalue,oldvalue)=>{
                console.log(newvalue,oldvalue)
            }),
            //watch 监视 reactive 响应式数据时，不能正确获取oldvalue的值，自动开启深度监视

            // watch(person,(newvalue,oldvalue)=>{
            //     console.log(newvalue,oldvalue)
            // }),
             watch([()=>person.name,()=>person.age],(newvalue,oldvalue)=>{
                console.log(newvalue,oldvalue)
            })//正确监视
              watch([()=>person.job,()=>person.age],(newvalue,oldvalue)=>{
                console.log(newvalue,oldvalue)
            },{deep:true})//deep效果生效，因为job是个对象

            return{
                sum,
                msg
            }
        }

总结

当watch监视ref定义的响应式数据时，会自动开启deep深度监听，设置deep：false没有效果，监听时不用在属性后面加value，可以同时监听多个值，用数组包含起来。
当wacth 监听reative所定义的值时，需要在属性后面加.value，然后需要设置deep:true，开启深度监视。