vue2 watch全页面监听

Vue2中的watch可以用来监听数据的变化并执行相应的操作。全页面监听可以通过在Vue实例中使用watch选项来实现。具体步骤如下：
1. 在Vue实例中添加watch选项。
2. 在watch选项中添加需要监听的数据属性。
3. 在watch选项中添加处理函数，当监听的数据属性发生变化时，处理函数会被调用。

下面是一个示例代码：

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  watch: {
    message: function (newVal, oldVal) {
      console.log('message changed from ' + oldVal + ' to ' + newVal);
    }
  }
})

在上面的代码中，我们在Vue实例中添加了一个watch选项，监听了message属性的变化，并在变化时打印出了旧值和新值。

相关问题

vue2 watch监听sessionstorage 监听不到

根据提供的代码，可能是因为watch监听的是sessionStorage对象本身，而不是sessionStorage中某个具体的key值。因此，当sessionStorage中的某个key值发生变化时，watch监听不到。解决方法是在sessionStorage中的某个key值发生变化时，手动触发一个事件，让watch监听到这个事件，从而实现监听sessionStorage中某个key值的变化。

代码实现如下：

// 监听sessionStorage中某个key值的变化
watch: {
  '$store.state.sessionStorageKey': function (newVal, oldVal) {
    console.log('sessionStorageKey changed:', newVal, oldVal)
  }
},
// 手动触发事件
methods: {
  setSessionStorage: function (key, val) {
    sessionStorage.setItem(key, val)
    this.$store.state.sessionStorageKey = key + Math.random()
  }
}

vue2 watch监听sessionstorage 监听不到变化啊

可以尝试使用第三方库vue-ls来监听sessionStorage的变化。首先需要安装vue-ls，然后在main.js中引入并配置。接着在需要监听的组件中使用watch监听sessionStorage的变化即可。

代码示例：

// 安装vue-ls
npm install vue-ls --save

// main.js中引入并配置
import Vue from 'vue'
import VueStorage from 'vue-ls'

Vue.use(VueStorage, {
  namespace: 'vuejs__', // key prefix
  name: 'ls', // name variable Vue.[ls] or this.[$ls],
  storage: 'session' // storage name session, local, memory
})

// 组件中使用watch监听sessionStorage的变化
export default {
  data() {
    return {
      role: this.$ls.get('role') // 初始化时获取sessionStorage中的值
    }
  },
  mounted() {
    // 监听sessionStorage的变化
    this.$watch('$ls.role', (val) => {
      this.role = val
    })
  }
}