Vue3的watchEffect的妙用，与watch的区别-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue3的watchEffect的妙用，与watch的区别。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言

在Vue3中，引入了Composition API，其中的watchEffect()函数是一个非常强大和灵活的工具，用于处理响应式数据的变化，使得项目更加弹性和灵活。它与watch有所不同，本文将介绍watchEffect()的定义、特点、与watch的区别以及使用时的注意事项。

一、定义

watchEffect()函数用于创建一个自动追踪依赖的响应式副作用。它会在初始化时会立即执行一次，并自动追踪在回调函数中使用的所有响应式数据，在这些数据发生变化时重新运行回调函数。

例如，在每当 todoId 的引用发生变化时使用侦听器来加载一个远程资源，如果用watch，是这么写：

<template>
  <div>Test</div>
</template>

<script setup>
  import { ref, watch } from 'vue'
  const todoId = ref(1)
  const data = ref(null)

  watch(
    todoId,
    async () => {
      const response = await fetch(`https://jsonplaceholder.typicode.com/todos/${todoId.value}`)
      data.value = await response.json()
      console.log(data.value)
    },
    { immediate: true }
  )
</script>

打印：

Vue3的watchEffect的妙用，与watch的区别,vue,vue.js,前端,javascript

但是用了watchEffect()就可以简化为：

<template>
  <div>Test</div>
</template>

<script setup>
  import { ref, watchEffect } from 'vue'
  const todoId = ref(1)
  const data = ref(null)

  watchEffect(async () => {
    const response = await fetch(`https://jsonplaceholder.typicode.com/todos/${todoId.value}`)
    data.value = await response.json()
    console.log(data.value)
  })
</script>

打印：

Vue3的watchEffect的妙用，与watch的区别,vue,vue.js,前端,javascript

两者都立即打印了data。但下面的例子中，回调会立即执行，不需要指定 immediate: true。在执行期间，它会自动追踪 todoId.value 作为依赖（和计算属性类似）。每当 todoId.value 变化时，回调会再次执行。有了 watchEffect()，我们不再需要明确传递 todoId 作为源值。

从这个角度来看，watchEffect()的作用类似于Vue2中的computed，即依赖项发生变化，自己也跟着改变。但与computed不同，watchEffect()没有返回值，而是直接执行回调函数。

二、特点

watchEffect()会自动追踪其回调函数中使用的所有响应式数据，并在这些数据发生变化时重新运行回调函数。这使得我们无需手动指定要监听的具体属性，减少了代码的冗余。

对于这种只有一个依赖项的例子来说，watchEffect() 的好处相对较小。但是对于有多个依赖项的侦听器来说，使用 watchEffect() 可以消除手动维护依赖列表的负担。

此外，如果你需要侦听一个嵌套数据结构中的几个属性，watchEffect() 可能会比深度侦听器更有效，因为它将只跟踪回调中被使用到的属性，而不是递归地跟踪所有的属性。

多个依赖项例子：

<template>
  <div>Test</div>
</template>

<script setup>
  import { reactive } from 'vue'
  const state = reactive({
    count: 0,
    name: 'John',
    age: 25
  })

  // 使用watchEffect()监听count和name的变化
  watchEffect(() => {
    console.log('count or name changed:', state.count, state.name)
  })

  // 模拟count和name变化
  setTimeout(() => {
    state.count = 1 // 输出'count or name changed: 1 John'
    state.name = 'Alice' // 输出'count or name changed: 1 Alice'
  }, 1000)
</script>

打印：

Vue3的watchEffect的妙用，与watch的区别,vue,vue.js,前端,javascript

深度依赖例子：

<template>
  <div>Test</div>
</template>

<script setup>
  import { reactive, watchEffect } from 'vue'
  const state = reactive({
    person: {
      name: 'John',
      age: 25
    },
    todos: [
      { text: 'Task 1', completed: false },
      { text: 'Task 2', completed: true },
      { text: 'Task 3', completed: false }
    ]
  })

  // 使用watchEffect()监听person对象中name和age的变化
  watchEffect(() => {
    console.log('person changed:', state.person.name, state.person.age)
  })

  // 模拟person中name和age的变化
  setTimeout(() => {
    state.person.name = 'Alice' // 输出'person changed: Alice 25'
    state.person.age = 30 // 输出'person changed: Alice 30'
  }, 1000)
</script>

打印：

Vue3的watchEffect的妙用，与watch的区别,vue,vue.js,前端,javascript

三、与watch的区别

1. 监听方式不同：watchEffect()是自动追踪所有使用的响应式数据，而watch需要手动指定要监听的特定属性。

2. 监听粒度不同：watchEffect()监听的是响应式数据的整个变化，而watch可以侦听指定的属性或表达式的变化。

3. 计算属性处理方式不同：对于计算属性，watchEffect()会自动依赖于计算属性使用到的响应式数据，而watch需要手动指定计算属性为监听目标。

四、注意事项

1. 避免过度监听：由于watchEffect()会追踪使用到的所有响应式数据，因此要确保在回调函数中只使用必要的响应式数据，避免造成不必要的渲染开销。

2. 异步操作需谨慎处理：由于watchEffect()会立即执行回调函数，如果在回调函数中进行异步操作，需要谨慎处理，以免导致意外行为或副作用。

<script setup>
import { watchEffect } from 'vue'

// 它会自动停止
watchEffect(() => {})

// ...这个则不会！
setTimeout(() => {
  watchEffect(() => {})
}, 100)
</script>

3. 避免无限循环：当在watchEffect()的回调中修改响应式数据时，可能会导致无限循环。要避免此问题，可以使用watch()函数并设置immediate: true选项，或者使用ref来存储临时数据。文章来源地址https://www.toymoban.com/news/detail-593762.html

到了这里，关于Vue3的watchEffect的妙用，与watch的区别的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！