vue3 监听

在Vue 3中，监听（watching）是一种重要的响应式功能，用于在数据变化时执行特定的逻辑。在Vue 3中，监听可以通过两种方式实现：

1. 监听单个响应式数据：
   使用watch选项或者watchEffect函数来监听单个响应式数据的变化。例如：

   import { watch, reactive } from 'vue';
   
   const state = reactive({
       count: 0,
   });
   
   watch(() => state.count, (newValue, oldValue) => {
       console.log(`Count changed from ${oldValue} to ${newValue}`);
   });
   

2. 这里，watch函数接收两个参数：第一个参数是一个回调函数，返回需要监听的响应式数据；第二个参数是回调函数，用于在数据变化时执行。

3. 监听多个响应式数据：
   使用watch选项并传入一个对象，可以同时监听多个响应式数据的变化。例如：

   import { watch, reactive } from 'vue';
   
   const state = reactive({
       count: 0,
       message: 'Hello',
   });
   
   watch({
       count: (newValue, oldValue) => {
           console.log(`Count changed from ${oldValue} to ${newValue}`);
       },
       message: (newValue, oldValue) => {
           console.log(`Message changed from ${oldValue} to ${newValue}`);
       },
   });
   

4. 这里，watch接收一个对象作为参数，对象的每个键是需要监听的响应式数据的名称，值是一个回调函数，用于处理数据变化时的逻辑。

5. 监听响应式数据和立即执行的watchEffect：
   watchEffect函数用于监听响应式数据的变化，并在初始渲染时立即执行一次。例如：

   import { watchEffect, reactive } from 'vue';
   
   const state = reactive({
       count: 0,
   });
   
   watchEffect(() => {
       console.log(`Count is ${state.count}`);
   });
   

6. 这里，watchEffect函数接收一个回调函数，函数内部访问的任何响应式数据的变化都会触发重新执行。

7. 这些方法使得在Vue 3中能够方便地监听和响应数据的变化，从而执行相应的逻辑。