vue2+js设置监听动态获取window.innerWidth和window.innerHeight

在Vue2中，如果想要动态获取`window.innerWidth`和`window.innerHeight`并设置监听，可以使用Vue的响应式系统来实现。由于Vue的响应式系统不直接支持对原生DOM属性的监听，因此需要借助`watch`来观察`window`对象的变化。

下面是一个简单的示例，展示如何在Vue2项目中实现监听`window.innerWidth`和`window.innerHeight`：

new Vue({
  el: '#app',
  data() {
    return {
      width: window.innerWidth,
      height: window.innerHeight
    };
  },
  watch: {
    // 监听window尺寸变化
    '$route'(to, from) {
      this.resize();
    },
    // 监听resize事件
    '$window'(to, from) {
      this.resize();
    }
  },
  methods: {
    resize() {
      this.width = window.innerWidth;
      this.height = window.innerHeight;
    }
  },
  mounted() {
    // 组件挂载后立即触发一次resize方法，更新尺寸
    this.resize();
    // 监听窗口尺寸变化
    window.addEventListener('resize', this.resize);
  },
  beforeDestroy() {
    // 销毁前移除事件监听
    window.removeEventListener('resize', this.resize);
  }
});

在上述代码中，我们在Vue实例的`data`函数中定义了`width`和`height`变量来存储当前窗口的宽度和高度。在`mounted`钩子函数中，我们设置了窗口的监听事件，并在`resize`方法中更新`width`和`height`的值。为了避免内存泄漏，我们在`beforeDestroy`钩子函数中移除了事件监听。

需要注意的是，上述代码中的`$route`和`$window`是示例用法，实际上Vue并没有内置这些响应式变量。在实际应用中，你可以使用`this.$route`来获取路由信息，而`$window`需要你自定义一个响应式的`window`对象。