watchEffect深度使用的问题及相应的示例代码

1.中断停止watchEffect的执行：

watchEffect函数返回一个stop函数，用于手动停止watchEffect的执行。

调用stop函数后，watchEffect将不再执行。
示例代码：


javascript
Copy code
import { reactive, watchEffect } from 'vue'
const state = reactive({
  count: 0,
})
const stopEffect = watchEffect(() => {
  console.log(state.count)
})
// 3秒后停止watchEffect的执行
setTimeout(() => {
  stopEffect()
}, 3000)



2.异步操作时的问题：

在watchEffect内部进行异步操作，可能导致watchEffect被多次调用，或者无法正确追踪依赖的变化。

可以使用watch函数来处理异步操作，或将异步操作封装到一个单独的函数中。
示例代码：


javascript
Copy code
import { reactive, watchEffect } from 'vue'
const state = reactive({
  count: 0,
})
watchEffect(() => {
  asyncFunction(state.count)
})
// 异步函数示例
async function asyncFunction(count) {
  const res = await fetch(`https://example.com/api/${count}`)
  console.log(res)
}



3.多个watchEffect的执行顺序：

当有多个watchEffect同时存在时，它们的执行顺序是不确定的。Vue会根据依赖的变化情况来调度执行。

如果需要确保某个watchEffect在其他watchEffect之前执行，可以使用watch函数指定flush选项为pre。
示例代码：


javascript
Copy code
import { reactive, watchEffect, watch } from 'vue'
const state = reactive({
  count: 0,
})
watchEffect(() => {
  console.log('watchEffect 1')
})
watchEffect(() => {
  console.log('watchEffect 2')
})
watch(() => {
  console.log('watch with pre flush')
}, {
  flush: 'pre',
})
state.count = 1 // 执行顺序不确定，可能先执行watch with pre flush，然后执行watchEffect 1和watchEffect 2



4.深度监听对象或数组：

默认情况下，watchEffect只会监听对象或数组的根属性或元素的变化，而不会递归监听嵌套属性或元素的变化。

如果需要深度监听对象或数组的变化，可以使用deep选项。
示例代码：


javascript
Copy code
import { reactive, watchEffect } from 'vue'
const state = reactive({
  obj: {
    name: 'Alice',
  },
})
watchEffect(() => {
  console.log(state.obj)
}, {
  deep: true,
})
state.obj.name = 'Bob' // 会触发watchEffect执行
state.obj.age = 20 // 会触发watchEffect执行

当我们使用watchEffect函数时，我们可以传入一个函数作为参数。这个函数就是我们要执行的一些操作，我们称之为副作用函数。副作用函数中可能会用到一些响应式数据，比如Vue的响应式对象或者状态。watchEffect函数会帮助我们监听这些响应式数据的变化，并在数据变化时自动执行副作用函数。
具体来说，当我们调用watchEffect函数时，它会创建一个响应式的副作用函数，并立即执行一次副作用函数。在副作用函数执行过程中，如果有响应式数据被访问到，watchEffect函数会记录下来，以便后续当这些数据发生变化时，可以重新执行副作用函数。
当我们修改了被监听的响应式数据时，watchEffect函数会自动检测到数据的变化，并再次执行副作用函数。这样，我们就可以在副作用函数中实现一些与数据变化相关的逻辑，比如更新界面、发送请求等操作。
另外，watchEffect函数还提供了一个返回值，这个返回值是一个函数。我们可以调用这个函数来手动停止副作用函数的执行。这在某些场景下是很有用的，比如当我们不再需要监听数据变化时，可以调用这个函数来取消监听。
总而言之，watchEffect函数能够帮助我们监听响应式数据的变化，并在数据变化时自动执行副作用函数。这样，我们可以方便地实现对数据变化的响应和相关操作。