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

Question

我想要实现的目标： 我想创建一个取决于BOM屏幕（https://www.w3schools.com/js/js_window_screen.asp）的计算属性。 像是这样的事情：

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

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

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

什么可以解决我的问题： 如果有一个选项可以在浏览器BOM可用时首次执行计算属性。我想在文件安装完毕后。

Answer 1

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

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

Answer 2

经过一些研究后我发现了：

1. 屏幕仅在装载挂钩后可用，如Stephan-v建议

除非您更改浏览器配置
，否则

2. 屏幕不会更改

3. 要让我的模板响应可用的屏幕，我需要编写一个监听＆＃39; resize＆＃39;的事件监听器。窗口事件看起来像这样：

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

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