vue3 中的watch监听属性

作用：监视数据的变化

       只能监视以下四种数据

     1、ref定义的数据 2、reactive定义的数据 3、函数返回一个值(getter)函数 4、一个包含上述内容的数组

       import {ref,watch} from 'vue'

     watch(s1,s2,s3)  //s1 是被监视的数据， s2 回调函数  s3 deep:true 开启深度监视

    回调函数里面有两个参数， 参数1 数据变化后的新值newvalue 参数2  数据变化前的值oldvalue

    监视 ref 定义的基本数据类型，

     watch(sum,()=>{})

    监视 ref 定义的对象数据类型，参数1监视的是对象的地址值，若想监视对象内部的属性表变化，需要手动开启

     immediate  立即监视

    watch(object,()=>{},{deep:true,immediate:true})

  let obj = reactive({

        name: '张三',

        age: 36,

        car: {

            car1: '雅迪',

            car2: '奔驰',

            car3: '迈巴赫'

        }

    })

      监视 reactive 定义的对象数据类型，且默认就是开启深度监视的，不管对象的层级有多深，都能监视到

     如果需要监视对象中的某一个属性的时候，且该属性是基本类型的，就要写成函数式

     watch(()=>{return   obj.age},()=>{  })   // obj.age 是对象中的某一个属性

     watch(()=> obj.age,()=>{ } )

     如果需要监视对象中的某一个属性的时候，且该属性是对象类型的，car对象里面有好几辆车

     watch(obj.car,()=>{})  //此时只能监听到car对象里面的每一个基本数据类型

    watch(()=>obj.car,()=>{ })   //此时能监听到car这个整体对象，不能监听到car对象中的属性

    1、 如果既想监听car整个对象，又想监听car对象里面的数据   推荐书写函数

      watch(()=>obj.car,()=>{},{deep:true})

    2、如果需要监视多个数据

     watch([()=>obj.name,obj.car],(newvalue,oldvalue)=>{  },{deep:true})

     newvalue,oldvalue 是数组

    watchEffect监视

    /立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行该函数。

     watch 与watchEffect的区别

     1、都能监听响应式数据的变化，不同的是监听数据变化的方式不同

     2、watch 要明确指出监视的数据

     3、watchEffect 不用明确指出监视的数据（函数中用到哪些属性，那就监视哪些属性）

import {watchEffect,ref} from 'vue'

     let temp=ref(20);

     let height=ref(30);

      watchEffect(()=>{

        if(temp.value>=70 || height.value>=70){

            //要执行的操作

        }

      })