Vue2与Vue3区别-computed、watch、watchEffect

1.computed

1.1、computed作用

​ 表示计算属性

1.2、vue2中用法

export default{
    //propfunction为自定义的计算属性名
    computed:propfunction(){
        return ...
    }
}
1
2
3
4
5
6

1.3、vue3中用法（变成了函数）

//引入computed函数
import {computed} from 'vue'
export default{
    setup(){
        let obj ={},
        obj.computedProp=computed({
                //获取属性
                get(){return ...},
                //设置属性
                set(value){}
        })
        return {obj}
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

2.watch

2.1 watch作用

​ 表示监听属性的变化，变化时可以调用回调函数进行相关操作

2.2 vue2相关写法

​ 用法：watch:{} 或 vm.$watch()监视

export default{
    watch:{
        //简写
       //propName(newValue,oldValue){}
        //对象形式的写法
       propName:{
           //配置项 immediate 表示初始化即调用1次handle函数
           immediate:true,
           //配置项 deep 为true表示深度遍历
           deep:true,
           //newValue,oldValue 参数是新值与旧值
           handle(newValue,oldValue){
				//
           }
       }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

2.3 vue3相关写法（变成了函数）

​ 在vue3中，watch是一个函数

​ 配置项中表示深度遍历的“deep：true”默认开启，若遍历的对象中的某个属性为对象类型，需要主动开启

//先引入
import {reactive,watch} from 'vue'
export default{
    setup(){
        let sum = ref(2)
        let str = ref("aaa")
        let obj =reactive({
            a:1,b:{b1:xxx}
        })
        //监听ref数据，配置项写在最后
        watch(sum,(old,newV)=>{},{immediate:true})
        //监听多个ref定义的基本类型的响应式数据--数组方式
        watch([sum,str],(old,newV)=>{},{immediate:true})
        //监视reactive定义的一个响应式数据的全部属性
        watch(obj,(old,newV)=>{},{immediate:true})
        //监视reactive定义的一个响应式数据的某个属性 ()=>(obj.a),若是1个对象，需要添加deep:true
        watch(()=>(obj.a),(old,newV)=>{},{immediate:true})
        //监视reactive定义的一个响应式数据的多个属性 [()=>(obj.a),()=>obj.b]
        watch([()=>(obj.a),()=>obj.b],(old,newV)=>{},{immediate:true,deep:true})
    } 
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

3.watchEffect

watchEffect：不需指明监视哪个属性，监视的回调中用到哪个属性，就监视哪个属性

watchEffect(()=>{
    //里面写到了哪个属性，就会自动监听哪个属性，从而触发监听回调函数
})
1
2
3