广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >一文搞懂Vue3中watchEffect侦听器的使用
  • 827

0
分享到

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

2024-04-02 19:04:59 827人浏览 薄情痞子
摘要

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

上一节我们学习了 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("我是??.");

    function btn() {
      name.value = "??.";
    }

    const res = watchEffect(() => {
      console.log("watchEffect 执行了");
    });

    return { name, btn };
  }
};
</script>

记住 watchEffect 使用也是需要先引入的，不然不好使哈，然后我们保存上面的代码，然后刷新页面看一下执行结果。

我们发现哈，我们一刷新页面，控制台直接打印了我们输出的内容，所以说呢，watchEffect 组件一加载完就会执行。

watchEffect 监听基本数据

我们看到，watchEffect 使用的时候并没有设置监听哪个参数，只有一个回调函数，因为他会自动进行依赖收集，只要我们回调中使用了响应式的属性，那么这些属性在变更之后这个回调都会执行。

比如我们监听 name 的情况。

<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("我是??.");

    function btn() {
      name.value = "??.";
    }

    const res = watchEffect(() => {
      console.log(name.value);
    });

    return { name, btn };
  }
};
</script>

我们在回调函数打印一下 name 的值。

watchEffect 监听复杂数据

上面的案例是用来监听一个基本数据，如果监听一个对象呢？

其实也是一样的哈。

<template>
  <div>
    <h1>{{boy.age}}</h1>
    <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>
    <h1>{{boy.age}}</h1>
    <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>
    <h1>{{boy.age}}</h1>
    <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>

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

好了，watchEffect 侦听器基本有法就这样了，没什么难的，所以说很多人都说，哎哟，这个 watchEffect 没什么屁用啊！确实用处不大，但是也不绝对哈，不然作者就不至于在 watch 之外有整一个 watchEffect 了是吧！ 但是具体什么用，等你做项目过程中，就知道了！但是，能用 watch 解决的，就不要用 watchEffect ！

到此这篇关于一文搞懂vue3中watchEffect侦听器的使用的文章就介绍到这了,更多相关Vue3 watchEffect侦听器内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: 一文搞懂Vue3中watchEffect侦听器的使用

本文链接: https://www.lsjlt.com/news/153949.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
软考高级职称资格查询
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作