Javascript websocket+；vuejs：屏幕闪烁，可见胡须代码

我使用websockets和vuejs构建了一个web应用程序

在DOM中，我希望循环vuejs处理的数据。但是，在建立websocket连接并接收数据后，将在时间线中稍后设置数据

到那时（大约0.5秒），您可以在站点本身上看到vuejs的胡须代码，然后看到它闪烁并添加真实数据

当从websocket连接接收数据时，我创建了视图模型，如下所示：

onMessage: function (e) {
    new Vue({
        el: '#messages',
        data: {
            messages: e.data
        }
    });
}

我已经尝试过在页面加载时初始化ViewModels，并在以后设置数据：

var vms = {
    messages: new Vue({
        el: '#messages',
        data: {
            messages: {
            }
        }
    })
};

在websocket的

onMessage

事件中：

var vm = vms.messages;
vm.$data = { messages: body };

但问题是，在虚拟机初始化之前，仍然存在延迟。顺序如下：

onMessage: function (e) {
    new Vue({
        el: '#messages',
        data: {
            messages: e.data
        }
    });
}

页面加载->可见小胡子代码->小胡子代码隐藏，因为数据设置为空对象->真实数据在websocket接收后显示

---

关于这个问题有什么想法/最佳实践吗？

根据dandavis的评论，我在DOM中添加了一个“隐藏”类（

display:none

），并添加了

v-class=“hidden:！done”

，以切换DOM的可见性<代码>完成是ViewModel数据中的键值对

HTML:

---

我有同样的问题，直到我读了api文档。 这是你的链接

HTML:

---

使用Mustach设置类名，在CSS中隐藏除该类名以外的所有类名。CSS不会命中未插入的占位符，当它变成真正的CSS类时，它将停止隐藏。不确定是否会覆盖隐藏的CSS类。一个更好的解决方案是使用v-clope（display:none）和v-show=“done”，而不是切换css类。首先在css中设置一个[v-Clope]{display:none}规则。然后将v-斗篷添加到任何要隐藏的元素，直到vm加载为止。抱歉，我没有注意到jel已经发布了正确的解决方案：）没有遇到这个问题，但是胡子标签总是不可见，这不是一个非常普遍的期望吗？如果是这样，为什么

v-clope

不是默认值？我知道这个答案是1年多以前的，但我只是把它扔了出去。

onMessage: function (e) {
    new Vue({
        el: '#messages',
        data: {
            messages: e.data,
            done: true
        }
    });
}

<div id="demo" v-cloak><p>{{ test }}</p></div>

[v-cloak] {display: none}