Vue3中watchEffect侦听器如何使用

发布时间:2022-07-12 10:17:24 作者:iii
来源:亿速云 阅读:234

本篇内容介绍了“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侦听器如何使用”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!

推荐阅读:
  1. Vue2和Vue3怎么使用watch侦听器
  2. vue3中watch和watchEffect怎么使用

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue3 watcheffect

上一篇:C++中的Z字形变换问题怎么解决

下一篇:Vue3中shallowRef和shallowReactive如何使用

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》