Vue WatchEffect函数创建高级侦听器

Vue的watchEffect函数是一个非常强大的 API。它允许您将一个函数作为响应式侦听器，而不必实例化一个新的Vue实例或单独定义一个侦听器回调函数。本文将从以下几个方面详细讲解watchEffect函数的使用：

1. watchEffect函数的语法和用法
2. watchEffect函数的工作原理和使用场景
3. watchEffect函数的示例说明

语法和用法

watchEffect函数接收一个函数作为参数，该函数的内容会在初始化时执行一次，并在内容中使用到的响应式数据发生变化时再次执行。其基本语法如下：

watchEffect(() => {
  // your code
})

当侦听到响应式数据变化时，watchEffect函数会自动执行函数。它的执行过程是异步的，会在一次事件循环中执行，这样能够保证页面性能不会受到影响。

工作原理和使用场景

watchEffect函数的工作原理类似于Vue的computed。当响应式变量发生变化时，会自动重新计算依赖该变量的函数。但是，computed函数需要显式地定义依赖项，而watchEffect函数可以自动依赖响应式变量。

因此，watchEffect函数非常适合用于一次性的数据获取、数据更新、副作用执行等场景，它是一个轻量级的方式来创建高级的侦听器。

示例说明

下面是两个使用watchEffect函数的示例：

示例1：一次性的数据获取

您可以使用watchEffect函数来获取一些数据，而无需实例化新的Vue实例或定义新的侦听器回调函数。例如，在以下示例中，我们可以使用axios来获取数据，并在获取数据后更新组件状态：

import { reactive, watchEffect } from 'vue'
import axios from 'axios'

export default {
  setup() {
    const state = reactive({
      data: []
    })

    watchEffect(() => {
      axios.get('/api/data').then(res => {
        state.data = res.data
      })
    })

    return {
      data: state.data
    }
  }
}

示例2：一次性的副作用执行

您也可以使用watchEffect函数来执行一些副作用代码，例如在组件挂载时自动执行一些函数。例如，在以下示例中，我们可以使用resizeObserver来监测元素大小变化，并在变化时执行回调函数：

  import { watchEffect } from 'vue'

  export default {
    mounted() {
      const observer = new ResizeObserver(() => {
        console.log('Element has been resized')
      })

      observer.observe(this.$el)

      watchEffect(() => {
        observer.disconnect()
        observer.observe(this.$el)
      })
    }
  }

在这个示例中，我们使用watchEffect函数来在元素大小发生变化时重新连接元素的resizeObserver。

总结：

watchEffect函数允许您创建一个响应式侦听器，而不必实例化一个新的Vue实例或单独定义一个侦听器回调函数。它非常适合用于一次性的数据获取、数据更新、副作用执行等场景。在使用watchEffect函数时，您只需要定义一个函数即可，在该函数中使用到的所有响应式变量都将自动成为侦听器的依赖项。