vue3下的watch怎么使用

前言： Vue.js是一个流行的JavaScript框架，用于构建用户界面。它提供了一种声明性、响应式的方式来构建大型、可维护的WEB应用程序。Vue.js 3 是 Vue 的最新版本，它带来了许多新特性和改进。在 Vue.js3 中，watch的使用方式发生了一些变化，本文将详细介绍Vue.js 3中的watch的使用方法。 一、基本用法 在 Vue.js 3 中，我们可以使用 watch 函数来监听 Vue 实例中的数据的变化。watch 函数接收两个参数：要监听的数据和回调函数。当被监听的数据发生变化时，回调函数会被触发。 例如，我们有一个 Vue 实例，并希望监听其中的一个数据变化： ```html

  
Vue.js 3 Watch基本用法
  
count: {{ count }}

在上面的例子中，我们创建了一个 Vue 实例，并在 data 中定义了一个 count 变量，初始值为 0。然后我们在 watch 中定义了一个 count 的监听器，并在监听器中输出 count 变化的日志。通过 setTimeout 函数，我们在页面加载后的 1 秒钟将 count 的值修改为 1。 当 count 的值发生变化时，watch 的回调函数会被触发，打印出 count 变化的日志。从日志中，我们可以看到 count 从 0 变为 1。 二、深度监听 在默认情况下，Vue.js 的 watch 函数只会监听被监听的数据的直接变化，如果被监听的数据是一个对象或数组，则只有该对象或数组的引用发生变化时，watch 的回调函数才会被触发。 例如，我们有一个 Vue 实例，并希望深度监听其中一个对象属性的变化： ```html

  
Vue.js 3 深度监听
  
address: {{ address.province }} - {{ address.city }}

在上面的例子中，我们在 data 中定义了一个 address 对象，其中包含了省份和城市两个属性。在 watch 中，我们对 address 进行了深度监听，并在监听器中输出 address.province 和 address.city 变化的日志。 通过 setTimeout 函数，我们在页面加载后的 1 秒钟将 address.province 和 address.city 的值修改为'上海市'。 当 address.province 和 address.city 的值发生变化时，watch 的回调函数会被触发，分别打印出 address.province 和 address.city 变化的日志。 三、立即触发回调函数 在默认情况下，Vue.js 的 watch 函数在被监听的数据发生变化后才会触发回调函数。如果我们希望在初始化阶段立即触发一次回调函数，可以通过设置 immediate 选项为 true。 例如，我们有一个 Vue 实例，并希望立即触发一次回调函数： ```html

  
Vue.js 3 立即触发回调函数
  
count: {{ count }}

在上面的例子中，我们创建了一个 Vue 实例，并在 watch 中设置了 immediate 选项为 true。 当页面加载后，Vue.js 会立即触发一次回调函数，打印出 count 变化的日志。然后通过 setTimeout 函数，在页面加载后的 1 秒钟将 count 的值修改为 1。当 count 的值发生变化时，watch 的回调函数会再次触发，并打印出 count 变化的日志。 总结: Vue.js 3 中的 watch 函数用于监听 Vue 实例中的数据变化并触发相应的回调函数。它可以通过设置 deep 选项来深度监听对象或数组的变化，并通过设置 immediate 选项来在初始化阶段立即触发回调函数。watch 函数为我们提供了一种便利的方式来响应数据的变化，使我们能够更好地控制和管理数据的状态。以上是基本的使用方法，相信通过学习和使用，你能更好地理解和运用 Vue.js 中的 watch 函数。