2.Vue 使用 v-cloak 解决由于网络延迟导致的数据渲染显示问题

小半 • 2022年9月26日下午8:31 • 前端开发 • 阅读 204

目标

本Vue系列的篇章将会从Vue.js的基础知识点开始，逐步带领写到项目实战。

前言

上一篇章基本介绍了一遍Vue框架的基本概念，也写了一个「hello world」的数据渲染实例。

下面来思考一个问题：在Vue框架中数据是基于vue.js进行渲染的。也就是说网页首先需要加载完成了vue.js文件才可以进行数据渲染。那么假设网络网速很慢，导致vue.js没有加载完成，但是网页又在浏览器中呈现的话，数据显然就会是这样的一个效果{{ msg }}。

这样的数据一般用户都不会想去看到，还会以为这是故障了。那么如何解决这种网络延迟导致的问题呢？下面来看看。

问题

当Vue.js库通过网络引入较慢的时候，渲染的数据就会显示如下：

下面来介绍使用v-cloak来处理。

存在问题的代码


<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>
</head><body>    <!-- 将来 new 的Vue实例，会控制这个 元素中的所有内容 -->    <div id="app">        <p>{{ msg }}</p>    </div>
    <!--  1.导入vue.js库  -->    <script src="lib/vue.js"></script>
    <script>        // 2. 创建一个Vue的实例        var vm = new Vue({            el: '#app',            data: {                msg: 'Hello world,Vue!'            }        })</script>
</body></html>



使用v-cloak解决网络延迟的问题
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        /*设置v-cloak的属性样式*/        [v-cloak]{            display: none;        }</style></head><body>    <!-- 将来 new 的Vue实例，会控制这个 元素中的所有内容 -->    <div id="app">        <p v-cloak>{{ msg }}</p>    </div>
    <!--  1.导入vue.js库  -->    <script src="lib/vue.js"></script>
    <script>        // 2. 创建一个Vue的实例        var vm = new Vue({            el: '#app',            data: {                msg: 'Hello world,Vue!'            }        })</script>
</body></html>



当设置了v-cloak属性，网络延迟没有加载到的时候，则可以根据样式隐藏起来。


v-cloak在网络加载好vue.js之后，属性就会自动去除，那么相应设置的样式也就消失了。
另外，如果再加上一些加载的动画效果，体验就会更加好。