websocket + vuejs：屏幕闪烁，可见胡子代码

Question

我使用 websockets 和 vuejs 构建了一个网络应用程序。

在 DOM 中，我想遍历 vuejs 处理的数据。然而，在建立 websocket 连接并接收到数据之后，数据会在时间轴中稍后设置。

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

我创建 ViewModel，当从 websocket 连接接收数据时，像这样：

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

我已经尝试过在页面加载时初始化 ViewModel，然后再设置数据：

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

在websocket的onMessage事件中：

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

但问题是，在虚拟机初始化之前仍有延迟。顺序是这样的：

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

关于这个问题的任何想法/最佳实践？

Answer 1

在阅读 api 文档之前，我遇到了同样的问题。 这是v-cloak directives的链接！

HTML：

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

CSS：

[v-cloak] {display: none}

Answer 2

根据 dandavis 的评论，我向 DOM 添加了一个“隐藏”类 (display: none)，并添加了 v-class="hidden: !done"，以切换 DOM 的可见性。 done是ViewModel数据中的键值对。

HTML：

<div class="message hidden" v-repeat="messages" v-class="hidden: !done">...</div>

Javascript：

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