Vue-v-cloak

原创已于 2025-06-13 10:15:33 修改 · 467 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#Vue #加载缓慢导致dom渲染模板语法 #v-cloak

于 2025-06-13 10:14:36 首次发布

Vue 专栏收录该内容

17 篇文章

订阅专栏

v-cloak 指令

案例

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>内置指令</title>
    <!--  引入Vue  -->
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/dayjs.min.js"></script>
    <style>
      .base {
        padding: 5px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div id="root" >
      <h1>内置指令</h1>
      <div>
        <h2>插值语法：{{name}}</h2>
        <h2>v-text</h2>
        <span v-text="content"></span>
        <h2>v-html</h2>
        <span v-html="content"></span>
         
      </div>
    </div>
  </body>
  <script type="text/javascript">
    Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示
    
    Vue.filter("globalStr", function (value) {
      console.log(" global filter splice time (时分秒)... ");
      return value.split(" ")[1];
    });

    const vm = new Vue({
      el: "#root",
      data: {
        name: "Vue 扛把子",
        content:'<button onclick="alert(1)">test</button>'
      },

      computed: {
      },

      methods: { 
      },
      filters: {
      },
    });
  </script>
</html>

运行

在这里插入图片描述

模拟延迟加载

打开浏览器控制台（F12 / ctrl+shift+i）
切换到 source 找到当前运行的文件
在初始化vue实例的js片段打上断点
这里是在注册全局过滤器时断点 74行

在这里插入图片描述

刷新

vue实例化完成之前，页面已经渲染，出现了模板语法 {{name}}

在这里插入图片描述

问题现象

当网络延迟或者加载缓慢的场景下, dom已经渲染了，就会出现模板语法如：{{name}} 等，那这用户体验十分不好，那么如何解决这类问题呢？这里就该我们 v-cloak 登上舞台了。

解决办法 `v-cload`

基本概念

v-cloak 是 Vue 提供的一个内置指令，它用于在 Vue 实例编译完成之前隐藏元素。当 Vue 实例编译完成后，v-cloak 指令会自动从元素上移除。

作用

在 Vue 应用中，当页面加载时，可能会出现一个短暂的时间窗口，在这个时间窗口内，未编译的 Mustache 标签会显示在页面上，这会导致用户体验不佳。v-cloak 指令可以解决这个问题，它通过隐藏这些未编译的标签，直到 Vue 实例编译完成。

用法

在 HTML 元素上添加 v-cloak 指令，并结合 CSS 样式来隐藏元素。

<style>
  [v-cloak] {
    display: none;
  }
</style>
 
<div id="app" v-cloak>
  {{ name }}
</div>

原理

页面加载时，带有 v-cloak 指令的元素会被应用 CSS 样式 display: none，因此这些元素是不可见的。
当 Vue 实例编译完成后，v-cloak 指令会自动从元素上移除，此时元素会显示出来，并且 Mustache 标签已经被编译成实际的数据。

代码

html 根节点增加 v-cloak 指令
增加样式 [v-cloak] { display: none; }

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>内置指令</title>
    <!--  引入Vue  -->
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/dayjs.min.js"></script>
    <style>
      .base {
        padding: 5px;
        height: 100px;
      }

      [v-cloak] {
        display: none;
      }
    </style>
  </head>
  <body>
    <div id="root" v-cloak>
      <h1>内置指令</h1>
      <div>
        <h2>插值语法：{{name}}</h2>
        <h2>v-text</h2>
        <span v-text="content"></span>
        <h2>v-html</h2>
        <span v-html="content"></span>
         
      </div>
    </div>
  </body>
  <script type="text/javascript">
    Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示
    
    Vue.filter("globalStr", function (value) {
      console.log(" global filter splice time (时分秒)... ");
      return value.split(" ")[1];
    });

    const vm = new Vue({
      el: "#root",
      data: {
        name: "Vue 扛把子",
        content:'<button onclick="alert(1)">test</button>'
      },

      computed: {
      },

      methods: { 
      },
      filters: {
      },
    });
  </script>
</html>