Vue3 源码解读系列（七）——侦听器

最新推荐文章于 2024-06-12 11:13:48 发布
最新推荐文章于 2024-06-12 11:13:48 发布
阅读量94 收藏
点赞数
分类专栏： Vue 文章标签： 前端 javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Jackson_Mseven/article/details/134514623
版权

侦听器

watch

侦听器是当侦听的对象或者函数发生了变化则自动执行某个回调函数。

侦听器的内部设计：侦听响应式数据的变化，内部创建 effect runner，首次执行 runner 做依赖收集，然后在数据发生变化后，以某种调度方式去执行回调函数。

调用侦听器的两种方式：

  1. 通过 Composition API watch

    watch(sourch, callback, options?)

  2. 通过 vm.$watch

    vm.$watch(sourch, callback, options?)

侦听器主要做了5件事：

  1. 标准化 source
    • 如果 source 是一个数组，则遍历该数组的每一项，判断该项为 ref、reactive、function 进行分别的处理
    • 如果 source 是 ref 对象，则创建一个访问 source.value 的 getter 函数
    • 如果 source 是 reactive 对象，则创建一个访问 source 的 getter 函数，并设置 deep 为 true
    • 如果 source 是一个函数，则会进一步判断第二个参数 cb 是否存在，对于 watch API 来说，cb 是一定存在且是一个回调函数，getter 就是一个简单的对 source 函数封装的函数
    • 如果 source 不满足上述条件，则在非生产环境下报警告，提示 source 类型不合法
  2. 构造 applyCb 回调函数
  3. 创建 scheduler 时序执行函数
    • 当 flush 为 sync 时，表示它是一个同步 watcher，即当数据变化时同步执行回调函数
    • 当 flush 为 pre 时，回调函数通过 queueJob 的方式在组件更新之前执行，如果组件还没挂载，则同步执行确保回调函数在组件挂载之前执行
    • 如果没设置 flush，回调函数通过 queuePostRenderEffect 的方式在组件更新之后执行
  4. 创建 effect 副作用函数，用于依赖收集
  5. 返回侦听器销毁函数
/**
 * watch 侦听器的实现
 */
function watch(source, cb, options) {
  // 如果传入的 cb 参数不是函数，则警告
  if ((process.env.NODE_ENV !== 'production') && !isFunction(cb)) {
    warn(/* ... */)
  }
  return doWatch(source, cb, options)
}

/**
 * 侦听函数
 * doWatch 主要做了 5 件事：
 * 1、标准化 source
 * 2、构造 applyCb 回调函数
 * 3、创建 scheduler 时序执行函数
 * 4、创建 effect 副作用函数
 * 5、返回侦听器销毁函数
 */
function doWatch(source, cb, { immediate, deep, flush, onTrack, onTrigger } = EMPTY_OBJ) {
  // 1、标准化 source
  /**
   * source 的标准化根据 source 的类型分类：
   * · 如果 source 是 ref 对象，则创建一个访问 source.value 的 getter 函数
   * · 如果 source 是 reactive 对象，则创建一个访问 source 的 getter 函数，并设置 deep 为 true
   * · 如果 source 是一个函数，则会进一步判断第二个参数 cb 是否存在，对于 watch API 来说，cb 是一定存在且是一个回调函数，getter 就是一个简单的对 source 函数封装的函数
   * · 如果 source 不合法，则在非生产环境下报警告，提示 source 类型不合法
   */
  // source 不合法时报警告的函数
  const warnInvalidSource = (s) => {
    warn(/* ... */)
  }
  const instance = currentInstance // 当前组件实例
  let getter
  // source 为数组，遍历判断每一个的类型
  if (isArray(source)) {
    getter = () => source.map(s => {
      // 如果是 ref，则返回访问 s.value 的 getter
      if (isRef(s)) {
        return s.value
      }
      // 如果是 reactive，则返回访问 s 的 getter，并递归执行侦听
      else if (isReactive(s)) {
        return traverse(s)
      }
      // 如果是函数，则返回访问 s 的返回的响应式对象的 getter
      else if (isFunction(s)) {
        return callWithErrorHandling(s, instance, 2/* WATCH_GETTER */)
      }
      // 如果不合法，则在非生产环境下报警告
      else {
        (process.env.NODE_ENV !== 'production') && warnInvalidSource(s)
      }
    })
  }
  // source 为 ref，则返回访问 source.value 的 getter
  else if (isRef(source)) {
    getter = () => source.value
  }
  // source 为 reactive，则返回访问 source 的 getter，并且设置 deep:true
  else if (isReactive(source)) {
    getter = () => source
    deep = true
  }
  // source 为函数，则进一步判断是否存在回调函数 cb
  /**
   * 如果存在，则返回访问 source 的返回的响应式对象的 getter
   * 如果不存在，说明是省略 source，因为 cb 是一定存在的，则执行 watchEffect 的逻辑，source 为依赖的响应式对象
   */
  else if (isFunction(source)) {
    // getter with cb
    if (cb) {
      getter = () => callWithErrorHandling(source, instance, 2/* WATCH_GETTER */)
    }
    // getter without cb
    else {
      // watchEffect 的逻辑
    }
  }
  // source 不合法，则在非生产环境下报警告
  else {
    getter = NOOP;
    (process.env.NODE_ENV !== 'production') && warnInvalidSource(source)
  }
  // 如果存在 cb，且 deep:true，则递归侦听每一个子属性
  if (cb && deep) {
    const baseGetter = getter
    getter = () => traverse(baseGetter())
  }

  // 2、构造 applyCb 回调函数
  /**
   * cb 的三个参数：
   * 1、newValue - 新值
   * 2、oldValue - 旧值
   * 3、onCleanup - 无效回调函数
   */
  let cleanup
  // 注册无效回调函数
  const onInvalidate = (fn) => {
    cleanup = runner.options.onStop = () => {
      callWithErrorHandling(fn, instance, 4/* WATCH_CLEANUP */)
    }
  }
  let oldValue = isArray(source) ? [] : INITIAL_WATCHER_VALUE/* {} */ // 旧值初始值
  // applyCb 回调函数	
  const applyCb = cb ? () => {
    // 若组件被销毁，则直接返回
    if (instance && instance.isUnmounted) return
    // 执行 runner 求得新值
    const newValue = runner()
    if (deep || hasChanged(newValue, oldValue)) {
      // 执行清理函数
      if (cleanup) {
        cleanup()
      }
      callWithAsyncErrorHandling(cb, instance, 3/* WATCH_CALLBACK */, [
        newValue,
        oldValue === INITIAL_WATCHER_VALUE ? undefined : oldValue, // 第一次更改时传递旧值为 undefined
        onInvalidate
      ])
      // 更新旧值，用于下次比对
      oldValue = newValue
    }
  } : void 0

  // 3、创建 scheduler 时序执行函数
  const invoke = (fn) => fn()
  // scheduler 的作用是根据某种调度方式去执行某种函数，在 watch API 中主要影响的是回调函数的执行方式，而 scheduler 又受到第三个参数 options 的 flush 属性的影响
  /**
   * 当 flush 为 sync 时，表示它是一个同步 watcher，即当数据变化时同步执行回调函数
   * 当 flush 为 pre 时，回调函数通过 queueJob 的方式在组件更新之前执行，如果组件还没挂载，则同步执行确保回调函数在组件挂载之前执行
   * 如果没设置 flush，回调函数通过 queuePostRenderEffect 的方式在组件更新之后执行
   */
  let scheduler
  // 同步
  if (flush === 'sync') {
    scheduler = invoke
  }
  // 进入异步队列，组件更新前执行
  else if (flush === 'pre') {
    scheduler = job => {
      // 如果组件已经挂载或销毁，则在组件更新之前执行
      if (!instance || instance.isMounted) {
        queueJob(job)
      }
      // 如果组件还没挂载，则同步执行确保回调函数在组件挂载前执行
      else {
        job()
      }
    }
  }
  // 进入异步队列，组件更新后执行
  else {
    scheduler = job => queuePostRenderEffect(job, instance && instance.suspense)
  }

  // 4、创建 effect 副作用函数
  const runner = effect(getter, {
    lazy: true, // 延时执行
    computed: true, // computed effect 可以优先于普通的 effect 先运行，比如组件渲染的 effect
    onTrack,
    onTrigger,
    scheduler: applyCb ? () => scheduler(applyCb) : scheduler
  })
  // 在组件实例中记录这个 effect
  recordInstanceBoundEffect(runner)
  // 存在 cb
  if (applyCb) {
    // 配置了 options: { immediate: true }，直接执行
    if (immediate) {
      applyCb()
    }
    // 没有配置 options: { immediate: true }，在指定时机执行
    else {
      oldValue = runner()
    }
  }
  // 没有 cb 的情况
  else {
    runner()
  }

  // 5、返回侦听器销毁函数
  return () => {
    // 执行 stop 函数让 runner 失活，这样可以停止对数据的侦听
    stop(runner)
    if (instance) {
      // 移除组件 effects 对这个 runner 的引用
      remove(instance.effects, runner)
    }
  }
  function stop(effect) {
    if (effect.active) {
      cleanup(effect)
      if (effect.options.onStop) {
        effect.options.onStop()
      }
      effect.active = false
    }
  }
}

/**
 * 异步任务队列的设计
 * 当前 flush 不是 sync 时，把回调函数执行的任务推到一个异步任务队列中执行
 */
function queuePostRenderEffect() {
  const queue = [] // 异步任务队列
  const postFlushCbs = [] // 异步任务队列任务执行完后执行的回调函数队列

  const p = Promise.resolve()
  let isFlushing = false // 是否正在执行任务队列
  let isFlushPending = false // 是否在等待 nextTick 执行 flushJobs

  // 添加到下一个 Tick(宏任务执行的周期) 队列
  function nextTick(fn) {
    // 通过 promise.then() 实现异步
    return fn ? p.then(fn) : p
  }

  // 添加异步任务到执行队列
  function queueFlush() {
    if (!isFlushing && !isFlushPending) {
      isFlushPending = true
      nextTick(flushJobs)
    }
  }

  // 添加任务到队列
  function queueJob(job) {
    if (!queue.includes(job)) {
      queue.push(job)
      queueFlush()
    }
  }

  // 添加回调函数到队列
  function queuePostFlushCb(cb) {
    // 如果不是数组，则直接 push
    if (!isArray(cb)) {
      postFlushCbs.push(cb)
    }
    // 如果是数组，则拍平后 push
    else {
      postFlushCbs.push(...cb)
    }
    queueFlush()
  }
}

const getId = (job) => (job.id == null ? Infinity : job.id)

/**
 * 执行异步任务
 */
function flushJobs(seen) {
  isFlushPending = false
  isFlushing = true
  let job
  if ((process.env.NODE_ENV !== 'production')) {
    seen = seen || new Map()
  }

  // 异步任务队列 queue 从小到大排序
  /* 
    原因：
    1、保证组件更新的顺序：创建组件的过程是父->子，创建组件副作用函数也是父->子，因此父组件的副作用渲染函数的 effect.id 小于子组件
    2、确保子组件在父组件的更新过程中被卸载就不更新自身了
  */
  queue.sort((a, b) => getId(a) - getId(b))

  while ((job = queue.shift()) !== undefined) {
    if (job === null) continue

    // 在非生产环境下检测是否有循环更新，即在侦听器的回调函数中更改了依赖响应式对象的值，从而导致死循环
    if ((process.env.NODE_ENV !== 'production')) {
      checkRecursiveUpdates(seen, job)
    }
    callWithErrorHandling(job, null, 14/* SCHEDULER */)
  }

  // 遍历执行异步任务队列
  flushPostFlushCbs(seen)
  isFlushing = false
  // 一些 postFlushCb 执行过程中会再次添加异步任务，递归 flushJobs 直到把它们都执行完毕
  if (queue.length || postFlushCbs.length) {
    flushJobs(seen)
  }
}

/**
 * 遍历执行所有推入到 postFlushCbs 的函数
 */
function flushPostFlushCbs(seen) {
  if (postFlushCbs.length) {
    // 在 cb 的执行过程中可能会修改 postFlushCbs，因此通过拷贝副本的方式以防止收到其影响
    const cbs = [...new Set(postFlushCbs)]
    postFlushCbs.length = 0
    if ((process.env.NODE_ENV !== 'production')) {
      seen = seen || new Map()
    }
    for (let i = 0; i < cbs.length; i++) {
      if ((process.env.NODE_ENV !== 'production')) {
        checkRecursiveUpdates(seen, cbs[i])
      }
    }
  }
}

/**
 * 检测是否存在循环更新
 */
const RECURSION_LIMIT = 100 // 循环的最大次数
function checkRecursiveUpdates(seen, fn) {
  // 第一次添加 fn
  if (!seen.has(fn)) {
    seen.set(fn, 1)
  }
  // 多次添加 fn
  else {
    const count = seen.get(fn)
    // 超出限制次数，则报错
    if (count > RECURSION_LIMIT) {
      throw new Error(/* 报错内容 */)
    }
    // 没有超出限制次数，则计数 +1
    else {
      seen.set(fn, count + 1)
    }
  }
}

优化：只使用一个变量

从功能上讲，isFlushPending 和 isFlushing 的作用主要有两点：

  1. 在一个 Tick 内可以多次添加任务到队列中，但是任务队列会在 nextTick 后执行
  2. 在任务队列的过程中，也可以添加新的任务到队列中，在当前 Tick 去执行剩余的任务队列

优化思路：

  • 去掉 isFlushPending 变量，默认为 true 可以执行异步任务，执行完毕后再设置为 false，禁止执行异步任务

优化后的代码：

function queueFlush() {
  if (!isFlushing) {
    isFlushing = true
    nextTick(flushJobs)
  }
}

function flushJobs(seen) {
  let job
  if ((process.env.NODE_ENV !== 'production')) {
    seen = seen || new Map()
  }
  queue.sort((a, b) => getld(a) - getld(b))
  while ((job = queue.shift()) !== undefined) {
    if (job === null) {
      continue
    }
    if ((process.env.NODE_ENV !== 'production')) {
      checkRecursiveUpdates(seen, job)
    }
    callWithErrorHandling(job, null, 14/* SCHEDULER */)
  }
  flushPostFlushCbs(seen)
  if ((queue.length || postFlushCbs.length)) {
    flushJobs(seen)
  }
  isFlushing = false
}

watchEffect

watchEffect 的作用是注册一个副作用函数，副作用函数内部可以访问到响应式对象，当内部响应式对象变化后再立即执行这个函数。

与 watch 的区别：

  1. 侦听源不同
    • watch 手动设置侦听源
    • watchEffect 自动侦听依赖响应式对象
  2. 是否懒执行
    • watch 是懒执行，即初次不会执行，需要设置 options: { immediate: true } 才会立即执行
    • watchEffect 会立即执行
/**
 * watchEffect 侦听器
 */
function watchEffect(effect, options) {
  return doWatch(effect, null, options)
}

/**
 * 侦听
 */
function doWatch(source, cb, { immediate, deep, flush, onTrack, onTrigger } = EMPTY_OBJ) {
  instance = currentlnstance
  let getter // source 包装函数
  if (isFunction(source)) {
    getter = () => {
      // 判断组件实例是否销毁
      if (instance && instance.isUnmounted) return

      // 执行清理函数
      if (cleanup) {
        cleanup()
      }

      // 执行 source 函数，传入 onInvalide 作为参数
      return callWithErrorHandling(source, instance, 3/* WATCH_CALLBACK */, [onInvalidate])
    }
  }

  let cleanup // 无效回调函数
  const onInvalidate = (fn) => {
    cleanup = runner.options.onStop = () => {
      callWithErrorHandling(fn, instance, 4/* WATCH_CLEANUP */)
    }
  }
  let scheduler
  // 创建 scheduler
  if (flush === 'sync') {
    scheduler = invoke
  } else if (flush === 'pre') {
    sheduler = job => {
      if (!instance || instance.isMounted) {
        queueJob(job)
      } else {
        job()
      }
    }
  } else {
    scheduler = job => queuePostRenderEffect(job, instance && instance.suspense)
  }

  // 创建 runner
  const runner = effect(getter, {
    lazy: true,
    computed: true,
    onTrack,
    onTrigger,
    scheduler
  })
  recordInstanceBoundEffect(runner);

  // 立即执行 runner
  runner();

  // 返回销毁函数
  return () => {
    stop(runner);
    if (instance) {
      remove(instance.effects, runner);
    }
  }
}

问题：在组件中创建的自定义 watcher，在组件销毁的时候会被销毁吗，是如何做的呢？

答：会，通过访问对象属性时的回调函数

问题：动态创建的 watcher 会销毁吗？

答：不会，需要手动清除。

Jackson Mseven
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue3响应式原理-WatchAPI
白开水的博客
04-10 1156
watch的核心就是观测一个响应式数据，当数据变化时通知并执行回调 （那也就是说它本身就是一个effect）
vue3学习（六）watchEffect高级侦听
weixin_70617457的博客
12-16 326
第一个参数就是要运行的副作用函数。这个副作用函数的参数也是一个函数，用来注册清理回调。清理回调会在该副作用下一次执行前被调用，可以用来清理无效的副作用，例如等待中的异步请求 (参见下面的示例)。立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行。，可以用来调整副作用的刷新时机或调试副作用的依赖。
神奇的Vue3--基础篇
FengChen的进阶之路
04-12 797
Vue3基础梳理
Vue3监视属性watch详解(附带详细代码与讲解!!!)
m0_67212141的博客
01-30 7030
watch()默认是懒侦听的，即仅在侦听源发生变化时才执行回调函数。第一个参数是侦听器的源。这个来源可以是以下几种：一个函数, 一个返回值 一个ref 一个响应式对象(reactive定义的) ...或是由以上类型的值组成的数组 第二个参数是一个回调函数, 这个回调函数可接收三个参数: 新值(newValue)、旧值(oldValue)、以及一个副作用清理的回调函数 第三个参数是一个可选的参数是一个对象构成, 如:deep(深度监视)、immediate(创建时立即监听一次)等等...
Vue3源码学习之路-实现watch功能
凉秋秋秋
09-05 288
Vue3源码学习之路-实现watch功能
Vue进阶面试题，源码解读，含Vue3源码解读
01-23
Vue进阶面试题，源码解读，含Vue3源码解读 Vue进阶面试题，源码解读，含Vue3源码解读 Vue进阶面试题，源码解读，含Vue3源码解读 Vue进阶面试题，源码解读，含Vue3源码解读
Vue3 源码实战课程下载（附源码）
11-07
Vue3 源码实战课程下载（附源码），一共54节，课程手把手带你构建自己的 Vue3
vue3 源码解读之 time slicing的使用方法
12-13
今天给大家带来一篇源码解析的文章，emm 是关于 vue3 的，vue3 源码放出后，已经有很多文章来分析它的源码，我觉得很快又要烂大街了，哈哈 不过今天我要解析的部分是已经被废除的 time slicing 部分，这部分源码...
vue3_后台管理系统源码仓库.zip
01-02
Vue3，springboot，element-ui使用技巧，实战应用开发小系统参考资料，源码参考。 详细介绍了一些Qt框架的各种功能和模块，以及如何使用Qt进行GUI开发、网络编程和跨平台应用开发等。 适用于初学者和有经验的开发者...
Vue3-Watch踩坑-watch监听无效
qq_40441489的博客
11-23 6922
从vue3源码分析watch的使用注意事项
vue3的watch监听＜与vue2比较＞
mkbird的博客
05-09 517
文章目录watch监听基本用法监视指定的数据源监视多个数据源清除监视在 watch 中清除无效的异步任务vue2中的watch监听方法格式的监听对象格式的监听 watch监听 watch() 函数用来监视某些数据项的变化，从而触发某些特定的操作，使用之前需要按需导入： import { watch } from 'vue' 基本用法 const count = ref(0) // 定义 watch，只要 count 值变化，就会触发 watch 回调 // watch 会在创建时会自动调用一次 watc
vue3 watch不生效_Vue3新特性详解
weixin_42512613的博客
01-12 3309
Vue3出来有一段时间了，作为明年金三银四的招聘旺季，这个绝对是必考项！加油，就是淦~Vue3 的文档地址: https://v3.vuejs.org/配置 vue3 开发环境Vue cli//安装或者升级npminstall-g@vue/cli#ORyarnglobaladd@vue/cli//保证vuecli版本在4.5.0以上vue--version/...
顺藤摸瓜：用单元测试读懂 vue3 watch 函数
tonylua的博客
06-28 1856
在 Vue 3.x 的 Composition API 中，我们可以用近似 React Hooks 的方式组织代码的复用；ref/reactive/computed 等好用的响应式 AP...
【vue3源码】五、watch源码解析
MAXLZ的博客
07-14 1253
本文将介绍watch、watchEffect、watchSyncEffect、watchPostEffect的具体实现。
[Vue-常见错误]浏览器显示Uncaught runtime errors
一个喜欢什么都研究一下的小小后端程序员
06-09 354
在vue.config.js中配置关闭Uncaught runtime errors显示。
JS中一个dom元素能绑定多少事件
ggq53219的博客
06-10 516
在JavaScript中，一个DOM元素可以绑定的事件数量并没有明确的限制，这主要取决于浏览器的实现和内存限制。然而，在实际应用中，为同一个DOM元素绑定过多的事件监听器可能会导致性能问题，尤其是在事件处理函数执行复杂操作的情况下。总之，虽然JavaScript中DOM元素可以绑定的事件数量没有明确的限制，但在实际应用中应注意避免过度绑定和优化事件处理函数，以确保良好的性能和用户体验。
Web前端网站设计案例：深入剖析创意与技术的完美融合
最新发布
liyrbtqe_66w的博客
06-12 240
在性能优化方面，设计师通过压缩代码、减少HTTP请求、使用CDN等技术手段，提升了网站的加载速度和响应性能，为用户提供了更加流畅的访问体验。综上所述，本Web前端网站设计案例通过视觉设计、用户体验、技术实现、性能优化、创意表达、响应式设计和跨平台兼容等方面的综合考量，成功打造了一款既美观又实用的网站。这个案例充分展示了Web前端设计的魅力和潜力，为未来的网站设计提供了有益的借鉴和启示。设计师通过独特的视觉元素和创意构思，将品牌理念和文化内涵融入其中，使得整个网站在传达信息的同时，也展现出品牌的独特魅力。
vue3如何定义一个组件
Java程序员专栏
06-09 548
注意在子组件的 <template> 中，你使用 {{ propName }} 来显示传递进来的参数值。在父组件中，你使用 :propName="parentMessage" 来将 parentMessage 数据的值绑定到子组件的 propName prop 上。当使用 <script setup> 语法糖时，你不能直接在 <script> 标签内使用 props 选项。在 Vue 3 中，定义一个可以接收参数的组件通常是通过在组件的 props 选项中定义这些参数来完成的。// 其他组件逻辑...
vue3侦听器侦听dom属性
10-09
在Vue 3中，你可以使用`watch`函数来侦听DOM属性的变化。下面是一个示例： ```javascript import { ref, watch } from 'vue'; export default { setup() { const myElement = ref(null); watch(myElement, ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Jackson Mseven

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值