文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Vue3中watchEffect侦听器如何使用

2023-07-02 16:49

关注

本篇内容介绍了“Vue3中watchEffect侦听器如何使用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

watchEffect 侦听器

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

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

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

总结:能用 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()  // 关闭

下面看具体代码。

<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);    });    res()  // 关闭监听    return { boy };  }};</script>

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

“Vue3中watchEffect侦听器如何使用”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站,小编将为大家输出更多高质量的实用文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯