vue3-watch和watchEffect区别

• 两者都可以监听data属性变化
• watch需要明确监听哪个属性
• watchEffect会根据其中的属性，自动监听其变化

watch

watch需要明确监听哪个属性

<template>
    <div>
        {{ numberRef }}--{{ name }} {{ age }}
    </div>
</template>


<script lang="ts">
import { ref, reactive, toRefs, watch, watchEffect } from 'vue';
export default {
    name: 'Watch',
    setup() {
        const numberRef = ref<number>(100)

        const state = reactive({
            name: 'zhangsan',
            age: 20
        })

        watch(numberRef, (newVal, oldVal) => {
            console.log('numberRef watch', newVal, oldVal);
        }, {
            immediate: true
        })

        /**
         * 第一个参数： 确定要监听哪个属性
         * 第二个参数： 回调函数
         * 第三个参数： 配置项  初始化之前就监听； 深度监听  （可选）
         */
        watch(() => state.age, (newVal, oldVal) => {
            console.log('state age watch', newVal, oldVal);
        },{
            immediate: true
        })

        watch(() => state.name, (newVal, oldVal) => {
            console.log('state name watch', newVal, oldVal);
        },{
            immediate: true
        })

        setTimeout(() => {
            numberRef.value = 200
        }, 1500)

        setTimeout(() => {
            state.name = 'lisi'
        }, 3500)

        setTimeout(() => {
            state.age = 30
        }, 4500)

        return {
            numberRef,
            ...toRefs(state)
        }
    }
}
</script>

<style>
</style>

watchEffect

watchEffect会根据其中的属性，自动监听其变化

<template>
    <div>
        {{ numberRef }}--{{ name }} {{ age }}
    </div>
</template>
<script lang="ts">
import { ref, reactive, toRefs, watch, watchEffect } from 'vue';
export default {
    name: 'Watch',
    setup() {
        const numberRef = ref<number>(100)

        const state = reactive({
            name: 'zhangsan',
            age: 20
        })


        watchEffect(() => {
            console.log('初始化时，一定执行一次，收集要监听的数据');
        })


        watchEffect(() => {
            console.log('state.name', state.name);
        })

        watchEffect(() => {
            console.log('state.age', state.age);
        })

        setTimeout(() => {
            state.name = 'lisi'
        }, 2000)

        setTimeout(() => {
            state.age = 30
        }, 4500)

        return {
            numberRef,
            ...toRefs(state)
        }
    }
}
</script>
<style>
</style>