Vue中computed、watch、watchEffect的作用与区别

computed

vue2中computed的用法

基本用法

<template>
    <div>
        <input v-model="testData1" />
        <input v-model="testData2" />
        <div>computed得出的数据:{{demo1}}</div>
        <div>computed得出的数据:{{demo2}}</div>
    </div>
</template>

data(){
    return{
        testData1 : 0,
        testData2 : 10,
    }
},
computed:{
    demo1:function(){
        return this.testData1 + 1 // testData1的数据变，demo1的数据也会变
    },
    demo2:function(){
        return this.testData1 + 'aa' + this.testData2// testData1或testData2任一数据变，demo2都会变
    }
}

  computed中的get和set属性

<template>
    <div>
        <input v-model="testData3" />
        <div>computed得出的数据:{{demo3}}</div>
        <button @click="demo3 = 666"></button>
    </div>
</template>

data(){
    return{
        testData3 : 0,
    }
},
computed:{
    demo3:{
        get(){
            return this.testData3 + 'demo3'
        },
        set(val){
            this.testData3 = val
        }    
    }
}

---

vue3中computed的用法 

基本用法

setup(){
    let demo1 = computed({
        return this.testData1 + 1 // testData1的数据变，demo1的数据也会变
    })
    let demo2 = computed({
        return this.testData1 + 'aa' + this.testData2// testData1或testData2任一数据变，demo2都会变
    })
}

computed中的get和set属性

setup(){
    let demo3 = computed({
        get(){
            return this.testData3 + 'demo3'
        },
        set(val){
            this.testData3 = val
        }    
    })
}

计算属性是基于它们的响应式依赖进行缓存的，只在相关响应式依赖发生改变时它们才会重新求值 

watch

vue2中watch的用法 

基本用法

<input v-model="test" />

watch:{
    //写法1
    test:function(newVal,oldVal){
        console.log(newVal,oladVal)
    }
    //写法2
    test:{
        handler(newVal,oldVal){
            console.log(newVal,oladVal)
        }
    }   
}

---

deep

为了发现对象内部值的变化，可以在选项参数中指定 deep: true。注意监听数组的变更不需要这么做。

<input v-model="objDemo.name" />

data(){
    return{
        objDemo:{
            name:'hello',
            age:18
        }
    }
},
objDemo:{
    handler(newVal,oldVal){
        console.log(newVal,oldVal)
    },
    deep:true
},

如果不加deep，objDemo的属性将监听不到变化

---

immediate

在选项参数中指定 immediate: true 将立即以表达式的当前值触发回调

<input v-model="objDemo.name" />

data(){
    return{
        objDemo:{
            name:'hello',
            age:18
        }
    }
},
objDemo:{
    handler(newVal,oldVal){
        console.log(newVal,oldVal)
    },
    immediate:true,
    deep:true
},

 加上immediate:true，首次加载页面就会触发handler回调

---

vue3中watch的用法 

基本用法

<input v-model="objDemo.name" />

setup(){
    watch(
        objDemo,(newVal,oldVal)=>{//箭头函数写法
            console.log(newVal,oldVal)
        }
    )
    watch(
        objDemo,function(newVal,oldVal){//普通函数写法
            console.log(newVal,oldVal)
        }
    )
    watch(
        ()=>objDemo.name,//getter()写法
        (newVal,oldVal)=>{
            console.log(newVal,oldVal)
        }
    )
}

deep和immediate属性，Vue3相较Vue2不需要加handler，如下

setup(){
    watch(
        objDemo,(newVal,oldVal)=>{//箭头函数写法
            console.log(newVal,oldVal)
        },
        {immediate:true,deep:true}//若是直接使用ObjDemo作为监听对象，不需要加deep也可以触发回调
    )
    watch(
        objDemo,function(newVal,oldVal){//普通函数写法
            console.log(newVal,oldVal)
        },
        {immediate:true,deep:true}//若是直接使用ObjDemo作为监听对象，不需要加deep也可以触发回调
    )
    watch(
        ()=>objDemo,//getter()写法
        (newVal,oldVal)=>{
            console.log(newVal,oldVal)
        },
        {immediate:true,deep:true}//此处用了getter()写法，如果不加deep,objDemo.name的值变化监听不到！！！
    )
}

watchEffect

watchEffect是vue3才引入的，因此以下代码均为vue3 

<input v-model="test" />
<input v-model="obj.name.sonName" />

let test = ref("2")
const obj = reactive({
    name:{
        sonName:'hello'
    },
    age:18,
})
watchEffect(()=>{
    console.log(test.value)
    console.log(obj.name.sonName)
})

watchEffect() 允许我们自动跟踪回调的响应式依赖，不需要传递源值

回调会立即执行，不需要指定 immediate: true

watchEffect() 可能会比深度侦听器更有效，因为它将只跟踪回调中被使用到的属性，而不是递归地跟踪所有的属性，不需要写deep:true

watchEffect不会返回oldValue，每次触发回调仅可以返回一个newValue

computed与methods的区别

 1.computed具有缓存，methods没有，只有computed依赖的数据发生改变时，computed值才会重新计算，methods每次调用都会执行函数中的代码

2.computed可以当作属性使用，methods不行，methods只能当作方法调用

3.computed有getter、setter，methods没有

4.computed无法接收多个参数，methods可以

总而言之 computed 更省性能，methods 使用更灵活

 computed与watch的区别

它们都可以在组件的 data 变化时触发计算

1.watch通过监听 data 中的某个属性的变化来触发回调函数，computed则依赖于 data 中的一些属性计算出一个新的值 

2.computed支持缓存，只有依赖的数据发生了变化，才会重新计算，watch不支持缓存，数据变化时，它就会触发相应的操作

3.computed不支持异步，如果有异步操作，无法监听数据的变化,watch支持异步监听

watch和watchEffect的区别 

1.watch显式指定依赖数据，依赖数据更新时执行回调函数，watchEffect自动收集依赖数据，依赖数据更新时重新执行自身

2.watch具有一定的惰性lazy 第一次页面展示的时候不会执行，只有数据变化的时候才会执行(设置immediate: true时可以变为非惰性，页面首次加载就会执行），watchEffect则立即执行，没有惰性，页面的首次加载就会执行

3.监视ref定义的响应式数据时可以获取到原值（oldValue），watchEffect无法获取到原值，只能得到变化后的

4.watch既要指明监视的属性，也要指明监视的回调，watchEffect不用指明监视哪个属性，监视的回调中用到哪个属性就监视哪个属性