vue3中watch的写法大合集。

VUE2的watch是一个属性写法是

watch:{

　　　　data1(newVal,oldVal){

                       同步/异步操作  

                               }

}

　VUE3的watch则是一个函数，写法是

注意数据必须是响应式的

let num = ref(0)

 //watch(要监听的响应式数据,(新值，旧值)=>{更新时的回调})

 watch(num,(newValue,oldValue)=>{

    console.log(newValue);

 })

const add = ()=>{

    num.value++

}

　

/*
 监听对象里面的属性
 1.用reactive处理对象
 2.用torefs解构出要监听的属性
 3.watch(要监听的响应式数据,(新值，旧值)=>{更新时的回调})
*/

let obj = reactive({

    num2:20

})

let {num2} =toRefs(obj)

const add2 = ()=>{

    num2.value=num2.value+2

}

watch(num2,(newVlaue,oldValue)=>{

 console.log("num2",newVlaue);

})

//监听单个属性的另一种写法，不使用toRefs解构属性，将要监听的函数用函数的返回值形式表示

 watch(()=>obj.num,(newV,oldV)=>{

    //监听单个属性的另一种写法，不使用toRefs解构属性

    console.log('监听单个属性',oldV,newV);

 })

监视多个属性，需要将要监听的属性使用数组，依次传递，注意：返回的新值和旧值也是数组，和属性相对应。并且监听多个属性的事件是在监听单个属性后面执行的。

 watch([()=>obj.num,()=>obj.age],(newV,oldV)=>{

  //监听多个属性

    console.log('监听多个',oldV,newV);//监听多个属性要在监听单个属性后面执行

 })

直接监听整个对象

  watch(obj,(oldV,newV)=>{

    //监听整个对象

    console.log('监听整个对象',oldV.age,newV.age);

 })

使用watchEffect函数，将监听的数据写在里面就会被监听到

 //watchEffect页面刷新之后立即执行,数据从undefined变成有值也能监听到

 watchEffect(()=>{

    //凡是写在这里的数据只要变化都会触发这里的代码执行

    //通过add1或者add2方法改变写在这里的两个数据中的任意一个都会触log

    console.log(obj.num);

    console.log(per.age);

 })

vue3中watch的写法大合集。的相关教程结束。