vue3中watch监听localstorage

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

1. 在组件中引入`watchEffect`函数和`ref`函数。

import { watchEffect, ref } from 'vue';

2. 创建一个`ref`对象来存储`localStorage`的值。

const localStorageValue = ref(localStorage.getItem('key'));

3. 使用`watchEffect`函数来监听`localStorage`的变化，并更新`localStorageValue`的值。

watchEffect(() => {
  localStorageValue.value = localStorage.getItem('key');
});

4. 在模板中使用`localStorageValue`来展示`localStorage`的值。

<template>
  <div>{{ localStorageValue }}</div>
</template>

完整代码如下：

<template>
  <div>{{ localStorageValue }}</div>
</template>

<script>
import { watchEffect, ref } from 'vue';

export default {
  setup() {
    const localStorageValue = ref(localStorage.getItem('key'));

    watchEffect(() => {
      localStorageValue.value = localStorage.getItem('key');
    });

    return {
      localStorageValue,
    };
  },
};
</script>