Vue3-watch和watchEffect的比较

1.介绍

wacth和watchEffect都可以用来监听数据的改变。二者最大区别就是watch需要手动配置监听的数据，而watchEffect是自动收集需要监听的数据。大家想象成汽车自动挡和手动挡的区别。

2.watch

watch的使用

/*
   参数1：需要监听的数据
   参数2：数据改变时触发的回调函数
   参数3：watch的额外配置选项
*/
watch(data,()=>{},{})

watch监听基础数据

<script setup>
    import{ref,watch} from "vue"
    const num = ref(1)

    //1s后修改num的值
    setTimeout(()=>{num.value = 2},2000)

    watch(num,(newV,oldV)=>{
        console.log(newV,oldV)
    })
</script>

上述代码是监听vue3中ref定义的基础数据类型，1s后会输出2,1。

watch监听对象数据

在vue3中，我们通常使用reactive来定义对象数据让其具备响应式。

<script setup>
    import{reactive,watch} from "vue"
    const info = reactive({age:1})

    //1s后修改对象的值
    setTimeout(()=>{info.age = 2},2000)

    watch(num,(newV,oldV)=>{
        console.log(newV,oldV)
    })
</script>

上述代码在1s后输出age:2和age:1。并且我们发现vue3的对象数据监听默认是深度监听，对象任意一个属性改变都会被监听到。

watch第三个参数：配置项的介绍

watch(data,()=>{},{
    deep:true/false,
    immediate:true/false
})
 deep:是否开启深度监听，默认是false
 immediate:是否首次页面加载就执行,默认是false
 

immediate测试

   <script setup>
        import{ref,watch} from "vue"
        const age = ref(1)
  
        setTimeout(()=>{age = 2},2000)

        watch(num,(newV,oldV)=>{
            console.log(newV,oldV)
        },{
            immediate:true
        })
    </script>

代码首次执行 undefined,1。1s后输出1,2

watch如何监听对象的某个属性

答案：watch第一个参数修改成一个回调函数，回调函数内部返回需要监听对象的某个属性

    <script setup>
        import{reactive,watch} from "vue"
        const info = reactive({
             name:'xiao',
             age:22
        })
        setTimeout(()=>{info.name = "xiao2",info.age=99},2000)
        
        //只监听对象的age属性,其他属性改变不会触发
        watch(()=>info.age,(newV,oldV)=>{
            console.log(newV,oldV)
        })
    </script>
    
    

代码首次加载执行undefined,xiao.1s过后输出xiao，xiao2

3.watchEffect

watchEffect使用

watchEffect(()=>{
    do...
})

监听数据

watchEffect自动监听其内部回调函数使用到的数据，其中任意一个数据发生了改变，它都会执行回调函数。 并且watchEffect首次加载就会执行一次。

    <script setup>
        import{reactive,watchEffect} from "vue"
        const info = reactive({
             name:'xiao',
             age:22
        })
        setTimeout(()=>{info.name = "xiao2"},2000)
        
        watchEffect(()=>{
            console.log(info.name)
        })
    </script>
    

代码首次运行输出xiao,2s后自动输出xiao2

4.总结

1. watch默认首次不加载，当数据改变时才执行。而watchEffect首次和数据改变都执行

2. watch需要对监听的数据配置，而watchEffect自动收集数据依赖，当数据更新时自动触发。