Vue中v-cloak和v-pre指令使用详解

就我吃不饱 發表於 2026-1-12 11:23:04

<div id="navCategory"><h5 class="catalogue">目录</h5><ul class="first_class_ul"><li><a href="#_label0">一、v-cloak 指令：解决闪烁问题</a></li><ul class="second_class_ul"><li><a href="#_lab2_0_0">1. 作用与问题场景</a></li><li><a href="#_lab2_0_1">2. 基本使用</a></li><li><a href="#_lab2_0_2">3. 实际应用场景</a></li><ul class="third_class_ul"><li><a href="#_label3_0_2_0">场景 1：完整的单页应用</a></li><li><a href="#_label3_0_2_1">场景 2：配合骨架屏（Skeleton Screen）</a></li><li><a href="#_label3_0_2_2">场景 3：多个独立组件</a></li></ul><li><a href="#_lab2_0_3">4. 进阶使用技巧</a></li><ul class="third_class_ul"><li><a href="#_label3_0_3_3">配合 CSS 动画实现平滑过渡</a></li><li><a href="#_label3_0_3_4">服务端渲染（SSR）环境下的优化</a></li></ul></ul><li><a href="#_label1">二、v-pre 指令：跳过编译</a></li><ul class="second_class_ul"><li><a href="#_lab2_1_4">1. 作用与使用场景</a></li><ul class="third_class_ul"></ul><li><a href="#_lab2_1_5">2. 基本用法</a></li><ul class="third_class_ul"></ul><li><a href="#_lab2_1_6">3. 实际应用场景</a></li><ul class="third_class_ul"><li><a href="#_label3_1_6_5">场景 1：展示代码示例</a></li><li><a href="#_label3_1_6_6">场景 2：性能优化 - 大量静态内容</a></li><li><a href="#_label3_1_6_7">场景 3：与其他模板引擎共存</a></li></ul><li><a href="#_lab2_1_7">4. v-pre 的进阶用法</a></li><ul class="third_class_ul"><li><a href="#_label3_1_7_8">配合动态属性</a></li><li><a href="#_label3_1_7_9">条件性跳过编译</a></li></ul></ul><li><a href="#_label2">三、v-cloak 与 v-pre 的比较</a></li><ul class="second_class_ul"></ul><li><a href="#_label3">四、综合应用示例</a></li><ul class="second_class_ul"><li><a href="#_lab2_3_8">一个完整的技术文档页面</a></li><ul class="third_class_ul"></ul></ul><li><a href="#_label4">五、最佳实践总结</a></li><ul class="second_class_ul"><li><a href="#_lab2_4_9">v-cloak 的最佳实践：</a></li><ul class="third_class_ul"></ul><li><a href="#_lab2_4_10">v-pre 的最佳实践：</a></li><ul class="third_class_ul"></ul><li><a href="#_lab2_4_11">通用建议：</a></li><ul class="third_class_ul"></ul></ul></ul></div><p>在 Vue.js 中，<code>v-cloak</code> 和 <code>v-pre</code> 是两个比较特殊但非常有用的指令。它们主要用于处理模板编译和显示相关的问题。</p>
<p class="maodian"><a name="_label0"></a></p><h2>一、v-cloak 指令：解决闪烁问题</h2>
<p class="maodian"><a name="_lab2_0_0"></a></p><h3>1. 作用与问题场景</h3>
<p><strong>问题</strong>：当使用 Vue 管理 DOM 时，在 Vue 实例完全加载并编译模板之前，原始的模板语法（如 <code>{{ }}</code>）可能会短暂地显示在页面上，造成内容闪烁。</p>
<p><strong>v-cloak 的作用</strong>：防止未编译的 Vue 模板在页面加载时闪烁显示。</p>
<p class="maodian"><a name="_lab2_0_1"></a></p><h3>2. 基本使用</h3>
<div class="jb51code"><pre class="brush:js;"><!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
/* 关键：使用属性选择器隐藏所有带有 v-cloak 的元素 */
{
   display: none !important;
}

/* 或者更具体的选择器 */
#app {
   display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>

<h1>{{ title }}</h1>
<p>{{ message }}</p>
<div v-if="showContent">
   {{ dynamicContent }}
</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
// 模拟网络延迟，更容易看到闪烁效果
setTimeout(() => {
   new Vue({
   el: '#app',
   data: {
      title: '欢迎页面',
      message: 'Hello Vue!',
      showContent: true,
      dynamicContent: '这是动态内容'
   },
   mounted() {
      // Vue 实例挂载完成后，v-cloak 属性会自动移除
      console.log('Vue 已加载，v-cloak 已移除');
   }
   });
}, 1000); // 延迟 1 秒加载 Vue
</script>
</body>
</html>
</pre></div>
<p class="maodian"><a name="_lab2_0_2"></a></p><p class="maodian"><a name="_lab2_1_6"></a></p><h3>3. 实际应用场景</h3>
<p class="maodian"><a name="_label3_0_2_0"></a></p><h4>场景 1：完整的单页应用</h4>
<div class="jb51code"><pre class="brush:js;">
<div id="app" v-cloak>
<nav>
<span>{{ appName }}</span>
<span v-if="user">{{ user.name }}</span>
</nav>
<main>
<router-view></router-view>
</main>
<footer>
{{ footerText }}
</footer>
</div>

<style>
/* 防止整个应用闪烁 */
> * {
display: none;
}
</style>
</pre></div>
<p class="maodian"><a name="_label3_0_2_1"></a></p><h4>场景 2：配合骨架屏（Skeleton Screen）</h4>
<div class="jb51code"><pre class="brush:css;">
<div id="app" v-cloak>

<div class="skeleton" v-if="loading">
<div class="skeleton-header"></div>
<div class="skeleton-content"></div>
</div>


<div v-else>
<header>{{ pageTitle }}</header>
<main>{{ content }}</main>
</div>
</div>

<style>
/* 基础隐藏 */
{
opacity: 0;
}

/* 骨架屏样式 */
.skeleton {
/* 骨架屏动画样式 */
}

.skeleton-header {
width: 100%;
height: 60px;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: loading 1.5s infinite;
}

@keyframes loading {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
</style>

<script>
// App.vue 或 main.js
new Vue({
el: '#app',
data: {
loading: true,
pageTitle: '',
content: ''
},
async created() {
// 模拟数据加载
try {
   const data = await this.fetchData();
   this.pageTitle = data.title;
   this.content = data.content;
} catch (error) {
   console.error('加载失败:', error);
} finally {
   this.loading = false;
}
},
methods: {
fetchData() {
   return new Promise(resolve => {
   setTimeout(() => {
      resolve({
         title: '页面标题',
         content: '页面内容...'
      });
   }, 1500);
   });
}
}
});
</script>
</pre></div>
<p class="maodian"><a name="_label3_0_2_2"></a></p><h4>场景 3：多个独立组件</h4>
<div class="jb51code"><pre class="brush:js;"><div>

<div id="header" v-cloak>
{{ siteName }} - {{ currentPage }}
</div>

<div id="sidebar" v-cloak>
<ul>
   <li v-for="item in menuItems" :key="item.id">
   {{ item.name }}
   </li>
</ul>
</div>

<div id="content" v-cloak>
<article>
   <h2>{{ articleTitle }}</h2>
   <div v-html="articleContent"></div>
</article>
</div>
</div>

<style>
/* 可以针对不同组件设置不同的隐藏效果 */
#header {
height: 60px;
background: #f5f5f5;
}

#sidebar {
min-height: 300px;
background: #f9f9f9;
}

#content {
min-height: 500px;
background: linear-gradient(180deg, #f8f8f8 0%, #f0f0f0 100%);
}
</style>
</pre></div>
<p class="maodian"><a name="_lab2_0_3"></a></p><h3>4. 进阶使用技巧</h3>
<p class="maodian"><a name="_label3_0_3_3"></a></p><h4>配合 CSS 动画实现平滑过渡</h4>
<div class="jb51code"><pre class="brush:js;"><style>
/* 使用 CSS 过渡效果 */
{
opacity: 0;
transition: opacity 0.3s ease-in-out;
}

.vue-loaded {
opacity: 1;
}

/* 或者使用自定义属性 */
:root {
--vue-loading: block;
}

{
display: var(--vue-loading, none);
}
</style>

<script>
// 在 Vue 加载完成后添加类名
document.addEventListener('DOMContentLoaded', function() {
new Vue({
// ... Vue 配置
}).$nextTick(() => {
document.body.classList.add('vue-loaded');
});
});
</script>
</pre></div>
<p class="maodian"><a name="_label3_0_3_4"></a></p><h4>服务端渲染（SSR）环境下的优化</h4>
<div class="jb51code"><pre class="brush:js;">
<div id="app" v-cloak>


<h1>服务器渲染的标题</h1>



</div>

<style>
/* SSR 特殊处理 */
{
display: block;
}

{
display: none;
}

/* Vue 加载完成后 */
#app:not() {
display: none;
}

#app:not() {
display: block;
}
</style>
</pre></div>
<p class="maodian"><a name="_label1"></a></p><h2>二、v-pre 指令：跳过编译</h2>
<p class="maodian"><a name="_lab2_1_4"></a></p><h3>1. 作用与使用场景</h3>
<p><strong>作用</strong>：跳过这个元素和它的子元素的编译过程，保持原始内容。</p>
<p><strong>适用场景</strong>：</p>
<ul><li>显示原始 Mustache 标签</li><li>展示 Vue 模板代码示例</li><li>提高大量静态内容的渲染性能</li></ul>
<p class="maodian"><a name="_lab2_1_5"></a></p><h3>2. 基本用法</h3>
<div class="jb51code"><pre class="brush:js;"><div id="app">

<div v-pre>

<p>{{ 这行文本会原样显示 }}</p>
<span>这个也不会被编译: {{ rawContent }}</span>
</div>


<div>
<p>{{ compiledContent }}</p> 
</div>
</div>

<script>
new Vue({
el: '#app',
data: {
compiledContent: '这是编译后的内容',
rawContent: '原始内容'
}
});
</script>
</pre></div>
<h3>3. 实际应用场景</h3>
<p class="maodian"><a name="_label3_1_6_5"></a></p><h4>场景 1：展示代码示例</h4>
<div class="jb51code"><pre class="brush:js;"><div id="app">
<h2>Vue 指令示例</h2>


<div class="code-example" v-pre>
<h3>模板代码：</h3>
<pre><code>
&lt;div&gt;
&lt;p&gt;{{ message }}&lt;/p&gt;
&lt;button @click="handleClick"&gt;点击我&lt;/button&gt;
&lt;span v-if="show"&gt;条件渲染&lt;/span&gt;
&lt;/div&gt;
</code></pre>
</div>


<div class="demo">
<h3>运行结果：</h3>
<p>{{ message }}</p>
<button @click="handleClick">点击我</button>
<span v-if="show">条件渲染</span>
</div>
</div>

<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
show: true
},
methods: {
handleClick() {
   this.show = !this.show;
}
}
});
</script>

<style>
.code-example {
background: #f5f5f5;
padding: 15px;
border-radius: 5px;
border-left: 4px solid #42b983;
margin-bottom: 20px;
}

.demo {
padding: 15px;
border: 1px solid #ddd;
border-radius: 5px;
}
</style>
</pre></div>
<p class="maodian"><a name="_label3_1_6_6"></a></p><h4>场景 2：性能优化 - 大量静态内容</h4>
<div class="jb51code"><pre class="brush:js;">
<div id="app">

<header>
<h1>{{ article.title }}</h1>
<div class="meta">
   作者: {{ article.author }} |
   发布时间: {{ article.publishTime }}
</div>
</header>


<article v-pre>

<p>在计算机科学中，Vue.js 是一套用于构建用户界面的渐进式框架。</p>
<p>与其他大型框架不同的是，Vue 被设计为可以自底向上逐层应用。</p>
<p>Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。</p>


<p>Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。</p>


<div class="highlight">
   <pre><code>const app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})</code></pre>
</div>

<blockquote>
   <p>这是一段引用内容，也会原样显示。</p>
</blockquote>
</article>


<section class="comments">
<h3>评论 ({{ comments.length }})</h3>
<div v-for="comment in comments" :key="comment.id" class="comment">
   <strong>{{ comment.user }}:</strong>
   <p>{{ comment.content }}</p>
</div>
</section>
</div>

<script>
new Vue({
el: '#app',
data: {
article: {
   title: 'Vue.js 入门指南',
   author: '张三',
   publishTime: '2024-01-15'
},
comments: [
   { id: 1, user: '李四', content: '很好的文章！' },
   { id: 2, user: '王五', content: '受益匪浅' }
]
}
});
</script>
</pre></div>
<p class="maodian"><a name="_label3_1_6_7"></a></p><h4>场景 3：与其他模板引擎共存</h4>
<div class="jb51code"><pre class="brush:js;">
<div id="app">

<div v-pre>
<?php echo $serverContent; ?>


<c:out value="${jspVariable}" />


[[ serverTemplateVariable ]]
</div>


<div class="vue-component">
<button @click="loadMore">加载更多</button>
<div v-for="item in vueData" :key="item.id">
   {{ item.name }}
</div>
</div>
</div>
</pre></div>
<p class="maodian"><a name="_lab2_1_7"></a></p><h3>4. v-pre 的进阶用法</h3>
<p class="maodian"><a name="_label3_1_7_8"></a></p><h4>配合动态属性</h4>
<div class="jb51code"><pre class="brush:js;"><div id="app">

<div
v-pre
:class="dynamicClass"
:style="dynamicStyle"
@click="handleClick"
>

{{ rawContent }} 
</div>


<span v-pre>{{ notCompiled }}</span>
正常文本
</div>

<script>
new Vue({
el: '#app',
data: {
dynamicClass: 'highlight',
dynamicStyle: {
   color: 'red'
}
},
methods: {
handleClick() {
   console.log('虽然内容没编译，但事件可以触发');
}
}
});
</script>

<style>
.highlight {
background-color: yellow;
padding: 10px;
}
</style>
</pre></div>
<p class="maodian"><a name="_label3_1_7_9"></a></p><h4>条件性跳过编译</h4>
<div class="jb51code"><pre class="brush:js;"><div id="app">

<template v-if="skipCompilation">
<div v-pre>
   编译跳过模式：
   {{ rawTemplateSyntax }}
   <span v-if="false">这个 v-if 不会生效</span>
</div>
</template>

<template v-else>
<div>
   正常编译模式：
   {{ compiledContent }}
   <span v-if="true">这个 v-if 会生效</span>
</div>
</template>

<button @click="toggleMode">切换模式</button>
</div>

<script>
new Vue({
el: '#app',
data: {
skipCompilation: false,
compiledContent: '编译后的内容',
rawTemplateSyntax: '{{ 原始语法 }}'
},
methods: {
toggleMode() {
   this.skipCompilation = !this.skipCompilation;
}
}
});
</script>
</pre></div>
<p class="maodian"><a name="_label2"></a></p><h2>三、v-cloak 与 v-pre 的比较</h2>
<table><thead><tr><th>特性</th><th>v-cloak</th><th>v-pre</th></tr></thead><tbody><tr><td><strong>主要目的</strong></td><td>防止模板闪烁</td><td>跳过编译过程</td></tr><tr><td><strong>编译阶段</strong></td><td>编译前隐藏，编译后显示</td><td>完全跳过编译</td></tr><tr><td><strong>性能影响</strong></td><td>无性能优化作用</td><td>可以提高性能</td></tr><tr><td><strong>使用场景</strong></td><td>解决显示问题</td><td>代码展示、性能优化</td></tr><tr><td><strong>CSS 依赖</strong></td><td>必须配合 CSS</td><td>不需要 CSS</td></tr><tr><td><strong>移除时机</strong></td><td>Vue 编译后自动移除</td><td>一直存在</td></tr></tbody></table>
<p class="maodian"><a name="_label3"></a></p><h2>四、综合应用示例</h2>
<p class="maodian"><a name="_lab2_3_8"></a></p><h3>一个完整的技术文档页面</h3>
<div class="jb51code"><pre class="brush:js;"><!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue 指令文档</title>
<style>
/* v-cloak 样式 */
{
   display: none;
}

body {
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   line-height: 1.6;
   color: #333;
   max-width: 1200px;
   margin: 0 auto;
   padding: 20px;
}

.container {
   display: grid;
   grid-template-columns: 250px 1fr;
   gap: 30px;
}

.sidebar {
   position: sticky;
   top: 20px;
   height: fit-content;
}

.content {
   padding: 20px;
   background: white;
   border-radius: 8px;
   box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.code-block {
   background: #282c34;
   color: #abb2bf;
   padding: 15px;
   border-radius: 6px;
   overflow-x: auto;
   margin: 20px 0;
}

.demo-area {
   border: 1px solid #e1e4e8;
   padding: 20px;
   border-radius: 6px;
   margin: 20px 0;
}

.loading-placeholder {
   background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
   background-size: 200% 100%;
   animation: loading 1.5s infinite;
   height: 100px;
   border-radius: 4px;
}

@keyframes loading {
   0% { background-position: 200% 0; }
   100% { background-position: -200% 0; }
}
</style>
</head>
<body>
<div id="app" v-cloak>



<div class="container">
   <aside class="sidebar">
   <h3>导航</h3>
   <ul>
      <li v-for="section in sections" :key="section.id">
         <a :href="'#' + section.id" rel="external nofollow" >{{ section.title }}</a>
      </li>
   </ul>

   
   <div v-pre class="info-box">
      <p><strong>注意：</strong></p>
      <p>这个侧边栏的部分内容是静态的。</p>
      <p>使用 v-pre 指令可以避免不必要的编译。</p>
   </div>
   </aside>

   
   <main class="content">
   <h1>{{ pageTitle }}</h1>

   
   <div v-if="loading" class="loading-placeholder"></div>

   
   <template v-else>
      <section v-for="section in sections" :key="section.id" :id="section.id">
         <h2>{{ section.title }}</h2>
         <p>{{ section.description }}</p>

         
         <div class="code-block" v-pre>
         <pre><code>{{ section.codeExample }}</code></pre>
         </div>

         
         <div class="demo-area">
         <h4>演示：</h4>
         
         <div v-html="section.demo"></div>
         </div>
      </section>
   </template>
   </main>
</div>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
setTimeout(() => {
   new Vue({
   el: '#app',
   data: {
      pageTitle: 'Vue 指令详解',
      loading: true,
      sections: []
   },
   created() {
      // 模拟异步加载数据
      this.loadData();
   },
   methods: {
      async loadData() {
         // 模拟 API 请求延迟
         await new Promise(resolve => setTimeout(resolve, 800));

         this.sections = [
         {
            id: 'v-cloak',
            title: 'v-cloak 指令',
            description: '用于防止未编译的 Mustache 标签在页面加载时显示。',
            codeExample: `<div id="app" v-cloak>\n{{ message }}\n</div>\n\n<style>\n {\ndisplay: none;\n}\n</style>`,
            demo: '<div>编译后的内容会在这里显示</div>'
         },
         {
            id: 'v-pre',
            title: 'v-pre 指令',
            description: '跳过这个元素和它的子元素的编译过程。',
            codeExample: `<div v-pre>\n\n{{ rawContent }}\n<span v-if="false">这个不会显示</span>\n</div>`,
            demo: '{{ 这行代码不会编译 }}'
         }
         ];

         this.loading = false;
      }
   }
   });
}, 500);
</script>
</body>
</html>
</pre></div>
<p class="maodian"><a name="_label4"></a></p><h2>五、最佳实践总结</h2>
<p class="maodian"><a name="_lab2_4_9"></a></p><h3>v-cloak 的最佳实践：</h3>
<ol><li><strong>始终配合 CSS 使用</strong>：必须定义 <code></code> 的样式</li><li><strong>作用范围控制</strong>：可以应用于整个应用或特定部分</li><li><strong>考虑用户体验</strong>：可以结合骨架屏或加载动画</li><li><strong>SSR 场景</strong>：在服务端渲染中特别有用</li></ol>
<p class="maodian"><a name="_lab2_4_10"></a></p><h3>v-pre 的最佳实践：</h3>
<ol><li><strong>静态内容优化</strong>：对大量静态 HTML 使用 v-pre 提升性能</li><li><strong>代码展示</strong>：在文档、教程中展示原始模板代码</li><li><strong>混合环境</strong>：当 Vue 与其他模板引擎共存时</li><li><strong>避免滥用</strong>：只在确实需要跳过编译时使用</li></ol>
<p class="maodian"><a name="_lab2_4_11"></a></p><h3>通用建议：</h3>
<ol><li><strong>性能考虑</strong>：对于复杂页面，合理使用这两个指令可以提升用户体验</li><li><strong>渐进增强</strong>：确保页面在 JavaScript 禁用时仍有基本功能</li><li><strong>测试验证</strong>：在不同网络条件下测试闪烁问题</li><li><strong>保持简洁</strong>：不要过度使用指令，保持代码可读性</li></ol>
<p>通过合理使用 <code>v-cloak</code> 和 <code>v-pre</code>，可以显著改善 Vue 应用的用户体验和性能表现。</p>

頁: [1]

琼殿技术论坛's Archiver

Vue中v-cloak和v-pre指令使用详解