Vue3 中 watch 与 watchEffect 有什么区别?

更新日期: 2022-06-02阅读: 798标签: Vue3
你可以认为他们是同一个功能的两种不同形态,底层的实现是一样的。

  • watch- 显式指定依赖源,依赖源更新时执行回调函数
  • watchEffect - 自动收集依赖源,依赖源更新时重新执行自身

响应式依赖收集

首先先需要了解一下 vue 3 的响应式是怎么工作的。我想很多文章都详细的讲过这个部分了,这里就简单带过一下。这里有个简化版的 ref 的实现:

const ref = (initialValue) => {
  let _value = initialValue

  return {
    get value() {
      track(this, 'value') // 收集依赖
      return _value
    },
    set value() {
      _value = value
      trigger(this, 'value') // 触发依赖
    }
  }
}

访问数据时,track 被呼叫并记录下访问了的字段。而当写入数据时,trigger 被呼叫并触发之前所依赖了这个字段所绑定事件更新(即 effect - computed, watch, watchEffect 底层都是 effect),他们会被记录在一个全局的 WeakMap 中,这里就不展开了,感兴趣可以去看源码。

const counter = ref(1)

console.log(counter.value) // `track()` 被呼叫
counter.value = 2 // `trigger()` 被呼叫

当我们需要函数里的依赖时,只需要记录函数执行的过程中 track()被呼叫的次数(和对应的对象与字段)即可。例如:

const counter = ref(1)

function foo() {
  console.log(counter.value)
}

function collectDeps() {
  startTracking()
  foo() // 在这个过程中,counter 被收集
  stopTracking()
}

这样便可以知道 foo 这个函数依赖了 counter。

Watch

一个 generalised 的 watch api 应该是这样的(其他类似直接接受 ref 或者 reactive 作为参数的其实都是糖)

watch(
  () => { /* 依赖源收集函数 */ },
  () => { /* 依赖源改变时的回调函数 */ }
)

这里的依赖源函数只会执行一次,回调函数会在每次依赖源改变的时候触发,但是并不对回调函数进行依赖收集。也就是说,依赖源和回调函数之间并不一定要有直接关系。

WatchEffect

watchEffect 相当于将 watch 的依赖源和回调函数合并,当任何你有用到的响应式依赖更新时,该回调函数便会重新执行。不同于 watch,watchEffect 的回调函数会被立即执行(即 { immediate: true })

watchEffect(
  () => { /* 依赖源同时是回调函数 */ }
)

以下两种用法在行为上基本等价

watchEffect(
  () => console.log(counter.value)
)

watch(
  () => counter.value,
  () => console.log(counter.value),
  { immediate: true }
)

与 watch 不同的一点是,在 watchEffect 中依赖源会被重复执行,动态新增加的依赖也会被收集,例如

const counter = ref(0)
const enabled = ref(false)

watchEffect(() => {
  if (enabled.value)
    console.log(counter.value)
})

// (以下忽略 nextTick)

// watchEffect 会被立即执行,因为 “enabled“ 为 false, 此时仅收集到 “enabled“ 依赖
counter.value += 1 // 无反应

enabled.value = true // Effect 触发,控制台出 "1"
counter.value += 1 // “counter“ 被作为新的依赖被收集,控制台出 "2"

enabled.value = false // 函数被重新执行,无输出
counter.value += 1 // 函数被重新执行,无输出 (虽然 counter 已经没有用了,但是作为依赖还是会触发函数)

顺带一提,computed 其实类似一个带输出的同步版本的 watchEffect。

什么时候用什么?

推荐在大部分时候用 watch 显式的指定依赖以避免不必要的重复触发,也避免在后续代码修改或重构时不小心引入新的依赖。watchEffect 适用于一些逻辑相对简单,依赖源和逻辑强相关的场景(或者懒惰的场景 )。

作者:Anthony Fu
链接:https://www.zhihu.com/question/462378193/answer/1916657458




链接: https://www.fly63.com/article/detial/11637

vue3.x 新特性 - CompositionAPI

安装 vue-cli3,在使用任何 @vue/composition-api 提供的能力前,必须先通过 Vue.use() 进行安装,安装插件后,您就可以使用新的 Composition API 来开发组件了。

Vue3数据响应系统

Vue3 就是基于 Proxy 对其数据响应系统进行了重写,现在这部分可以作为独立的模块配合其他框架使用。数据响应可分为三个阶段: 初始化阶段 --> 依赖收集阶段 --> 数据响应阶段

快速进阶Vue3.0

在2019.10.5日发布了Vue3.0预览版源码,但是预计最早需要等到 2020 年第一季度才有可能发布 3.0 正式版。新版Vue 3.0计划并已实现的主要架构改进和新功能:

Vue 3 对 Web 应用性能的改进

有关即将发布的 Vue.js 的第 3 个主要版本的信息越来越多。通过下面的讨论,虽然还不能完全确定其所有内容,但是我们可以放心地认为,它将是对当前版本(已经非常出色)的巨大改进。 Vue 团队在改进框架 API 方面做得非常出色

Vue3 中令人兴奋的新功能

用新的 Vue 3 编写的程序效果会很好,但性能并不是最重要的部分。对开发人员而言,最重要的是新版本将会怎样影响我们编写代码的方式。如你所料,Vue 3 带来了许多令人兴奋的新功能。值得庆幸的是

200 行从零实现 vue3

emmm 用半天时间捋顺了 vue3 的源码,再用半天时间写了个 mini 版……我觉得我也是没谁了,vue3 的源码未来一定会烂大街的,我们越早的去复现它,就……emm可以越早的装逼hhh

从 Proxy 到 Vue 源码,深入理解 Vue 3.0 响应系统

10 月 5 日,尤雨溪在 GitHub 开放了 Vue 3.0 处于 pre-alpha 状态的源码,这次 Vue 3.0 Updates 版本的更新,将带来五项重大改进:速度体积、可维护性、面向原生、易用性

Vue 的数据响应式(Vue2 及 Vue3)

从一开始使用 Vue 时,对于之前的 jq 开发而言,一个很大的区别就是基本不用手动操作 dom,data 中声明的数据状态改变后会自动重新渲染相关的 dom。换句话说就是 Vue 自己知道哪个数据状态发生了变化及哪里有用到这个数据需要随之修改。

在Vue2与Vue3中构建相同的组件

Vue 开发团队终于在今天发布了 3.0-beta.1 版本,也就是测试版。通常来说,从测试版到正式版,只会修复 bug,不会引入新功能,或者删改老功能。所以,如果你对新版本非常感兴趣,或者有新项目即将上马,不妨尝试一下新版本

Vue3中的Vue Router初探

对于大多数单页应用程序而言,管理路由是一项必不可少的功能。随着新版本的Vue Router处于Alpha阶段,我们已经可以开始查看下一个版本的Vue中它是如何工作的。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!