vue监听localstorage值变化

### 回答1：
在Vue中，可以使用`$watch`来监听localStorage值的变化。

首先在data中定义一个变量来存储localStorage中的值，然后在mounted钩子函数中使用`$watch`监听该变量。

data() {
  return {
    localStorageValue: localStorage.getItem('key')
  }
},
mounted() {
  this.$watch(
    () => localStorage.getItem('key'),
    (newValue) => {
      this.localStorageValue = newValue
    }
  )
}

在上面的代码中，`$watch`监听的是`localStorage.getItem('key')`的值，当该值发生变化时，就会触发回调函数。回调函数中更新了`localStorageValue`变量的值。

### 回答2：
Vue通过watch属性提供了一种便捷的方式来监听localStorage值的变化。要使用此功能，需要先定义一个Vue实例，并将localStorage的值绑定到其data属性中。例如：

var app = new Vue({
    el: '#app',
    data: {
        localStorageValue: localStorage.getItem('myKey')
    },
    watch: {
        localStorageValue: function (newVal, oldVal) {
            // 在这里执行你的代码
        }
    }
})

在上面的代码中，我们定义了一个名为“localStorageValue”的data属性，它的值绑定到localStorage存储中的“myKey”键。然后，我们使用Vue的watch属性定义一个名为“localStorageValue”的监听器。该监听器将在localStorage值发生变化时被触发，参数newVal表示新的localStorage值，oldVal表示旧的localStorage值。

我们可以在监听器函数中编写一些代码来响应localStorage值的变化。例如，您可以更新视图，从而将新的localStorage值反映在用户界面中。

需要注意的是，localStorage值的变化可能由多个来源引起，因此您可能需要执行某些条件检查来确保只有合法的值被处理。此外，如果您需要在页面加载时获取localStorage的初始值，请记得添加一些初始代码来执行此操作。例如：

var app = new Vue({
    el: '#app',
    data: {
        localStorageValue: ''
    },
    watch: {
        localStorageValue: function (newVal, oldVal) {
            // 在这里执行你的代码
        }
    },
    mounted: function () {
        this.localStorageValue = localStorage.getItem('myKey')
    }
})

在上面的代码中，我们在Vue的mounted函数中添加了一行代码，以获取localStorage的初始值并将其分配给Vue实例的localStorageValue属性。这将确保Vue实例在加载时反映localStorage的当前状态，并立即开始监听其值的变化。

### 回答3：
Vue.js是一个流行的JavaScript框架，它提供了方便的前端组件化开发方式。在Vue中，当页面中有多个组件需要共享某些数据时，可通过Vuex来实现共享数据的管理。然而，在某些情况下，我们也需要监听localStorage值的变化，以便做出适当的响应，本文将介绍如何在Vue中监听localStorage值的变化。

1. 实现一个localStorage封装函数

我们可以写一个localStorage的封装函数，来监听localStorage值的变化。

function getLocalStorage(key) {
    const value = localStorage.getItem(key);
    try {
        return JSON.parse(value);
    } catch(e) {
        return value;
    }
}

function setLocalStorage(key, value) {
    localStorage.setItem(key, JSON.stringify(value));
}

function removeLocalStorage(key) {
    localStorage.removeItem(key);
}

2. 通过自定义指令监听localStorage值的变化

我们也可以通过自定义指令的方式来监听localStorage值的变化。首先定义如下指令：

Vue.directive('local', {
  bind(el, binding) {
    el.value = getLocalStorage(binding.arg);
    el.addEventListener('input', () => {
      setLocalStorage(binding.arg, el.value);
    });
    window.addEventListener('storage', (event) => {
      if (event.key === binding.arg) {
        el.value = getLocalStorage(binding.arg);
      }
    });
  }
});

然后在Vue组件中使用：

<template>
  <div>
    <input v-local="'name'" placeholder="请输入用户名"></input>
    <p>用户名：{{name}}</p>
  </div>
</template>

<script>
export default {
  computed: {
    name: {
      get() {
        return getLocalStorage('name');
      },
      set(value) {
        setLocalStorage('name', value);
      }
    }
  }
};
</script>

通过上述方法，我们成功的监听localStorage值的变化，实现了在Vue中动态地设置和获取localStorage值。