vue3提供的watchEffect提升编码效率

前言

Vue3中引入了一个新的Composition API函数：watchEffect()，用于自动观察响应式依赖，并在依赖变化时执行副作用，这个API时为了更加方便地处理数据变动响应的情况而设计的！较之前的watch相比，watchEffect更加简洁和主动，因为它不需要指定具体的数据源来观察，而是自动追踪执行过程中所访问的所有响应式状态。关于该API的用法如下：

import { ref, watchEffect } from 'vue'
const count = ref(0)
cosnt stopWatcher = watchEffect(() => {
  // 当count.value变化时，这个函数将自动重新执行！
  console.info(count.value)
})
// 这个watchEffect()函数一般返回一个待停止的函数地址，因此我们可以直接通过调用该返回函数即可停止监听操作！
stopWatcher()

🌟 上述提及到了关于在依赖变化时自动执行副作用，也就是响应式变量所在的函数，当响应式变化时，所在的函数将自动重新执行，然后我们也可以根据实际情况随时停止这个监听动作！

较之前的watch的区别

watch: 需要明确制定要观察的数据源，可以时一个getter函数，也可以是一个ref或者reactive对象的键数组，更适用于当我们需要对比变化前后的值，或者需要在变化的值达到某个特定条件时响应的情况；
watchEffect: 无需指定待观察的数据源，它会自动跟踪当前“副作用函数”所访问到的所有的响应式数据的变化，如果我们不需要对比之前的值的话，或者不需要查看多个数据源影响副作用时，考虑使用watchEffect

使用须知

虽然watchEffect提供了强大的自动跟踪能力，但这也意味者我们需要留意只在必要时访问响应式状态，以避免不必要的副作用执行，比如如果某个响应式变量的变化实际上对当前的副作用没有影响，那么最好避免在watchEffect回调中访问到！
在使用watchEffect的时候，考虑到响应式变量的变化可能会频繁地出发副作用函数的重新执行，可能需要结合截流或者防抖技术来控制执行的频率，比如当输入框的内容改变时，自动根据变化的内容来触发一些API请求操作！

import { ref, watchEffect } from 'vue'
import { debounce } from 'lodash'
const searchTxt = ref('')
const debounceAPI = debounce((value) => {
  console.info(`value 的值变更为: ${value}了，即将发起新的网络请求操作`)
}, 1000)
watchEffect(() => {
  debounceAPI(searchTxt.value)
})