websocket + vuejs:屏幕闪烁,可见胡须代码

Question

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

在DOM中,我想循环遍历vuejs处理的数据.然而,在建立websocket连接并且已经接收到数据之后,在时间线中稍后设置数据.

到那时(大约0.5秒),你可以在网站上看到vuejs的胡子代码,然后看到它闪烁并添加真实数据.

我从websocket连接接收数据时创建ViewModel,如下所示:

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

我已经尝试过在页面加载时初始化ViewModel,并在以后设置数据:

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

在onMessageWebSocket的事件:

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

但问题是,在vm初始化之前仍有延迟.顺序是这样的:

页面加载 - >可见胡子代码 - >胡须代码被隐藏,因为数据被设置为空对象 - >实际数据显示在websocket收到之后

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

Answer 1

在我阅读api doc之前,我遇到了同样的问题.这是v-cloak指令的链接!

HTML:

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

CSS:

[v-cloak] {display: none}