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

Question

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

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

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

我在从 websocket 连接接收数据时创建 ViewModel，如下所示：

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 };

但问题是，在 vm 初始化之前仍然存在延迟。顺序是这样的：

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

关于这件事有什么想法/最佳做法吗？

Answer 1

根据 dandavis 的评论，我在 DOM 和 v-class="hidden: !done" 中添加了 "hidden" class (display: none) 以切换可见性的 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
        }
    });
}

Answer 2

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

的 link

HTML:

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

CSS:

[v-cloak] {display: none}

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

websocket + vuejs: screen flickering, visible mustache code

javascript

websocket

vue.js