vue3 watch 对象key

Vue 3 中的 watch 选项可以用来监视对象的属性变化。如果你想要监视对象的某个特定 key 的变化，你可以在 watch 选项中使用点符号来指定该属性。以下是一个示例：

watch: {
  'myObject.myKey': {
    handler(newVal, oldVal) {
      // 处理属性变化的逻辑
    },
    immediate: true // 是否立即执行处理函数
  }
}

在上述代码中，`myObject` 是你想要监视的对象，`myKey` 是对象中的一个属性。`handler` 函数将在 `myKey` 的值发生变化时被调用，参数 `newVal` 和 `oldVal` 分别表示新值和旧值。`immediate` 属性可选择是否在组件挂载时立即执行处理函数。

希望这个回答能对你有所帮助！如果你还有其他问题，请随时提出。

相关问题

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`。

vue3 watch监听localStorage

在 Vue 3 中，你可以使用 `watch` 钩子监听浏览器的 `localStorage`。由于 `localStorage` 不是响应式的，你需要手动触发检查和更新。以下是基本的步骤：

1. 定义一个响应式的数据变量，用于存储从 `localStorage` 加载的数据：

data() {
  return {
    storedData: JSON.parse(localStorage.getItem('yourKey') || 'defaultValue')
  };
},

2. 使用 `watch` 监听 `localStorage` 的变化：

watch: {
  '$root.$store.state.keyFromLocalStorage': function (newValue, oldValue) {
    localStorage.setItem('yourKey', JSON.stringify(newValue));
    this.storedData = newValue; // 更新本地存储并同步至组件内部数据
  }
},

这里假设你有一个全局的状态管理库 (`$root.$store`) 并从中获取需要监听的 key。`newValue` 是 `localStorage` 的新值，`oldValue` 则是旧值。每当状态发生改变，都会触发 `watch` 的回调，并将新值保存回 `localStorage`。