vue watcheffect,

　　本文主要介绍在Vue3中使用watchEffect的相关信息。watch和watchEffect都是显示器，只是写法和使用上有区别。本文有详细介绍，有需要的朋友可以参考一下。

前言

　　大家应该对vue2中的watch api比较熟悉。vue2中的vue实例中有一个$watch方法，sfc(sigle文件组件)中有一个watch选项。当一个属性改变时，他可以实现我们想要的行为。例如：

　　当ID改变时，从数据库获取新数据。

　　当属性改变时执行动画。

　　当搜索条件改变时，更新查询的数据。

　　但是除了watch api，vue3还增加了一个watchEffect的api。我们来看看它的用法。

　　我们收集一个userID的依赖，然后当userID发生变化时，我们会执行watchEffect的回调。

　　//例子灵感来源于[文档](https://v3.vuejs.org/api/computed-watch-api.html # watch effect)

　　从“vue”导入{ watchEffect，ref }

　　setup () {

　　const userID=ref(0)

　　watch effect(()=console . log(userID))

　　setTimeout(()={

　　userID.value=1

　　}, 1000)

　　/*

　　*日志

　　* 0

　　* 1

　　*/

　　返回{

　　使用者辩证码

　　}

　　}

与 watch 有什么不同？

　　首先，我们可以从示例代码中看到，watchEffect不需要指定要监控的属性，它会自动收集依赖项。只要在我们的回调中引用了响应式属性，当这些属性发生变化时就会执行这个回调，而watcheffect只能监控指定的属性并做出改变(v3一开始可以同时指定多个属性)。

　　第二点是watch可以得到新值和旧值(更新前的值)，watchEffect不能。

　　第三点是如果watchEffect存在，那么在组件初始化的时候会执行一次收集依赖关系(和computed一样)，然后在收集到的依赖关系发生变化的时候会再次执行这个回调，但是watch并不需要，因为它从一开始就指定了依赖关系。

　　从他们的不同，我们可以看到他们的优点和缺点。并且能够在面对业务需求时做出正确的选择。

watchEffect 进阶

　　停止监听

　　WatchEffect将返回一个函数来停止这种监视，如下所示：

　　const stop=watchEffect(()={

　　/* .*/

　　})

　　//稍后

　　停止()

　　该示例来自带有链接的官方文档。

　　如果watchEffect是在setup或life cycle中注册的，那么当组件被卸载时，它会自动停止。

　　使 side effect 无效

　　什么是副作用？不可预测的接口请求是一个副作用。假设我们现在用一个用户ID来查询用户的详细信息，然后我们监控这个用户ID。当用户ID改变时，我们将发出请求。很简单，用手表就能做到。但是，如果我们的用户ID在请求数据的过程中多次改变，那么我们就会多次请求，最后一次返回的数据会覆盖我们之前返回的所有用户详细信息。这不仅会导致资源浪费，而且无法保证手表回调执行的顺序。我们可以用watchEffect来实现。

　　onInvalidate()

　　OnInvalidate(fn)当watchEffect重新运行或停止时，将执行传入的回调。

　　watchEffect(()={

　　//异步api调用返回操作对象

　　const API call=someasync method(props . userid)

　　onInvalidate(()={

　　//取消异步api的调用。

　　apiCall.cancel()

　　})

　　})

　　借助于on invalid，我们可以对上述情况进行优雅的优化。

总结

　　这篇关于在Vue3中使用watchEffect的文章就到这里了。更多关于Vue3 watchEffect使用的信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。