v-cloak

v-cloak用于防止vue模板在编译完成之前显示未编译的原始Mustache语法（如 {{ message }}），用于防止页面闪烁。

使用场景：

<div v-cloak>{{ message }}
</div>
<style>[v-cloak] {display: none;}
</style>

当vue实例加载较慢时，页面可能短暂的显示{{ message }}这样的未编译的模板，影响用户体验。这里v-cloak属性的作用就是在Vue实例加载完成之前隐藏div元素，直到Vue实例加载完成移出v-cloak属性，显示div元素。

v-pre

v-pre用于跳过指定元素及其子元素的编译过程，不对其进行解析和渲染而显示原始内容。

使用场景：

当你需要显示原始 Mustache 语法（如 {{ message }}）而不是动态绑定的值时，可以使用 v-pre。

<div id="app"><div v-pre>{{ message }}  <!-- 这里不会编译，直接显示 {{ message }} --></div><div>{{ message }}  <!-- 这里会编译，显示 Hello, Vue! --></div>
</div>
<script>javascript">new Vue({el: '#app',data: {message: 'Hello, Vue!'}});
</script>