Vue3中watchEffect侦听器如何使用
watchEffect 侦听器
其实我觉得这个玩意儿哈,不用也罢,啊哈哈哈哈哈!
怎么说呢,你可以理解成 watch 和 watchEffect 这两个玩意儿的功能是一样的。
watch
:显示指定依赖源,依赖源更新时执行回调函数。watchEffect
:自动收集依赖源,依赖源更新时候重新执行自身。
watchEffect 如果存在的话,组件初始化的时候就会自动自行一次,不需要像 watch 一样设置立即执行。
watch 每次回调之后是可以获取到最新值和上一次的老值,但是 watchEffect 是拿不到的。
watchEffect 不需要指定监听的属性,他会自动进行依赖收集,只要我们回调中使用了响应式的属性,那么这些属性在变更之后这个回调都会执行,不像 watch 只能监听指定的属性。
使用的时候也是需要引入。
记住一点哈, watch 可以代替 watchEffect,但是 watchEffect 不能替代 watch。
总结:能用 watch 就不要用 watchEffect。
watchEffect 侦听器使用
首先我们写一个简单的 watchEffect 侦听器。
<template> <div> <h2>{{name}}</h2> <button @click="btn">修改name</button> </div> </template> <script> import { ref, watchEffect } from "vue"; export default { name: "App", setup() { const name = ref("我是????????."); function btn() { name.value = "????????."; } const res = watchEffect(() => { console.log("watchEffect 执行了"); }); return { name, btn }; } }; </script>
记住 watchEffect 使用也是需要先引入的,不然不好使哈,然后我们保存上面的代码,然后刷新页面看一下执行结果。
我们发现哈,我们一刷新页面,控制台直接打印了我们输出的内容,所以说呢,watchEffect 组件一加载完就会执行。
watchEffect 监听基本数据
我们看到,watchEffect 使用的时候并没有设置监听哪个参数,只有一个回调函数,因为他会自动进行依赖收集,只要我们回调中使用了响应式的属性,那么这些属性在变更之后这个回调都会执行。
比如我们监听 name 的情况。
<template> <div> <h2>{{name}}</h2> <button @click="btn">修改name</button> </div> </template> <script> import { ref, watchEffect } from "vue"; export default { name: "App", setup() { const name = ref("我是????????."); function btn() { name.value = "????????."; } const res = watchEffect(() => { console.log(name.value); }); return { name, btn }; } }; </script>
我们在回调函数打印一下 name 的值。
watchEffect 监听复杂数据
上面的案例是用来监听一个基本数据,如果监听一个对象呢?
其实也是一样的哈。
<template> <div> <h2>{{boy.age}}</h2> <button @click="boy.age++">修改name</button> </div> </template> <script> import { ref, watchEffect, reactive } from "vue"; export default { name: "App", setup() { const boy = reactive({ name: "我是????????.", age: 10 }); const res = watchEffect(() => { console.log(boy.age); }); return { boy }; } }; </script>
上边代码呢,一个按钮,每次点击让 boy 对象里面的 age 加一操作,然后监听一下 age 的新值
可以看到是完全没有问题的哈!
watchEffect 啥时候执行
上边说过了哈,只要我们回调中使用了响应式的属性,那么这些属性在变更之后这个回调都会执行,不像 watch 只能监听指定的属性。
啥意思呢,简单理解一下,就是回调里面使用了的话他就执行,没用他就不执行。
就像上面的案例,修改 age 的时候,我们在回调里面打印了 age,在回调里面涉及到 age 了,他就会执行,如果我们这次不使用改变的 age,只打印一句话,看一下能不能执行回调哈。
<template> <div> <h2>{{boy.age}}</h2> <button @click="boy.age++">修改name</button> </div> </template> <script> import { ref, watchEffect, reactive } from "vue"; export default { name: "App", setup() { const boy = reactive({ name: "我是????????.", age: 10 }); const res = watchEffect(() => { console.log("执行了"); }); return { boy }; } }; </script>
刷新保存,点击按钮修改 age 的值,看一下控制台有没有打印 执行了
三个字。
明白那句话了吗?知道什么时候执行了吧? OK。
关闭 watchEffect 监听
假设,我们开始使用了 watchEffect 监听,但是我现在不想让他监听了怎么办呢?其实超级简单。
const res = watchEffect(() => { console.log(boy.age); });
上边我们不是创建一个 watchEffect 侦听器了吗?关闭只需要调用一下就关了哈。
res() // 关闭
下面看具体代码。
<script> import { ref, watchEffect, reactive } from "vue"; export default { name: "App", setup() { const boy = reactive({ name: "我是????????.", age: 10 }); const res = watchEffect(() => { console.log(boy.age); }); res() // 关闭监听 return { boy }; } }; </script>{{boy.age}}
保存一下,点击按钮看效果。
以上是Vue3中watchEffect侦听器如何使用的详细内容。更多信息请关注PHP中文网其他相关文章!

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

vue3+vite:src使用require动态导入图片报错和解决方法vue3+vite动态的导入多张图片vue3如果使用的是typescript开发,就会出现require引入图片报错,requireisnotdefined不能像使用vue2这样imgUrl:require(’…/assets/test.png’)导入,是因为typescript不支持require所以用import导入,下面介绍如何解决:使用awaitimport

tinymce是一个功能齐全的富文本编辑器插件,但在vue中引入tinymce并不像别的Vue富文本插件一样那么顺利,tinymce本身并不适配Vue,还需要引入@tinymce/tinymce-vue,并且它是国外的富文本插件,没有通过中文版本,需要在其官网下载翻译包(可能需要翻墙)。1、安装相关依赖npminstalltinymce-Snpminstall@tinymce/tinymce-vue-S2、下载中文包3.引入皮肤和汉化包在项目public文件夹下新建tinymce文件夹,将下载的

Vue实现博客前端,需要实现markdown的解析,如果有代码则需要实现代码的高亮。Vue的markdown解析库有很多,如markdown-it、vue-markdown-loader、marked、vue-markdown等。这些库都大同小异。这里选用的是marked,代码高亮的库选用的是highlight.js。具体实现步骤如下:一、安装依赖库在vue项目下打开命令窗口,并输入以下命令npminstallmarked-save//marked用于将markdown转换成htmlnpmins

想要实现页面的局部刷新,我们只需要实现局部组件(dom)的重新渲染。在Vue中,想要实现这一效果最简便的方式方法就是使用v-if指令。在Vue2中我们除了使用v-if指令让局部dom的重新渲染,也可以新建一个空白组件,需要刷新局部页面时跳转至这个空白组件页面,然后在空白组件内的beforeRouteEnter守卫中又跳转回原来的页面。如下图所示,如何在Vue3.X中实现点击刷新按钮实现红框范围内的dom重新加载,并展示对应的加载状态。由于Vue3.X中scriptsetup语法中组件内守卫只有o

前言无论是vue还是react,当遇到多处重复代码的时候,我们都会想着如何复用这些代码,而不是一个文件里充斥着一堆冗余代码。实际上,vue和react都可以通过抽组件的方式来达到复用,但如果遇到一些很小的代码片段,你又不想抽到另外一个文件的情况下,相比而言,react可以在相同文件里面声明对应的小组件,或者通过renderfunction来实现,如:constDemo:FC=({msg})=>{returndemomsgis{msg}}constApp:FC=()=>{return(

使用Vue构建自定义元素WebComponents是一组web原生API的统称,允许开发者创建可复用的自定义元素(customelements)。自定义元素的主要好处是,它们可以在使用任何框架,甚至是在不使用框架的场景下使用。当你面向的最终用户可能使用了不同的前端技术栈,或是当你希望将最终的应用与它使用的组件实现细节解耦时,它们会是理想的选择。Vue和WebComponents是互补的技术,Vue为使用和创建自定义元素提供了出色的支持。你可以将自定义元素集成到现有的Vue应用中,或使用Vue来构

1前言1.1目的ElementPlus使用按需引入,大大缩小打包后的文件大小1.2最终效果自动生成components.d.ts文件,并在文件中引入ElementPlus组件自动生成components.d.ts文件,并在文件中引入ElementPlusAPI2准备工作安装ElementPlus#选择一个你喜欢的包管理器#NPM$npminstallelement-plus--save#Yarn$yarnaddelement-plus#pnpm$pnpminstallelement-plus3按

最终效果安装VueCropper组件yarnaddvue-cropper@next上面的安装值针对Vue3的,如果时Vue2或者想使用其他的方式引用,请访问它的npm官方地址:官方教程。在组件中引用使用时也很简单,只需要引入对应的组件和它的样式文件,我这里没有在全局引用,只在我的组件文件中引入import{userInfoByRequest}from'../js/api'import{VueCropper}from'vue-cropper&
