vue3的watch、computed用法（ 对比vue2）_vue3 watch computed

1.watch和computed区别

2. 使用( watch 和 computed ) vue2和3对比

Ⅰ.vue3 对 watch 和 computed 的使用 =>

import {watch,computed} from 'vue'
setup(){
    
    const num = ref (1);
    watch(num,(newValue,oldValue)=>{  console.log(newValue,oldValue); });  (多对一)改变后可进行多步操作
    
    //-------------------------------------------------------------------------
    
    const  width  =  ref(2);
    const  height =  ref(2);
    let S = computed(()=>{return width.value * height.value }});           (一对多)其中一个方式改变就会触发
}
1
2
3
4
5
6
7
8
9
10
11
12

Ⅱ.vue2 对 watch 和 computed 的使用 =>

watch:{  // (aaa为data中参数)  改变就执行 影响一或多 (多对一)   默认走缓存
    'aaa': function(newVal,oldVal){ console.log(newVal,oldVal);}
}
//--------------------------------------------------------------
computed:{
    Numchange(){
        return  this.Num * this.price ;   其中一个依赖改变 Numchange 改变  (一对多)
    }
}
1
2
3
4
5
6
7
8
9

3.扩展 vue3 新增 watchEffect （与vue2的区别）

Ⅰ. watchEffect中用 ref 或reactive 包裹的对象，值发生变化就会执行，不需要写监听项。
Ⅱ. watch想监听多个，必须形成数组或对象的形式。

setup(){
    watch([a,b],(newArr,oldArr)=>{  console.log(newArr,oldArr) });
    
    watchEffect(()=>{  console.log(a,b));  })
    // 只监听ref 和 reactive 且出现在回调函数中的对象
}
1
2
3
4
5
6