Vue3中watch和watchEffect的异同及其应用场景

在Vue3中，watch和watchEffect都是用于响应式数据的监听和处理的API，它们具有不同的特性和使用场景。本文将比较watch和watchEffect的区别，并提供一些使用示例，帮助您更好地理解和使用这两个API。

watch和watchEffect的区别

watch和watchEffect的主要区别在于它们的执行时机不同。watch是惰性执行的，这意味着它只会在响应式数据发生改变时执行，而watchEffect是立即执行的，这意味着它会在组件挂载时立即执行，然后在响应式数据发生改变时再次执行。

watch和watchEffect的使用场景

watch通常用于监听特定响应式数据的变化，并在数据发生变化时执行相应的操作。例如，您可以使用watch来监听表单输入的变化，并在输入发生变化时更新表单的验证状态。

watchEffect通常用于在组件挂载时执行一次性操作，或者在响应式数据发生变化时执行需要立即执行的操作。例如，您可以使用watchEffect来在组件挂载时获取数据，或者在响应式数据发生变化时更新组件的样式。

watch和watchEffect的示例

以下是一些watch和watchEffect的使用示例：

• 使用watch监听表单输入的变化

const App = {
  data() {
    return {
      name: '',
    }
  },
  watch: {
    name(newValue, oldValue) {
      // 在name发生变化时执行此函数
      console.log(`name has changed from ${oldValue} to ${newValue}`)
    }
  }
}

• 使用watchEffect在组件挂载时获取数据

const App = {
  setup() {
    watchEffect(() => {
      // 在组件挂载时执行此函数
      console.log('component has mounted')
    })
  }
}

• 使用watchEffect在响应式数据发生变化时更新组件的样式

const App = {
  data() {
    return {
      count: 0,
    }
  },
  watchEffect(() => {
    // 在count发生变化时执行此函数
    const fontSize = count > 10 ? '24px' : '16px'
    document.querySelector('.counter').style.fontSize = fontSize
  })
}

总结

watch和watchEffect都是Vue3中用于响应式数据的监听和处理的API，它们具有不同的特性和使用场景。watch通常用于监听特定响应式数据的变化，并在数据发生变化时执行相应的操作，而watchEffect通常用于在组件挂载时执行一次性操作，或者在响应式数据发生变化时执行需要立即执行的操作。