vue3 watch 监听setup

基于提供的引用内容，Vue3中的watch函数用于监听数据的变化并执行相应的回调函数。在setup函数中使用watch函数时，可以传入要监听的数据源和回调函数，并可以设置一些选项来控制监听的行为。

具体地，watch函数的参数如下：
1. 数据源：可以是一个函数，返回要监听的数据；也可以是一个响应式对象或ref对象。
2. 回调函数：当数据变化时执行的回调函数，接收两个参数，当前值和之前的值。
3. 选项：可以设置一些选项，比如是否深度监听、是否立即执行回调等。

举个例子，当监听的数据源是route.query.tab，即路由的查询参数tab时：

watch(() => route?.query?.tab, (tab, prevTab) => {
  if (tab) {
    active.value = tab as Tlabel;
    previewActive.value = tab as Tlabel;
  }
}, { deep: true, immediate: true });

在这个例子中，通过深度监听(deep: true)和立即执行回调(immediate: true)，当路由的查询参数tab发生变化时，会立即执行回调函数，并更新active和previewActive的值。

相关问题

vue3 watch监听props

在Vue3中，可以使用`watch`函数来监听`props`的变化。具体步骤如下：

1. 在组件中声明`props`，例如：

   props: {
     count: {
       type: Number,
       default: 0
     }
   }

2. 在组件中使用`watch`函数来监听`props`的变化，例如：

   import { watch } from 'vue';
   export default {
     props: {
       count: {
         type: Number,
         default: 0
       }
     },
     setup(props) {
       watch(() => props.count, (newVal, oldVal) => {
         console.log(`count has changed from ${oldVal} to ${newVal}`);
       });
     }
   }

在代码中，我们使用了`setup`函数来定义组件，并在其中使用了`watch`函数来监听`props.count`的变化。当`props.count`的值发生变化时，回调函数就会被执行。

注意，在Vue3中，我们需要使用`setup`函数来定义组件，而不能再使用`created`、`mounted`等钩子函数来监听`props`的变化。

vue3 watch监听sessionStorage

Vue3中的`watch`可以用于监听浏览器的存储状态变化，包括`localStorage`和`sessionStorage`。你可以通过创建一个`watcher`来监控`sessionStorage`的键值对。下面是一个基本的例子：

import { ref, watch } from 'vue';

export default {
  setup() {
    const sessionStorageData = ref(null);
    
    // 监听sessionStorage的变化
    watch(() => {
      sessionStorageData.value = JSON.parse(sessionStorage.getItem('yourKey') || '{}');
    }, (newVal) => {
      sessionStorage.setItem('yourKey', JSON.stringify(newVal));
    });

    return {
      sessionStorageData
    };
  }
}

在这个例子中，我们首先定义了一个响应式的变量`sessionStorageData`，然后使用`watch`函数监听`sessionStorage.getItem('yourKey')`的结果。当这个值改变时，新的值会被解析并设置回`sessionStorage`。