mini-vue

Appearance

watch ​

用法 ​

watch 接受三个参数

  • source 可以是一个getter函数, 可以是一个ref也可以是一个响应式对象
  • callback 回调函数, 当source变化时, 会重新执行callback回调函数
  • options 配置项, 可以配置deep和immediate 等
ts
const count = ref(0)
watch(count, (newValue, oldValue) => {
  console.log(newValue, oldValue)
})

count.value++ // 1 0

实现原理 ​

基于doWatch方法实现, 首先对source进行判断,如果source是一个对象,则需要递归这个对象,产生一个可以给ReactiveEffect使用的getter, 如果source是一个函数, 则直接使用这个函数, 如果source是一个ref对象, 则使用ref.value作为getter

这个getter会作为ReactiveEffect的fn使用, 当getter内数值变化时就会触发ReactiveEffect的run方法, 从而触发callback回调函数

函数返回一个unWatch方法, 这个方法会调用ReactiveEffect 的stop方法, 从而停止监听

callback的第三个参数是onCleanup, 可以传入清理方法,该方法会在callback执行前执行 用于清理资源

  • Options
    • deep 是否深度监视, 原理: 如果传入false 递归遍历对象的时候 只会遍历一层 实现浅层监视
    • immediate 是否立即执行一次回调函数 默认为false 原理: 执行doWatch 时 如果传入选项则会立即执行

watchEffect ​

用法 ​

watchEffect 接受两个参数

  • effect 回调函数, 当effect内的响应式对象变化时, 会重新执行effect回调函数
  • options 配置项

实现原理 ​

也基于doWatch实现 不过传入的getter是effect本身 callback 传入的是null

watchEffect 实际上是对VueeffectApi的一种包装? 存疑