笔记大全

vue3中watch和watchEffect使用实例分析

更新时间：2023-06-27

前言

在Vue 3中，watch和watchEffect是两个重要的功能，用于监视数据的变化并执行相应的操作。它们的使用方式和作用略有不同，下面将详细介绍这两个功能的用法和特点。

一、watch的使用

1.1 watch的基本用法

  watch(data, callback, options)

其中，data是要监视的数据，callback是数据变化时要执行的函数，options是一些配置项。下面是一些常用的配置：

deep：深度监视，当对象内部的属性发生变化时也会触发回调函数。
immediate：立即执行回调函数，即数据变化后立即执行一次。
handler：回调函数的别名。

1.2 watch的例子

  watch('data', () => {
    // 数据变化时的回调函数
  }, { 
    deep: true, 
    immediate: true
  })

通过上述例子，我们可以看到当'data'这个数据发生变化时，回调函数会被触发执行。而且还设定了深度监视和立即执行回调函数的配置。

二、watchEffect的使用

2.1 watchEffect的基本用法

  watchEffect(callback)

其中，callback是一个响应式函数，当依赖的响应式数据变化时，回调函数会被重新执行。watchEffect会自动追踪响应式数据的依赖，并在依赖变化时自动调用回调函数。

2.2 watchEffect的例子

  watchEffect(() => {
    console.log(data)
  })

上述例子中的回调函数会在data这个响应式数据变化时被触发执行，无需手动指定要监视的数据，watchEffect会自动追踪响应式数据的依赖。

三、watch与watchEffect的区别

3.1 watch与watchEffect的区别

watch是一个函数，需要明确指定要监视的数据，并提供一个回调函数来处理数据变化时的操作。而watchEffect是一个函数，它会自动追踪响应式数据的依赖，并在依赖变化时触发回调函数。

3.2 watch与watchEffect的应用场景

watch适用于需要根据具体的数据变化执行特定操作的情况，可以根据数据的变化进行一些复杂的计算或异步操作。而watchEffect适用于只关心数据的变化，无需进行特定操作的场景。

四、watch和watchEffect的代码示例

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

  const state = reactive({
    count: 0,
    message: ''
  })

  // watch的使用
  watch(() => state.count, (newValue, oldValue) => {
    console.log('count发生了变化:', newValue, oldValue)
  })

  // watchEffect的使用
  watchEffect(() => {
    console.log('count的值是:', state.count)
    console.log('message的值是:', state.message)
  })

  // 修改响应式数据
  state.count++
  state.message = 'Hello World'

上述代码中使用了Vue 3提供的reactive函数，用于创建响应式对象state。然后使用watch监视state.count的变化，并在变化时输出相关信息。使用watchEffect监听state.count和state.message的变化，并在每次变化时输出相关值。

在代码的最后部分，修改了state.count和state.message的值，这会触发watch和watchEffect中的回调函数执行。

通过这个例子，可以更直观地理解watch和watchEffect的使用方法和效果。

c语言编程笔录