vue3的watch和watchEffect和computed

vue3的watch和watchEffect的区别:

  • watch 是需要传入侦听的数据源,而 watchEffect 是自动收集数据源作为依赖。
  • watch 可以访问侦听状态变化前后的值,而 watchEffect 没有,watchEffect获取的改变后的值。
  • watch 是属性改变的时候执行,当然也可以immediate,而 watchEffect 是默认会执行一次(相当于自带 immediate),然后属性改变也会执行。

例:

<template>
    <section>
        <div>num:{{ num }}</div>
        <div>num2:{{ num2 }}</div>
        <button @click="addNum">addNum</button>
    </section>
</template>

<script>
import { ref, watch, watchEffect } from "vue";
export default {
    setup() {
        const num = ref(1);
        const num2 = ref(1);
        const addNum = () => {
            num.value++;
            num2.value++;
        };
        watch(() => num.value, (newValue, oldValue) => {
            console.log(`num新值为${newValue}`);
        });
        watchEffect(() => {
            console.log(`num2新值为${num2.value}`);
        });
        return {
            num,
            num2,
            addNum,
        };
    },
};
</script>

<style lang="scss">
</style>
vue3的watch和watchEffect

watch监听多个值:

<template>
    <section>
        <div>num:{{ num }}</div>
        <div>num2:{{ num2 }}</div>
        <button @click="addNum">addNum</button>
    </section>
</template>

<script>
import { ref, watch } from "vue";
export default {
    setup() {
        const num = ref(1);
        const num2 = ref(1);
        const addNum = () => {
            num.value++;
            num2.value++;
        };
        // wahcth多个
        watch(
            () => [num.value, num2.value],
            ([newNum1, newNum2], [oldNum1, oldNum2]) => {
                console.log(`num1新值为${newNum1}`);
                console.log(`num2新值为${newNum2}`);
                console.log(`num1旧值为${oldNum1}`);
                console.log(`num2旧值为${oldNum2}`);
            }
        );
        return {
            num,
            num2,
            addNum,
        };
    },
};
</script>

<style lang="scss">
</style>

computed:

<template>
    <section>
        <div>num:{{ num }}</div>
        <div>num2:{{ num2 }}</div>
        <div>sum:{{ sum }}</div>
        <button @click="addNum">addNum</button>
    </section>
</template>

<script>
import { ref, computed } from "vue";
export default {
    setup() {
        const num = ref(1);
        const num2 = ref(1);
        const addNum = () => {
            num.value++;
            num2.value++;
        };
        const sum = computed(() => num.value + num2.value);
        const sum2 = computed({
            // 取值函数
            get: () => (num.value + 1),
            // 赋值函数
            set: val => {
                 num.value = val - 1
            }
        })
        return {
            num,
            num2,
            sum,
            sum2,
            addNum,
        };
    },
};
</script>

<style lang="scss">
</style>

类似文章

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注