vue3.0 watch监听什么

Vue 3.0 中的 watch 函数用于监听指定的数据变化，并在数据发生变化时执行相应的操作。它可以接受两个参数：要监听的数据和回调函数。

在 Vue 2.x 中，我们可以通过在选项对象中使用 watch 属性来定义一个监听器，但在 Vue 3.0 中，这种方式被废弃了，取而代之的是使用 watch 函数。相比之前的实现方式，watch 函数更加灵活、易用。

在 Vue 3.0 中，watch 函数可以监听数据的变化，包括以下几种情况：

1. 监听单个数据：可以直接传入要监听的数据作为第一个参数。例如：

watch(name, (newValue, oldValue) => {
  console.log(`name 的值从 ${oldValue} 变为 ${newValue}`);
});

2. 监听 data 对象中的一个属性：可以使用点语法，将要监听的属性传入 watch 函数。例如：

watch('userInfo.name', (newValue, oldValue) => {
  console.log(`userInfo.name 的值从 ${oldValue} 变为 ${newValue}`);
});

3. 监听多个数据：可以将多个数据作为一个数组传入 watch 函数。例如：

watch([name, age], ([newName, newAge], [oldName, oldAge]) => {
  console.log(`name 的值从 ${oldName} 变为 ${newName}`);
  console.log(`age 的值从 ${oldAge} 变为 ${newAge}`);
});

4. 使用监听选项对象：可以传入一个选项对象，对需要监听的数据进行更详细的配置。例如：

watch({
  name: {
    handler(newValue, oldValue) {
      console.log(`name 的值从 ${oldValue} 变为 ${newValue}`);
    },
    deep: true,
    immediate: true
  },
  age: {
    handler(newValue, oldValue) {
      console.log(`age 的值从 ${oldValue} 变为 ${newValue}`);
    },
    deep: false,
  }
});

除了监听数据变化，watch 函数还可以监听表达式、监听计算属性等情况。通过合理使用 watch 函数，我们可以方便地对数据进行监控，从而做出相应的处理。

Vue 3.0中的watch选项被重新设计以提供更灵活和直观的用法。它可以用于监视Vue实例中的数据变化并执行相应的操作。下面是Vue 3.0中watch的功能和用法：

1. 监听响应式数据：watch选项可以用来监听Vue实例上的响应式数据的变化。可以监视一个或多个数据，并在数据发生变化时执行回调函数。

watch: {
  // 监听单个数据
  username(newValue, oldValue) {
    // 执行操作
  },
  // 监听多个数据
  'userInfo.name, userInfo.age': {
    handler(newValue, oldValue) {
      // 执行操作
    },
    immediate: true, // 初始化时立即执行回调
    deep: true // 深度监听嵌套的数据
  }
}

2. 监听计算属性：除了监听响应式数据的变化，watch选项还可以监听计算属性的变化。当计算属性的依赖发生变化时，watch选项的回调函数将被触发。

computed: {
  fullName() {
    return this.firstName + ' ' + this.lastName
  }
},
watch: {
  fullName(newValue, oldValue) {
    // 执行操作
  }
}

3. 监听对象属性：Vue 3.0中的watch选项还可以监听对象属性的变化。可以用点语法来指定要监听的对象属性，并在属性发生变化时执行回调函数。

data() {
  return {
    userInfo: {
      name: 'John',
      age: 20
    }
  }
},
watch: {
  'userInfo.name'(newValue, oldValue) {
    // 执行操作
  },
  'userInfo.age'(newValue, oldValue) {
    // 执行操作
  }
}

4. 监听路由参数：Vue 3.0中的watch选项还可以用于监听路由参数的变化。当路由参数发生变化时，watch选项的回调函数将被触发。

watch: {
  '$route.params.id'(newValue, oldValue) {
    // 执行操作
  }
}

5. 监听数组变化：Vue 3.0中的watch选项还可以监听数组的变化。可以使用特殊的'array format'来监听数组的变化，该格式包含了要监听的数组及其方法。

data() {
  return {
    todos: ['task1', 'task2', 'task3']
  }
},
watch: {
  todos: {
    handler(newValue, oldValue) {
      // 执行操作
    },
    deep: true,
    immediate: true
  }
}

总结：Vue 3.0中的watch选项可以用于监听响应式数据、计算属性、对象属性、路由参数和数组变化。它提供了更加灵活和直观的用法，使开发者能够更方便地对数据变化进行监控和处理。

Vue3.0的watch功能和Vue2.x相比发生了一些改变。在Vue3.0中，watch被拆分成了两个部分：watch和watchEffect。

watch用于监听数据的变化，并在变化时执行相应的逻辑。watchEffect则是一种特殊类型的watch，它可以自动追踪响应式数据的变化，并在变化时立即执行相关的逻辑。

接下来，我们将详细介绍在Vue3.0中如何使用watch和watchEffect来监听数据的变化。

使用watch监听数据变化

watch的基本语法如下：

watch(source, callback, options)

其中，source是要监听的数据源，可以是一个函数返回的值、一个响应式数据、一个计算属性等；callback则是当source发生变化时执行的回调函数；options是一个可选的配置选项对象。

基本用法

我们先来看一个简单的例子。假设我们有一个计数器，当计数器发生变化时，我们希望在控制台输出新的值。

import { reactive, watch } from 'vue'

const counter = reactive({ count: 0 })

watch(() => counter.count, (newCount) => {
  console.log('New count:', newCount)
})

counter.count++

上面的代码中，我们使用reactive函数将一个普通对象转换为响应式对象，然后使用watch来监听counter.count的变化。当counter.count发生变化时，回调函数就会执行，并将新的值输出到控制台。

监听多个数据源

如果我们想同时监听多个数据源的变化，可以将数据源放在一个数组中。当任何一个数据源发生变化时，回调函数都将被执行。

watch([source1, source2, ...], callback)

下面是一个使用watch监听多个数据源的例子：

import { reactive, watch } from 'vue'

const user = reactive({ name: 'Alice' })
const counter = reactive({ count: 0 })

watch([() => user.name, () => counter.count], ([newName, newCount]) => {
  console.log('New name:', newName)
  console.log('New count:', newCount)
})

user.name = 'Bob'
counter.count++

在上面的例子中，我们同时监听了user.name和counter.count的变化。当任何一个数据源发生变化时，回调函数都会执行，并将新的值输出到控制台。

配置选项

watch还可以使用一些配置选项来更精确地控制监听的行为。下面是一些常用的配置选项：

• immediate：是否在初始渲染时立即执行回调函数，默认为false。如果设置为true，那么在watch注册时，如果数据已经发生了变化，回调函数将会立即执行。
• deep：是否深度监听对象内部的变化，默认为false。如果设置为true，那么当对象内部的任何属性发生变化时，回调函数都将被执行。
• flush：控制回调函数的调用时机，默认为'pre'。可以选择'pre'、'post'和'unscheduled'三种选项。'pre'表示在DOM更新之前（同步调用）调用回调函数，'post'表示在DOM更新之后（下一次事件循环）调用回调函数，'unscheduled'表示延迟到下一次渲染周期调用回调函数。
• onTrack：当响应式数据被访问时触发的回调函数。用于在依赖追踪阶段收集额外的依赖关系。
• onTrigger：当响应式数据发生变化时触发的回调函数。用于在派发阶段执行额外的逻辑。

下面是一个使用配置选项的例子：

import { reactive, watch } from 'vue'

const counter = reactive({ count: 0 })

watch(() => counter.count, (newCount, oldCount) => {
  console.log('New count:', newCount)
}, {
  immediate: true,
  deep: true,
  flush: 'post',
  onTrack: (event) => {
    console.log('event:', event)
  },
  onTrigger: (event) => {
    console.log('event:', event)
  }
})

counter.count++

在上面的例子中，我们设置了immediate为true，深度监听了对象内部的变化，设置了flush为'post'，并定义了onTrack和onTrigger的回调函数。当counter.count发生变化时，相应的回调函数会被执行，并将相关事件输出到控制台。

使用watchEffect自动追踪响应式数据

在Vue3.0中，watchEffect是一个特殊类型的watch，它可以自动追踪响应式数据的变化，并在变化时立即执行相关的逻辑。

watchEffect的基本语法如下：

watchEffect(callback, options)

其中，callback是一个包含响应式数据访问的函数；options是一个可选的配置选项对象，可以用来定义回调函数的调用时机。

下面是一个简单的示例，演示了如何使用watchEffect来实现与上面watch的例子相同的效果：

import { reactive, watchEffect } from 'vue'

const counter = reactive({ count: 0 })

watchEffect(() => {
  console.log('New count:', counter.count)
})

counter.count++

在上面的例子中，我们使用watchEffect监听了counter.count的变化，并在变化时立即输出新的值到控制台。

配置选项

watchEffect的配置选项和watch的配置选项基本相同，包括immediate、deep、flush、onTrack和onTrigger。

下面是一个使用配置选项的例子：

import { reactive, watchEffect } from 'vue'

const counter = reactive({ count: 0 })

watchEffect(() => {
  console.log('New count:', counter.count)
}, {
  immediate: true,
  deep: true,
  flush: 'post',
  onTrack: (event) => {
    console.log('event:', event)
  },
  onTrigger: (event) => {
    console.log('event:', event)
  }
})

counter.count++

在上面的例子中，我们设置了immediate为true，深度监听了对象内部的变化，设置了flush为'post'，并定义了onTrack和onTrigger的回调函数。当counter.count发生变化时，相应的回调函数会被执行，并将相关事件输出到控制台。

总结

在Vue3.0中，watch和watchEffect用于监听数据的变化，其中watch可以手动指定要监听的数据源，而watchEffect则可以自动追踪响应式数据的变化。同时，watch和watchEffect都支持配置选项，可以用来控制监听的行为。

使用watch和watchEffect可以方便地监视数据变化，并在变化时进行相应的操作，是Vue3.0中重要的响应式功能之一。