Vue：设置计算属性以便 BOM 可用答案

【问题标题】：Vue: setting up computed properties so that BOM is availableVue：设置计算属性以便 BOM 可用
【发布时间】：2018-02-08 12:36:22
【问题描述】：

我想要达到的目标：我想创建一个依赖于 BOM 屏幕 (https://www.w3schools.com/js/js_window_screen.asp) 的计算属性。类似于：

  computed:{
      screenWidth:function(){
          return screen.availWidth;
      }
  }

这意味着我可以根据这个属性调整我的模板，从而使其具有响应性。在我的真实项目中，我将返回一个用于其他计算属性的整个对象。

问题： screen 对象不可用于 ssr 上下文 (express-vue) 中的计算属性。（虽然它是用于方法）。我猜这是由第一次执行计算属性的时间引起的，我认为这恰好是在浏览器 BOM 可用之前。

什么可以解决我的问题：如果有一个选项可以在浏览器 BOM 可用时第一次执行计算属性。我猜是在文件挂载之后。

【问题讨论】：

标签： vue.js server-side-rendering

【解决方案1】：

您需要在 mounted 或 beforeMount 生命周期中执行您的逻辑，因为这是确保您实际处于浏览器环境中的唯一方法。

此时您可以简单地将数据属性设置为所需的window 对象并从那里读取它。我不确定如何使用计算属性来实现。但问题是；您真的需要将其作为缓存属性开始吗？

【讨论】：

所以是的，我可以通过挂载获取初始屏幕值。但现在我希望它具有反应性，所以我需要使用计算属性或观察者。不能使用计算，所以我尝试了观察者。问题是设置 screenValues 的唯一时间是在挂载的钩子中。现在我想检查它是否已更改，但如果屏幕更新，则依赖项不会更新。基本上，依赖项仅通过方法、计算、生命周期挂钩、由 vue 绑定或监视的事件发生变化，但如果 BOM 发生变化则不会发生变化。所以我不能看我没有设置的东西，但我不能设置，因为我需要知道它是否改变了。

【解决方案2】：

经过一番研究，我发现：

只有在 Stephan-v 建议的挂载钩子之后才能使用屏幕
除非您更改浏览器配置，否则屏幕不会改变

为了让我的模板响应可用的屏幕，我需要编写一个 Eventlistener 来监听窗口的“resize”事件，如下所示：

 mounted() {
    window.addEventListener('resize', this.resize);
 },
 beforeDestroy: function () {
    window.removeEventListener('resize', this.resize);
 },

在 this.resize 方法中，您将拥有对 BOM 的完全访问权限。

【讨论】：