说说vue3的vue2中watchEffect中的watchapi大家应该都不陌生了。vue2中的vue实例中有$watch方法，sfc（singlefilecomponent）中有watch选项。当一个属性改变时，他可以实现我们想要的行为。例如：当ID发生变化时，从数据库中获取新的数据。当属性转换时执行动画。当搜索条件改变时，更新查询的数据。但是除了watchapi，vue3还增加了一个watchEffectapi，我们来看看它的用法。我们收集了一个userID依赖，当userID发生变化时，会执行watchEffect回调。//受[文档](https://v3.vuejs.org/api/computed-watch-api.html#watcheffect)启发的示例import{watchEffect,ref}from'vue'setup(){constuserID=ref(0)watchEffect(()=>console.log(userID))setTimeout(()=>{userID.value=1},1000)/**LOG*0*1*/return{userID}}withwatch是什么不同之处？从示例代码中我们首先可以看出，watchEffect不需要指定监听的属性，它会自动收集依赖，只要我们在回调中引用响应式属性，那么当这些属性发生变化时，回调就会被执行，而watch只能监视指定的属性并进行更改（从v3开始，可以同时指定多个）。第二点，watch可以获取新值和旧值（更新前的值），watchEffect获取不到。第三点，如果watchEffect存在，会在组件初始化时执行一次收集依赖（同computed），然后收集到的依赖发生变化，再次执行这个回调，watch不需要，因为他一开始就指定了依赖关系。从它们的区别中，我们可以看出它们的优点和缺点。并能在业务需求面前做出正确的选择。watchEffect高级停止监听watchEffect会返回一个停止监听的函数，如下：conststop=watchEffect(()=>{/*...*/})//laterstop()的例子来自官方文档，上面有一个链接。如果watchEffect在setup或lifecycle中被注册，当组件被卸载时它会自动停止。Invalidatethesideeffect什么是副作用，不可预知的接口请求是副作用，假设我们现在用一个用户ID去查询用户的详细信息，然后我们监听这个用户ID，当用户ID发生变化的时候，我们会是发起请求非常简单，你可以用手表来完成。但是如果我们的用户ID在请求数据的过程中发生了多次变化，那么我们就会发起多次请求，最后一次返回的数据会覆盖我们之前返回的所有用户详情。这样不仅造成资源浪费，而且不能保证watch回调的执行顺序。使用watchEffect我们可以做到。onInvalidate()中传入的回调onInvalidate(fn)会在watchEffect重新运行或watchEffect停止时执行watchEffect(()=>{//异步api调用，返回一个操作对象constapiCall=someAsyncMethod(props.userID)onInvalidate(()=>{//取消异步api调用apiCall.cancel()})})借助onInvalidate，我们可以对上述情况进行更优雅的优化。介绍完了。v3值是预期的。
