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);
    
    
 })