vue3中的watch的用法和几种常见情况
Vue 3中的watch的用法和几种常见情况
随着Vue 3的发布，一些Vue 2中常用的选项和API也进行了一些改变。watch选项是Vue实例中一个非常重要的选项之一，它用于监听数据的变化并执行相应的操作。在Vue 3中，watch的用法和之前版本有些不同，本文将一步一步详细介绍Vue 3中watch的用法，并探讨几种常见的使用情况。
一、基本用法
在Vue 2中，我们可以通过watch选项创建一个侦听器，监视某个数据的变化并执行相应的回调函数。在Vue 3中，watch的用法稍有不同，我们需要使用watch函数来创建侦听器。
在Vue 3中，可以在setup函数中使用watch来创建侦听器。setup函数是Vue 3中新增的一个特性，用于替代Vue 2中的created、beforeMount等生命周期钩子函数。我们可以在setup函数中编写Vue组件的逻辑代码。
下面是一个使用watch函数创建侦听器的示例：
javascript
import { watch, reactive } from 'vue'
export default {
  setup() {
    const state = reactive({
      count: 0
    })
    watch(() => {
      console.log('count变化了：', unt)
    })
    return {
      state
    }
  }
}
在这个示例中，我们首先使用reactive函数创建了一个响应式对象state，其中包含一个count属性。然后使用watch函数创建一个侦听器，侦听unt的变化，并在变化时输出日志。
二、监听ref对象
在Vue 3中，通过ref来创建响应式对象，并且可以使用watch函数来监听ref对象的变化。
下面是一个监听ref对象变化的示例：
javascript
import { watch, ref } from 'vue'
export default {
  setup() {
    const count = ref(0)
    watch(count, (newCount, oldCount) => {
      console.log('count变化了：', newCount, oldCount)
    })
    return {vue中reactive
      count
    }
  }
}
在这个示例中，我们使用ref函数创建了一个响应式对象count，初始值为0。然后使用watch函数创建一个侦听器，侦听count的变化，并在变化时输出日志。
三、监听多个属性
在Vue 3中，我们可以通过传入一个数组来侦听多个属性的变化。
下面是一个监听多个属性变化的示例：
javascript
import { watch, reactive } from 'vue'
export default {
  setup() {
    const state = reactive({
      count1: 0,
      count2: 0
    })
    watch([() => unt1, () => unt2], ([newCount1, newCount2], [oldCount1, oldCount2]) => {
      console.log('count1和count2变化了：', newCount1, newCount2, oldCount1, oldCount2)
    })
    return {
      state
    }
  }
}
在这个示例中，我们通过一个数组来侦听unt1和unt2的变化，并在变化时输出日志。
四、立即执行回调函数

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。