前言
Vue3的侦听学习笔记
OptionsAPI
通过对象配置
deep：是否深度侦听
immediate：是否首次渲染数据时立即侦听，如果立即侦听则oldValue结果为undefined
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <script>
export default {
data: function () {
return {
key: "value"
}
},
watch: {
key: {
handler: function (newValue, oldValue) {
console.log(newValue, oldValue);
},
deep: false,
immediate: true
}
}
}
</script>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <script>
export default {
data: function () {
return {
key: "value"
}
},
watch: {
key: function (newValue, oldValue) {
console.log(newValue, oldValue);
}
}
}
</script>
|
通过数组配置
- 当侦听到数据发生变化时，依次执行所有回调函数
- 数组中如果包含字符串，则根据字符串方法名在
methods中寻找方法
- 数组中如果包含函数，则表示回调函数
- 如果数组中包含对象，则表示侦听对象
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| <script>
export default {
data: function () {
return {
key: "value"
}
},
methods: {
fn: function (newValue, oldValue) {
console.log(newValue, oldValue);
}
},
watch: {
key: [
"fn",
function (newValue, oldValue) {
console.log(newValue, oldValue);
},
{
handler: function (newValue, oldValue) {
console.log(newValue, oldValue);
},
deep: false,
immediate: true
}
]
}
}
</script>
|
获取原生对象
- 侦听的对象是代理对象，如果需要获原生对象，需要使用
Vue.toRaw()获取
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <script>
export default {
data: function () {
return {
key: "value"
}
},
watch: {
key: function (newValue, oldValue) {
console.log(Vue.toRaw(newValue));
console.log(Vue.toRaw(oldValue));
}
}
}
</script>
|
CompositionAPI
setup函数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <script>
import { ref, watch } from "vue"
export default {
setup: function (attrs, slots, emit) {
const key = ref("value");
watch(key, (newValue, oldValue) => {
console.log(newValue, oldValue);
}, {
deep: false,
immediate: true
});
}
}
</script>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
| <script>
import { ref, watch } from "vue"
export default {
setup: function (attrs, slots, emit) {
const key = ref("value");
watch(key, (newValue, oldValue) => {
console.log(newValue, oldValue);
});
}
}
</script>
|
返回普通对象
1
2
3
4
5
6
7
8
9
10
11
12
13
| <script>
import { ref, watch } from "vue"
export default {
setup: function (attrs, slots, emit) {
const key = ref("value");
watch(() => key, (newValue, oldValue) => {
console.log(newValue, oldValue);
});
}
}
</script>
|
返回原始对象
1
2
3
4
5
6
7
8
9
10
11
12
13
| <script>
import { ref, watch } from "vue"
export default {
setup: function (attrs, slots, emit) {
const key = ref("value");
watch(() => ({ ...key }), (newValue, oldValue) => {
console.log(newValue, oldValue);
});
}
}
</script>
|
监听多个数据
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <script>
import { ref, watch } from "vue"
export default {
setup: function (attrs, slots, emit) {
const key1 = ref("value");
const key2 = ref("value");
watch([key1, key2], (newValue, oldValue) => {
console.log(newValue, oldValue);
});
}
}
</script>
|
自动侦听
watchEffect()中传递的函数会自动执行一次- 首次执行函数后会自动收集依赖的变量，当这些变量发生改变时，会重新执行函数
1
2
3
4
5
6
7
8
9
10
11
12
| <script>
import { watchEffect, ref } from "vue"
export default {
setup: function (attrs, slots, emit) {
watchEffect(() => {
const key = ref("value");
});
}
}
</script>
|
停止自动侦听
watchEffect()会返回一个函数，调用该函数即可停止侦听
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <script>
import { watchEffect, ref } from "vue"
export default {
setup: function (attrs, slots, emit) {
const stopWatch = watchEffect(() => {
const key = ref("value");
});
stopWatch();
}
}
</script>
|
setup语法糖
1
2
3
4
5
6
7
8
9
10
11
12
| <script setup>
import { ref, watch } from "vue"
const key = ref("value");
watch(key, (newValue, oldValue) => {
console.log(newValue, oldValue);
}, {
deep: false,
immediate: true
});
</script>
|
1
2
3
4
5
6
7
8
9
| <script setup>
import { ref, watch } from "vue"
const key = ref("value");
watch(key, (newValue, oldValue) => {
console.log(newValue, oldValue);
});
</script>
|
完成