Vue 3 Composition Api Watch

Vue 3 Composition Api Watch是Vue 3的一个功能，通过它可以在组合式API中监听响应式数据的变化并做出相应的响应。

如何使用

在Vue 3中使用组合式API，需要先引入VueCompositionApi插件并在createApp函数中注入。

import { createApp } from 'vue'
import { VueCompositionApi } from '@vue/composition-api'

const app = createApp(App)

app.use(VueCompositionApi)

然后，我们可以使用watch函数来监听变化。

import { watch } from '@vue/composition-api'

export default {
  setup() {
    const name = ref('John')
    
    // 监听name
    watch(name, () => {
      console.log(name.value)
    })
    
    return {
      name
    }
  }
}

我们还可以对变化进行深入的控制，比如设置deep属性和immediate属性。

watch(
  () => count.value,
  (count, prevCount) => {
    /* ... */
  },
  {
    deep: true, // 监听对象属性的变化
    immediate: true // 立即被调用一次
  }
)

配置项

watch函数的第三个参数可以包含以下属性：

| 属性名 | 说明 | | ---------- | ------------------------------------------ | | deep | 是否深度监听 | | immediate | 是否立即执行回调函数 | | flush | 在组件被销毁之前立即执行回调函数的类型 | | onTrack | 当被监听项被追踪时调用的函数 | | onTrigger | 当被监听项被触发时调用的函数 | | lazy | 是否只有在回调函数中使用被监听项时才监听 | | sync | 是否使用同步的方式监听变化 | | deepCount | 深度监听的层数 |

示例

以下是一个示例，我们可以在input值改变时，在控制台输出新的值。

<template>
  <div>
    <input v-model="inputValue" />
  </div>
</template>

<script>
import { ref, watch } from '@vue/composition-api'

export default {
  setup() {
    const inputValue = ref('')

    watch(
      inputValue,
      (newValue) => {
        console.log(newValue)
      }
    )

    return {
      inputValue
    }
  }
}
</script>

结论

Vue 3 Composition Api Watch是Vue 3的一个用于监听响应式数据变化的功能，可以在应用组合式API时进行使用，提高代码的可读性和可维护性。通过watch函数的配置项，我们可以根据特定的需求进行定制化的设置，以达到最好的效果。