Vue3 中 watch 与 watchEffect 区别及用法小结

目录
  • 响应式依赖收集
  • Watch
  • WatchEffect
  • 什么时候用什么？

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

你可以认为他们是同一个功能的两种不同形态，底层的实现是一样的。

  • 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 适用于一些逻辑相对简单，依赖源和逻辑强相关的场景（或者懒惰的场景 ）。

到此这篇关于Vue3 中 watch 与 watchEffect 有什么区别？的文章就介绍到这了,更多相关Vue3 中 watch 与 watchEffect内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue3 watch和watchEffect的使用以及有哪些区别

    1.watch侦听器 引入watch import { ref, reactive, watch, toRefs } from 'vue' 对基本数据类型进行监听----- watch特性: 1.具有一定的惰性lazy 第一次页面展示的时候不会执行,只有数据变化的时候才会执行 2.参数可以拿到当前值和原始值 3.可以侦听多个数据的变化,用一个侦听起承载 setup() { const name = ref('leilei') watch(name, (curVal, prevVal) => {

  • Vue3中watchEffect的用途浅析

    前言 vue2里面的 watch api 大家应该都挺熟悉的了, vue2中vue实例里面有一个 $watch 方法 在sfc(sigle file component)里面有一个 watch 选项.他可以实现在一个属性变更的时候,去执行我们想要的行为.比如: 当ID改变的时候,从数据库里面获取新的数据. 当属性变换的时候执行一个动画. 当搜索条件变更的时候,更新查询到的数据. 但是 vue3 除了 watch api, 还新增了一个 watchEffect 的 api, 我们来看看他的用法.

  • vue3中的watch和watchEffect实例详解

    vue3中的watch和watchEffect实例详解

    目录 首先总结一下两者的区别: 下面是根据上面的第三点做的一些小实验: 总结 闲来无事,比较了一下 vue3 中的 watch 和 watchEffect,总觉得官方文档没咋说清楚,今天就小小实践了一下. 首先总结一下两者的区别: 1.watch 是惰性执行,而 watchEffect 不是,不考虑 watch 的第三个参数配置的情况,watch 在组件第一次执行的时候是不会执行的,只有在之后依赖项变化的时候再执行,而 watchEffect 是在程序执行到此处的时候就立即执行,而后再响应其依赖

  • vue3的watch和watchEffect你了解吗

    vue3的watch和watchEffect你了解吗

    目录 watch 结论1: 结论2 结论3 watchEffect 结论1 结论2watchEffect监听多个数据源 结论3watchEffect停止监听 总结 watch 结论1: watch需要侦听特定的数据源,可以是一个也可以是多个,在页面第一次加载时不运行函数,只有当监听的数据源改变时,才会运行此函数 结论2 watch监听一个对象的属性,首先监听的值要以函数返回值的形式进行传递监听,不同于vue2形式的监听,如下为对象属性5秒后改变,监听函数打印 结论3 监听多个数据源,是把需要监听

  • VUE3中watch和watchEffect的用法详解

    watch和watchEffect都是监听器,但在写法和使用上有所区别. watch在监听 ref 类型时和监听reactive类型时watch函数的写发有所不一样.watch在监听 ref 类型时: <script> import {ref, watch} from 'vue' export default {     setup() {          const state = ref(0)         watch(state, (newValue, oldValue) =>

  • 浅谈Vue3中watchEffect的具体用法

    前言 watchEffect,它立即执行传入的一个函数,同时响应式追踪其依赖,并在其依赖变更时重新运行该函数. 换句话说:watchEffect相当于将watch 的依赖源和回调函数合并,当任何你有用到的响应式依赖更新时,该回调函数便会重新执行.不同于 watch,watchEffect 的回调函数会被立即执行(即 { immediate: true }) 此文主要讲述怎样利用清除副作用使我们的代码更加优雅~ watchEffect的副作用 什么是副作用(side effect),简单的说副作用

  • Vue3 中 watch 与 watchEffect 区别及用法小结

    目录 响应式依赖收集 Watch WatchEffect 什么时候用什么? 大部分时候用 watch 显式的指定依赖以避免不必要的重复触发,也避免在后续代码修改或重构时不小心引入新的依赖.watchEffect 适用于一些逻辑相对简单,依赖源和逻辑强相关的场景. 你可以认为他们是同一个功能的两种不同形态,底层的实现是一样的. watch- 显式指定依赖源,依赖源更新时执行回调函数 watchEffect - 自动收集依赖源,依赖源更新时重新执行自身 响应式依赖收集 首先先需要了解一下 vue 3

  • vue 3 中watch 和watchEffect 的新用法

    目录 一.watch 新用法 1.1.watch 使用语法 1.2.watch 监听多个属性值 1.3.watch 监听引用数据类型 二.watchEffect 三.watch 与 watchEffect 区别和联系 3.1.watch特点 3.2.watch 配置项 3.3.watchEffect 特点 3.4.watch 与 watchEffect 联系 一.watch 新用法 选项式API中,watch 使用 watch:{ mood(curVal,preVal){ console.log

  • vue3中watch和watchEffect实战梳理

    vue3中watch和watchEffect实战梳理

    目录 前言 watch watch监听单个数据 watch监听多个数据 watch监听对象 watch监听对象的某一个值 watchEffect watchEffect副作用 停止监听 区别 前言 watch和watchEffect都是vue3中的监听器,但是在写法和使用上是有区别的,这篇文章主要是介绍一下watch和watchEffect的使用方法以及他们之间的区别. watch watch监听单个数据 <template> <input type="text" v

  • 一文搞懂Vue3中的异步组件defineAsyncComponentAPI的用法

    一文搞懂Vue3中的异步组件defineAsyncComponentAPI的用法

    目录 前言 传递工厂函数作为参数 传递对象类型作为参数 总结 前言 当我们的项目达到一定的规模时,对于某些组件来说,我们并不希望一开始全部加载,而是需要的时候进行加载:这样的做得目的可以很好的提高用户体验. 为了实现这个功能,Vue3中为我们提供了一个方法,即defineAsyncComponent,这个方法可以传递两种类型的参数,分别是函数类型和对象类型,接下来我们分别学习. 传递工厂函数作为参数 defineAsyncComponent方法接收一个工厂函数是它的基本用法,这个工厂函数必须返回

  • Mabitis中的#与$符号区别及用法介绍

    一.介绍 mybatis 中使用 Mapper.xml里面的配置进行 sql 查询,经常需要动态传递参数,例如我们需要根据用户的姓名来筛选用户时,sql 如下: select * from user where name = "Jack"; 上述 sql 中,我们希望 name 后的参数 "Jack" 是动态可变的,即不同的时刻根据不同的姓名来查询用户.在 Mapper.xml文件中使用如下的 sql 可以实现动态传递参数 name: select * from u

  • 详解javascript中var与ES6规范中let、const区别与用法

    随着ES6规范的到来,Js中定义变量的方法已经由单一的 var 方式发展到了 var.let.const 三种之多.var 众所周知,可那俩新来的货到底有啥新特性呢?到底该啥时候用呢?下面就是小编总结出的关于javascript中var与ES6规范中let.const区别详解 我们先来絮叨絮叨 var 方式定义变量有啥 bug ? Js没有块级作用域 请看这样一条规则:在JS函数中的var声明,其作用域是函数体的全部. for(var i=0;i<10;i++){ var a = 'a'; }

  • 详解vue3中setUp和reactive函数的用法

    详解vue3中setUp和reactive函数的用法

    1 setUp的执行时机 我们都知道,现在vue3是可以正常去使用methods的. 但是我们却不可以在setUp中去调用methods中的方法. 为什么了??? 我们先了解一下下面这两个生命周期函数,分别是: beforeCreate 表示data 中的数据还没有初始化,是不可以使用的 Created : data已经被初始化了,可以使用 setUp在beforeCreate 和 Created 这两个函数之间. 是不是就知道为啥setUp中不可以去调用methods中的方法了. 2.setU

  • SQL中JOIN和UNION区别、用法及示例介绍

    1.JOIN和UNION区别 join 是两张表做交连后里面条件相同的部分记录产生一个记录集, union是产生的两个记录集(字段要一样的)并在一起,成为一个新的记录集 . JOIN用于按照ON条件联接两个表,主要有四种: INNER JOIN:内部联接两个表中的记录,仅当至少有一个同属于两表的行符合联接条件时,内联接才返回行.我理解的是只要记录不符合ON条件,就不会显示在结果集内. LEFT JOIN / LEFT OUTER JOIN:外部联接两个表中的记录,并包含左表中的全部记录.如果左表

  • js中arguments,caller,callee,apply的用法小结

    在提到上述的概念之前,首先想说说javascript中函数的隐含参数:arguments Arguments 该对象代表正在执行的函数和调用它的函数的参数. [function.]arguments[n]参数function :选项.当前正在执行的 Function 对象的名字. n :选项.要传递给 Function 对象的从0开始的参数值索引. 说明Arguments是进行函数调用时,除了指定的参数外,还另外创建的一个隐藏对象.Arguments是一个类似数组但不是数组的对象,说它类似数组是

随机推荐