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

Question

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

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

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

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

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

Answer 1

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

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

Answer 2

所以经过一些研究我发现：

屏幕仅在 Stephan-v 建议的挂载挂钩后可用
屏幕不会改变，除非您更改浏览器配置

为了让我的模板响应可用的屏幕，我需要编写一个事件监听器来监听 window 的 'resize' 事件，它看起来像这样：

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

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

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

Vue: setting up computed properties so that BOM is available

vue.js

server-side-rendering