目录
watchEffect 侦听器
watchEffect 侦听器使用
watchEffect 监听基本数据
watchEffect 监听复杂数据
watchEffect 啥时候执行
关闭 watchEffect 监听
首页 web前端 Vue.js Vue3中watchEffect侦听器如何使用

Vue3中watchEffect侦听器如何使用

May 11, 2023 pm 01:58 PM
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(() =&gt; {
      console.log(boy.age);
    });

    res()  // 关闭监听

    return { boy };
  }
};
</script>
登录后复制

保存一下,点击按钮看效果。

以上是Vue3中watchEffect侦听器如何使用的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

vue3+vite:src使用require动态导入图片报错怎么解决 vue3+vite:src使用require动态导入图片报错怎么解决 May 21, 2023 pm 03:16 PM

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

vue3项目中怎么使用tinymce vue3项目中怎么使用tinymce May 19, 2023 pm 08:40 PM

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

Vue3怎么解析markdown并实现代码高亮显示 Vue3怎么解析markdown并实现代码高亮显示 May 20, 2023 pm 04:16 PM

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

Vue3如何实现刷新页面局部内容 Vue3如何实现刷新页面局部内容 May 26, 2023 pm 05:31 PM

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

Vue3复用组件怎么使用 Vue3复用组件怎么使用 May 20, 2023 pm 07:25 PM

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

Vue3中如何使用defineCustomElement定义组件 Vue3中如何使用defineCustomElement定义组件 May 28, 2023 am 11:29 AM

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

怎么用Vue3和Element Plus实现自动导入 怎么用Vue3和Element Plus实现自动导入 May 22, 2023 pm 04:58 PM

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按

Vue3中怎么实现选取头像并裁剪 Vue3中怎么实现选取头像并裁剪 May 29, 2023 am 10:22 AM

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

See all articles