vue3 侦听器

基本用法

<script setup>
import { ref, watch } from 'vue';

const initVal = ref('');

watch(initVal, (newVal, oldVal) => {
    ...
});
</script>

侦听数据源类型

ref（包括计算属性 computed）、响应式对象、getter 函数、多个数据源组成的数组

const x = ref(0), y = ref(0);

// ref
watch(x, (newX) => {
    console.log(`x is ${newX}`);
});

// getter 函数
watch(
    () => x.value + y.value,
    (sum) => {
        console.log(`sum is ${sum}`);
    }
);

// 多个数据源组成的数组
watch(
    [x, () => y.value],
    ([newX, newY], [oldX, oldY]) => {
        console.log(`x is ${newX} y is ${newY}`);
    }
);

侦听响应式对象的属性值

不能直接监听响应式对象的属性值，而是使用返回该属性的 getter 函数

const obj = reactive({ count: 0 });

// 错误，因为 obj.count 是一个 number
watch(obj.count, () => {
    .console.log(`count is: ${count}`)
});

// 正确，使用一个 getter 函数
watch(
    () => obj.count,
    (count) => {
      console.log(`count is: ${count}`)
    }
);

深层侦听器

给 watch 传响应式对象，会隐式创建深层监听器

const obj = reactive({ count: 0 });

watch(obj, (newVal, oldVal) => {
    ...
});

obj.count++; // 属性变更时触发

返回一个响应对象的 getter 函数，只在返回不同对象时才会触发回调

watch(
    () => source.obj,
    () => {
        ... // 仅当 test.obj 被替换时触发
    }
);

可以显示添加 deep，转为深层侦听器

watch(
    () => source.obj,
    () => {
        ... // 仅当 test.obj 被替换时触发
    },
    { deep: true }
);

创建时立即执行的侦听器

创建侦听器时，立即执行

1
2
3

watch(source, 
    (newVal, oldVal) => {}, 
    { immediate: true });