Vue3中watchEffect侦听器怎么使用

这篇文章主要介绍“Vue3中watchEffect侦听器怎么使用”，在日常操作中，相信很多人在Vue3中watchEffect侦听器怎么使用问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Vue3中watchEffect侦听器怎么使用”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

创新互联坚持“要么做到，要么别承诺”的工作理念，服务领域包括：网站设计制作、成都网站设计、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的路南网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！

watchEffect 侦听器

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

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

• watchEffect 如果存在的话，组件初始化的时候就会自动自行一次，不需要像 watch 一样设置立即执行。

• watch 每次回调之后是可以获取到最新值和上一次的老值，但是 watchEffect 是拿不到的。

• watchEffect 不需要指定监听的属性，他会自动进行依赖收集，只要我们回调中使用了响应式的属性，那么这些属性在变更之后这个回调都会执行，不像 watch 只能监听指定的属性。

• 使用的时候也是需要引入。

• 记住一点哈， watch 可以代替 watchEffect，但是 watchEffect 不能替代 watch。

总结：能用 watch 就不要用 watchEffect。

watchEffect 侦听器使用

首先我们写一个简单的 watchEffect 侦听器。

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

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

watchEffect 监听基本数据

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

比如我们监听 name 的情况。

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

watchEffect 监听复杂数据

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

其实也是一样的哈。

上边代码呢，一个按钮，每次点击让 boy 对象里面的 age 加一操作，然后监听一下 age 的新值

可以看到是完全没有问题的哈！

watchEffect 啥时候执行

上边说过了哈，只要我们回调中使用了响应式的属性，那么这些属性在变更之后这个回调都会执行，不像 watch 只能监听指定的属性。

啥意思呢，简单理解一下，就是回调里面使用了的话他就执行，没用他就不执行。

就像上面的案例，修改 age 的时候，我们在回调里面打印了 age，在回调里面涉及到 age 了，他就会执行，如果我们这次不使用改变的 age，只打印一句话，看一下能不能执行回调哈。

刷新保存，点击按钮修改 age 的值，看一下控制台有没有打印 执行了 三个字。

明白那句话了吗？知道什么时候执行了吧？ OK。

关闭 watchEffect 监听

假设，我们开始使用了 watchEffect 监听，但是我现在不想让他监听了怎么办呢？其实超级简单。

    const res = watchEffect(() => {
      console.log(boy.age);
    });

上边我们不是创建一个 watchEffect 侦听器了吗？关闭只需要调用一下就关了哈。

res()  // 关闭

下面看具体代码。

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

到此，关于“Vue3中watchEffect侦听器怎么使用”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！