Question

我正在使用 Nuxt.js 作为SSR引擎和 Vuetify 作为样式框架的项目。在我的一个模板中，我有这样的代码：

<v-layout row wrap align-center 
 :class="{ 'mb-4': $vuetify.breakpoint.smAndDown }">...</v-layout>

如您所见，只有在小屏幕和小屏幕上时，我才想应用 mb-4 类。但是，当我将其加载到桌面大屏幕上并检查元素时，即使屏幕分辨率与应用此类的逻辑不匹配，也会附加该类。但是，当我调整浏览器窗口的大小时，样式又恢复了预期。

我尝试在生命周期挂钩中手动调度'resize'事件：

mounted() {
   window.dispatchEvent(new Event('resize')); 
}

但这没有帮助。即使我将其包装在setTimeout中，也仍然没有运气。

UPD：：找到了一种解决方法，但仍认为它不是最佳解决方案：改变

:class="{ 'mb-4': $vuetify.breakpoint.smAndDown }"

到

:class="{ 'mb-4': isMounted && $vuetify.breakpoint.smAndDown }"

，并在mounted生命周期挂钩中添加了：this.isMounted = true

更新：在挖掘发现的Vuetify源代码时，它以200ms的延迟检查窗口宽度，因为窗口宽度检查是一项昂贵的操作。这就是为什么我们会有延迟。