如何渲染标记以减少 Vue 组件的 FLOUT？答案

【问题标题】：How to render markup so there's less FLOUT with a Vue Component?如何渲染标记以减少 Vue 组件的 FLOUT？
【发布时间】：2019-08-24 22:48:39
【问题描述】：

我需要渲染一个项目列表（服务器渲染），每个项目都有一个倒数计时器。当我在每个dom 元素中只有我的视图组件时，那里什么都没有，然后POP，视图组件呈现倒计时......现在我也知道服务器端的这个值，有什么方法可以呈现它立即让vue 组件接管渲染？（这样有意义吗）

就像来自服务器的 html 呈现 50:32 (minutes, seconds)，但随后视图组件接管、删除它并开始倒计时 50:31、50:30... 等等。

我已尝试将服务器 val 作为道具传递并仅在节点内渲染它，仍然会弹出（我假设是因为组件正在渲染...）

这是否可行，还是我被加载器卡住了？

【问题讨论】：

【解决方案1】：

感谢您的相关问题，我根据我的理解提出一个答案。

您正在尝试将属性从服务器动态传递到已创建的视图实例。这是不可能的，因为 Vue 不允许将新的根级响应属性动态添加到已创建的实例中。但是，可以使用

向嵌套对象添加反应属性

Vue.set(object, propertyName, value) 方法：

Vue.set(vm.someObject, 'b', 2)

希望它能让你走上正轨

【讨论】：

您好，感谢您的回复。所以我不想将值从服务器传递到组件，我可以做到这一点。我想要做的是让页面呈现一个值，然后让它成为一个视图组件。所以用户什么都看不到，然后是 POP，什么的。