一文搞懂Vue3中watchEffect侦听器的使用

目录
  • watchEffect 侦听器
  • watchEffect 侦听器使用
  • watchEffect 监听基本数据
  • watchEffect 监听复杂数据
  • watchEffect 啥时候执行
  • 关闭 watchEffect 监听

上一节我们学习了 watch 侦听器的基础用法，用来监听页面数据的变化，那么今天呢，我们来学习一下 watch 侦听器的好兄弟 watchEffect 侦听器。这个相对来说比较简单，用的不是很多，当然了，根据自己的项目情况自行决定使用。这个就不详细说了，简单过一下子。

watchEffect 侦听器

其实我觉得这个玩意儿哈，不用也罢，啊哈哈哈哈哈！

怎么说呢，你可以理解成 watch 和 watchEffect 这两个玩意儿的功能是一样的。

watch：显示指定依赖源，依赖源更新时执行回调函数。
watchEffect：自动收集依赖源，依赖源更新时候重新执行自身。

  • watchEffect 如果存在的话，组件初始化的时候就会自动自行一次，不需要像 watch 一样设置立即执行。
  • watch 每次回调之后是可以获取到最新值和上一次的老值，但是 watchEffect 是拿不到的。
  • watchEffect 不需要指定监听的属性，他会自动进行依赖收集，只要我们回调中使用了响应式的属性，那么这些属性在变更之后这个回调都会执行，不像 watch 只能监听指定的属性。
  • 使用的时候也是需要引入。
  • 记住一点哈， watch 可以代替 watchEffect，但是 watchEffect 不能替代 watch。

总结：能用 watch 就不要用 watchEffect。

watchEffect 侦听器使用

首先我们写一个简单的 watchEffect 侦听器。

<template>
  <div>
    <h1>{{name}}</h1>
    <button @click="btn">修改name</button>
  </div>
</template>

<script>
import { ref, watchEffect } from "vue";
export default {
  name: "App",
  setup() {
    const name = ref("我是
赞 (0)

相关推荐

  • Vue3中watchEffect的用途浅析

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

  • Vue3中的 computed,watch,watchEffect的使用方法

    Vue3中的 computed,watch,watchEffect的使用方法

    目录 一.computed 二.watch vu2 的写法 Vue3 中这样写 三.watchEffect 一.computed <template> 姓:<input v-model="person.firstName"><br/><br/> 名:<input v-model="person.lastName"><br/><br/> <span>全名:{{person.

  • 浅谈Vue3中watchEffect的具体用法

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

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

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

  • 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 侦听器使用 watchEffect 监听基本数据 watchEffect 监听复杂数据 watchEffect 啥时候执行 关闭 watchEffect 监听 上一节我们学习了 watch 侦听器的基础用法,用来监听页面数据的变化,那么今天呢,我们来学习一下 watch 侦听器的好兄弟 watchEffect 侦听器.这个相对来说比较简单,用的不是很多,当然了,根据自己的项目情况自行决定使用.这个就不详细说了,简单过一下子. watc

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

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

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

  • 一文搞懂Vue3中toRef和toRefs函数的使用

    目录 toRef 函数 toRef 函数使用 ref 函数验证 toRefs 函数 toRefs 函数使用 总结 上一篇博文介绍了vue3 里面的 ref 函数和 reactive 函数,实现响应式数据,今天主要来说一下 toRef 函数和 toRefs 函数的基本使用. toRef 函数 通过上一篇博客,我们知道,ref 函数可以创建一个响应式的数据,那 toRef 函数同样也是创建一个响应式的数据,那么他们之间的区别是什么呢? 首先一点,ref 函数他的本质其实是去拷贝一份数据,脱离了与源数

  • 一文搞懂Vue3.2中setup语法糖使用

    目录 前言 一.如何使用setup语法糖 二.data数据的使用 三.method方法的使用 四.watchEffect的使用 五.watch的使用 六.computed计算属性的使用 七.props父子传值的使用 八.emit子父传值的使用 九.获取子组件ref变量和defineExpose暴露 十.路由useRoute和useRouter的使用 十一.store仓库的使用 十二.await 的支持 十三.provide 和 inject 祖孙传值 前言 提示:Vue3.2 版本开始才能使用语

  • 一文搞懂JavaScript中的内存泄露

    一文搞懂JavaScript中的内存泄露

    目录 什么是内存泄漏 怎么检测内存泄漏 Performance Memory 内存泄漏的场景 垃圾回收算法 引用计数 循环引用 标记清除 闭包是内存泄漏吗 总结 以前我们说的内存泄漏,通常发生在后端,但是不代表前端就不会有内存泄漏.特别是当前端项目变得越来越复杂后,前端也逐渐称为内存泄漏的高发区.本文就带你认识一下Javascript的内存泄漏. 什么是内存泄漏 什么是内存?内存其实就是程序在运行时,系统为其分配的一块存储空间.每一块内存都有对应的生命周期: 内存分配:在声明变量.函数时,系统分

  • 一文搞懂ES6中的Map和Set

    Map Map对象保存键值对.任何值(对象或者原始值) 都可以作为一个键或一个值.构造函数Map可以接受一个数组作为参数. Map和Object的区别 •一个Object 的键只能是字符串或者 Symbols,但一个Map 的键可以是任意值. •Map中的键值是有序的(FIFO 原则),而添加到对象中的键则不是. •Map的键值对个数可以从 size 属性获取,而 Object 的键值对个数只能手动计算. •Object 都有自己的原型,原型链上的键名有可能和你自己在对象上的设置的键名产生冲突.

  • 一文搞懂Java中的反射机制

    前一段时间一直忙,所以没什么时间写博客,拖了这么久,也该更新更新了.最近看到各种知识付费的推出,感觉是好事,也是坏事,好事是对知识沉淀的认可与推动,坏事是感觉很多人忙于把自己的知识变现,相对的在沉淀上做的实际还不够,我对此暂时还没有什么想法,总觉得,慢慢来,会更快一点,自己掌握好节奏就好. 好了,言归正传. 反射机制是Java中的一个很强大的特性,可以在运行时获取类的信息,比如说类的父类,接口,全部方法名及参数,全部常量和变量,可以说类在反射面前已经衣不遮体了(咳咳,这是正规车).先举一个小栗子

  • 教你一文搞懂Kotlin中的Jvm注解

    JvmOverloads 创建一个kotlin的类 class Student(val name: String, val sex: Int = 1, val age: Int = 18) 可以看出来 这个构造函数的参数是有默认值的,kotlin的特性对吧,我们在使用的时候可以方便的使用,比如: val student = Student("wuyue") val student2 = Student("wuyue", age = 18) 但是这个特性如果你用jav

  • 一文搞懂Python中pandas透视表pivot_table功能详解

    一文搞懂Python中pandas透视表pivot_table功能详解

    目录 一.概述 1.1 什么是透视表? 1.2 为什么要使用pivot_table? 二.如何使用pivot_table 2.1 读取数据 2.2Index 2.3Values 2.4Aggfunc 2.5Columns 一文看懂pandas的透视表pivot_table 一.概述 1.1 什么是透视表? 透视表是一种可以对数据动态排布并且分类汇总的表格格式.或许大多数人都在Excel使用过数据透视表,也体会到它的强大功能,而在pandas中它被称作pivot_table. 1.2 为什么要使用

  • 一文搞懂Python中Pandas数据合并

    一文搞懂Python中Pandas数据合并

    目录 1.concat() 主要参数 示例 2.merge() 参数 示例 3.append() 参数 示例 4.join() 示例 数据合并是数据处理过程中的必经环节,pandas作为数据分析的利器,提供了四种常用的数据合并方式,让我们看看如何使用这些方法吧! 1.concat() concat() 可用于两个及多个 DataFrame 间行/列方向进行内联或外联拼接操作,默认对行(沿 y 轴)取并集. 使用方式 pd.concat( objs: Union[Iterable[~FrameOr

随机推荐