Vue watch详解

Vue2

watch选项可以作为一个函数来使用，也可以作为一个对象来使用。

watch选项作为函数

当watch选项作为函数时，它接收两个参数：newValue和oldValue。newValue是新值，oldValue是旧值。

以下是一个使用watch函数的例子：

const app = Vue.createApp({
  data() {
    return {
      message: 'Hello, Vue 3!'
    }
  },
  watch: {
    message(newValue, oldValue) {
      console.log(`新的值为：${newValue}，旧的值为：${oldValue}`)
    }
  }
})

在上面的例子中，当message的值发生变化时，watch函数将被调用，打印出新值和旧值。

watch选项作为对象

当watch选项作为对象时，它可以具有以下属性：

• handler：与Vue 2中的handler属性类似，指定要执行的函数。
• immediate：与Vue 2中的immediate属性类似，指定是否在初始值被设置后立即运行处理程序。默认为false。
• deep：与Vue 2中的deep属性类似，指定是否深度监听对象的属性。默认为false。

以下是一个使用watch对象的例子：

const app = Vue.createApp({
  data() {
    return {
      message: 'Hello, Vue 3!'
    }
  },
  watch: {
    message: {
      handler(newValue, oldValue) {
        console.log(`新的值为：${newValue}，旧的值为：${oldValue}`)
      },
      immediate: true,
      deep: true
    }
  }
})

在上面的例子中，当message的值发生变化时，handler函数将被调用，打印出新值和旧值。由于immediate属性被设置为true，因此处理程序将在初始值被设置后立即运行。由于deep属性被设置为true，因此message的所有子属性都将被深度监听。

取消watch

如果需要取消watch，可以使用watch()函数返回的一个取消watch的函数：

const app = Vue.createApp({
  data() {
    return {
      message: 'Hello, Vue 3!'
    }
  },
  watch: {
    message() {
      // do something
    }
  }
})

const unwatch = app.watch('message', () => {})
unwatch() // 取消watch

在上面的例子中，unwatch()将取消对message的watch。

Vue3

watch选项可以用来监视特定的数据源并在更改时运行函数。与watchEffect不同，您需要显式地定义要监视的数据源。

以下是一个使用watch选项的例子：

import { watch } from 'vue'

const count = ref(0)

watch(count, (newValue, oldValue) => {
  console.log(`新值为：${newValue}，旧值为：${oldValue}`)
})

在上面的例子中，我们使用watch选项来监视count计数器的值。当计数器的值更改时，watch选项会调用传递给它的函数，并传递新值和旧值作为参数。

您还可以使用watch选项来监视多个数据源。在这种情况下，您可以将要监视的数据源放入一个数组中，并将函数作为最后一个参数传递。

以下是一个监视多个数据源的示例：

import { watch } from 'vue'

const count1 = ref(0)
const count2 = ref(0)

watch([count1, count2], (newValues, oldValues) => {
  console.log(`新值为：${newValues}，旧值为：${oldValues}`)
})

在上面的例子中，我们使用watch选项来监视两个计数器count1和count2。当其中任何一个计数器的值更改时，watch选项将调用传递给它的函数，并传递新值和旧值作为参数。

需要注意的是，watch选项也可以监视响应式对象的特定属性。在这种情况下，您需要将响应式对象和属性名称作为数组传递给watch选项。

以下是一个监视响应式对象属性的示例：

import { watch } from 'vue'

const user = reactive({
  name: 'Tom',
  age: 30
})

watch([user, 'age'], (newAge, oldAge) => {
  console.log(`新年龄为：${newAge}，旧年龄为：${oldAge}`)
})

在上面的例子中，我们使用watch选项来监视user对象的age属性。当age属性更改时，watch选项将调用传递给它的函数，并传递新值和旧值作为参数。

在watch选项中，您还可以传递选项对象来进一步控制监视行为。以下是一些常用的选项：

• immediate: 如果设置为true，则会在watch选项的初始评估期间调用函数。默认值为false。
• deep: 如果设置为true，则会深入监视数据源的所有嵌套属性。默认值为false。
• flush: 控制什么时候运行监视函数。默认为'pre'，即在响应式数据更改之前运行。还有'post'选项，表示在响应式数据更改之后运行。

以下是使用选项的示例：

import { watch } from 'vue'

const user = reactive({
  name: 'Tom',
  age: 30
})

watch(
  () => user.age,
  (newAge, oldAge) => {
    console.log(`新年龄为：${newAge}，旧年龄为：${oldAge}`)
  },
  {
    immediate: true,
    deep: true,
    flush: 'post'
  }
)

在上面的示例中，我们使用watch选项来监视user对象的age属性。我们还传递了一个选项对象来启用immediate、deep和flush选项。