vue3 侦听器

Zoella Lv3

基本用法

1
2
3
4
5
6
7
8
9
<script setup>
import { ref, watch } from 'vue';

const initVal = ref('');

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

侦听数据源类型

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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 函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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 传响应式对象,会隐式创建深层监听器

1
2
3
4
5
6
7
const obj = reactive({ count: 0 });

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

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

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

1
2
3
4
5
6
watch(
() => source.obj,
() => {
... // 仅当 test.obj 被替换时触发
}
);

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

1
2
3
4
5
6
7
watch(
() => source.obj,
() => {
... // 仅当 test.obj 被替换时触发
},
{ deep: true }
);

创建时立即执行的侦听器

创建侦听器时,立即执行

1
2
3
watch(source, 
(newVal, oldVal) => {},
{ immediate: true });
  • Title: vue3 侦听器
  • Author: Zoella
  • Created at : 2023-12-07 18:22:34
  • Updated at : 2023-12-26 11:20:56
  • Link: https://zoella-w.github.io/2023/12/07/12-vue3侦听器/
  • License: This work is licensed under CC BY-NC-SA 4.0.