本文章仅供个人学习记录所用
监听 ref 类型
第一个参数是响应式对象，第二个参数是回调函数
const a = ref(0)
watch(a, (newVal, oldVal) => {
console.log(newVal, oldVal)
})
监听 reactive 类型
首先采用 ref 的那种方式，我们会发现报错
const data = reactive({
count: 0
})
watch(data.count, (newVal, oldVal) => { // 错误写法
console.log(newVal, oldVal)
})
错误信息
[Vue warn]: Invalid watch source: 0** A watch source can only be a getter/effect function, a ref, a reactive object, or an array of these types. **
所以我们根据上述的报错信息，将这个参数改成一个 function的形式即可
const data = reactive({
count: 0
})
watch(() => data.count, (newVal, oldVal) => {
console.log(newVal, oldVal)
})
同时监听多个
watch 第一个参数可以使用数组的形式
watch([a, () => data.count], (newVal, oldVal) => {
console.log(newVal, oldVal)
})
watchEffect的使用
// watchEffect 监听
watchEffect(() => {
console.log(a.value, data.count) // ref 类型的需要加.value
})
🆚watch和watchEffect的特性对比
watch的特性
- 首次加载不会监听，只会被监听数据发生变化时才监听到。（惰性）
- 可以拿到新的值以前的值
- 可以同时监听多个数据的变化
watchEffect的特性
- 首次加载就会监听
- 只能拿到最新的值
- 不需要指定监听的数据，组件初始化的时候就会执行一次用以收集依赖，而后收集到的依赖发生变化，这个回调才会再次执行
高级用法
他们的高级用法等后面应用的时候单独再记录下
完整案例代码体验
<template>
<div>
<h1>count :{{ count }}</h1>
<h1>a :{{ a }}</h1>
<button @click="increase">新增</button>
</div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive, toRefs, watch, watchEffect } from 'vue';
export default defineComponent({
name: 'HelloWorld',
setup() {
let a = ref(0)
const data = reactive({
count: 0,
increase: () => { data.count ++; a.value += 2 } // 这是改变两个类型数据的方法
})
// watch 监听
watch([a, () => data.count], (newVal, oldVal) => {
console.log(newVal, oldVal)
})
// watchEffect 监听
watchEffect(() => {
console.log(a.value, data.count) // ref 类型的需要加.value
})
const refData = toRefs(data)
return {
...refData,
a
}
}
});
</script>
