Vue mount() 未检测到 innerWidth答案

【问题标题】：Vue mounted() not detecting the innerWidthVue mount() 未检测到 innerWidth
【发布时间】：2020-06-30 09:49:46
【问题描述】：

我有一个 Nuxt 页面，我需要检测该页面是在移动设备还是桌面设备中打开的。我曾尝试使用window.innerWidth 属性进行检测，但将其放入mounted() 生命周期挂钩时似乎无法正常工作。

下面是代码：

  data() {
    return {
      ...
      isMobile: false,
      ...
    };
  },
  mounted() {
    this.isMobile = window.innerWidth < 768;
    console.log(this.isMobile); // logs `false`
  },

但是我是否将声明放在created() 生命周期中，它再次抛出错误为window is not defined。

我怀疑这是为什么？ created() 在 mounted() 之前运行，而且我的 ESLint 显示错误，例如“no-globals-in-created”。

请在这里帮忙！

【问题讨论】：

它在文档中，vue生命周期->mounted+tick已经渲染了dom，使用await vm.$nextTick()
我试图重现，看看我的例子，它看起来像预期的那样工作

标签： javascript vue.js nuxt.js

【解决方案1】：

您也可以将您的内容包装在一个 div 中，并使用 ref 标签访问页面的初始 clientWidth，如下所示：

new Vue({
  el: "#app",
  data: {
    size: null,
  },
  computed: {
    deviceType() {
        return this.size > 760 ? 'Desktop' : 'Mobile'
    }
  },
  mounted() {
    this.size = this.$refs.pageSizeContainer.clientWidth
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  {{this.size}}px
  <div ref="pageSizeContainer" style="background: #f5f5f5;padding:15px">
    Device size is a {{this.deviceType}}
  </div>
</div>

【讨论】：

【解决方案2】：

是否需要在mounted hook中定义isMobile值？如果不是，我建议您创建一个计算属性isMobile，它根据innerWidth 返回真/假

computed: {
    isMobile() {
        return window.innerWidth < 768;
    }
}

【讨论】：

【解决方案3】：

如果您可以打开 chrome 的控制台，我相信您是在桌面上打开它，所以如果是这种情况，这里的问题是您没有设置调整大小事件侦听器以及挂载钩子中的初始代码。

这样的事情应该适用于你的情况：

this.isMobile = window.innerWidth < 768;
console.log(this.isMobile);

window.addEventListener('resize', () => {
  this.isMobile = window.innerWidth < 768;
  console.log(this.isMobile); // Should log true once width point is reached.
})

【讨论】：

【解决方案4】：

在挂载的钩子中读取window.innerWidth 可以正常工作。你的代码也应该可以工作。尝试同时记录 window.innerWidth 值以查看发生了什么。

我创建了一个快速沙箱，您可以在其中进行检查。页面加载，读取window.innerWidth 并相应地设置isMobile。 https://codesandbox.io/s/dank-tree-bgwo3

但是，它仅在页面加载期间有效。调整窗口大小时，它不会重新评估。请记住这一点。

【讨论】：

window.innerWidth 记录为 1315 值。我不知道怎么办？无论如何，@procoib 的回答解决了这个问题