Vue3 中常用的 Composition(组合)API-watchEffect() 函数

watchEffect()函数

watchEffect()函数是 vue3 中的一个新的函数，Effect 翻译过来有反应的意思，所以又叫监视反应

它也可以做监视，但是它最大的特点就是不说监视谁，直接写回调

下面通过案例演示下 watchEffect 的简单使用

引用 watchEffect

和其他函数一样，在 vue3 中想要使用，就必须先定义

  // 引入watchEffect函数  import watchEffect} from "vue";

编写 watchEffect

它最大的特点就是不说监视谁，直接写回调，而且没有 newValue 和 oldValue 这两个参数

可以发现一上来就执行了，但是谁也每被监视

watchEffect 很智能，它会通过函数体发现用到了哪个属性，用到了哪个属性才会监视哪个属性，并且会自动解析多级对象

这样就能帮助我们写一些复杂的逻辑，只要监测到改变哪个属性，就能执行哪些逻辑或者函数，可以提高我们的开发效率

watchEffect 函数总结

• watch 的套路是：既要指明监视的属性，也要指明监视的回调。

• watchEffect 的套路是：不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性。

• watchEffect 有点像 computed：

• 但 computed 注重的计算出来的值（回调函数的返回值），所以必须要写返回值。

• 而 watchEffect 更注重的是过程（回调函数的函数体），所以不用写返回值。