vue 全局变量监听 watch $root

Vue.js是一款开源的JavaScript框架，它的出现为我们提供了一种更加便利快捷的前端开发方式。在Vue.js中，全局变量是一种非常常用的数据结构，可以被多个组件所使用。对于这种全局变量的变化，我们可以使用watch $root来进行监听。

watch $root这种监听方式的实现非常简单。我们只需要在Vue实例中，通过$watch方法来定义一个监听对象，这个监听对象就是我们的$root。在这个监听对象中，我们可以定义一个处理函数，用于在全局变量发生变化时，进行相应的处理事件。

例如，假设我们定义了一个全局变量count，如果我们想要在全局变量count发生变化时进行相应的事件触发，我们可以通过下面的代码实现：

new Vue({
  data: {
    count: 0
  },
  watch: {
    '$root.count': function () {
      // 在全局变量count发生变化时执行的处理事件 
    }
  }
})

上述代码中，我们在data中定义了全局变量count，然后通过watch方法中的'$root.count'来将全局变量count进行监听，当全局变量count发生变化时，就会立即执行watch函数中的处理事件。

总结来说，watch $root是Vue.js中非常常用的全局变量监听方式，通过这种方式，我们可以非常方便地在全局变量发生变化时进行相应的事件处理。同时，在Vue.js中还有许多其他的监听方式，可以根据实际需求来选择不同的监听方式。

相关问题

vue监听全局变量变化

在 Vue 中，可以使用 `$watch` 方法监听全局变量的变化。

假设你要监听一个名为 `globalVar` 的全局变量，可以在 Vue 实例中使用 `$watch` 方法：

new Vue({
  data: {
    // ...
  },
  created() {
    this.$watch('$root.globalVar', (newVal, oldVal) => {
      // 处理变化
    })
  }
})

这样，在全局变量 `globalVar` 发生变化时，`created` 钩子函数中的回调函数就会被触发。其中，`$root` 属性指向 Vue 根实例，因此可以使用 `$root.globalVar` 访问全局变量。

另外，如果你想要在多个组件中监听全局变量的变化，可以在 Vue 原型上定义一个 `$globalWatch` 方法：

Vue.prototype.$globalWatch = function (name, handler) {
  this.$watch('$root.' + name, handler)
}

这样，在任何组件中都可以通过 `this.$globalWatch('globalVar', handler)` 来监听全局变量的变化了。

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