一、Vue 的 v-pre 指令
Vue 的 v-pre 用于跳过使用该指令的元素及其子元素的编译过程，也就是不会进行编译或者渲染，显示原始的 Mustache 标签，通常用于跳过不需要编译的节点，可以加快编译的速度。
创建新的 HTML 文件，使用 Mustache 标签进行渲染变量：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>v-pre</title>
</head>
<body>
<div id="app">
<div>
<h2>{{message}}</h2>
<span>{{counter}}</span>
</div>
</div>
<script src="../lib/vue.js"></script>
<script>
const app = Vue.createApp({
data: function () {
return {
message: "Hello Vue",
counter: 0,
};
},
});
app.mount("#app");
</script>
</body>
</html>
使用 VSCode 的 LiverServer 打开该页面，可以看到定义的变量都可以成功的渲染出来：
接着我们来使用 v-pre 指令，首先使用在 Mustache 标签上 {{}}，在 span 标签的同级新增一个 div 标签，并使用 v-pre 指令修饰：
<div id="app">
<div>
<h2>{{message}}</h2>
<span>{{counter}}</span>
<span v-pre>{{}}</span>
</div>
</div>
查看页面可以看到 Mustache 标签被原封不动的展示出来：
接着我们可以给 Mustache 标签中使用我们在前面定义的变量：
<div id="app">
<div>
<h2>{{message}}</h2>
<span>{{counter}}</span>
<h2 v-pre>{{message}}</h2>
<span v-pre>{{counter}}</span>
</div>
</div>
可以看到使用了 v-pre 指令的 HTML 标签和未使用该指令的标签最终的效果是不一样的，使用 v-pre 指令的标签并没有被渲染编译，如果想要在页面上显示 {{}} 或者代码片段等可以使用到 v-pre 指令，除此之外该指令的使用频率较低。
二、Vue 的 v-cloak 指令
在 VSCode 中创建新的 HTML 文件，并添加上一节最基本的渲染变量的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>v-cloak</title>
</head>
<body>
<div id="app">
<div>
<h2>{{message}}</h2>
<span>{{counter}}</span>
</div>
</div>
<script src="../lib/vue.js"></script>
<script>
const app = Vue.createApp({
data: function () {
return {
message: "Hello Vue",
counter: 0,
};
},
});
app.mount("#app");
</script>
</body>
</html>
以上代码 message 和 counter 变量都可以被成功的渲染出来，现在我们假设一个这样的场景，假如 script 标签部分的代码执行时间非常的长会出现什么情况？我们定义的变量会如何渲染？
在 script 标签中创建 Vue 对象部分代码添加一个定时器，设置 3s 之后在创建 Vue 对象，代码如下：
<script>
setTimeout(() => {
const app = Vue.createApp({
data: function () {
return {
message: "Hello Vue",
counter: 0,
};
},
});
app.mount("#app");
}, 3000);
</script>
此时刷新页面，页面显示的内容为：
3s 之后页面显示的内容为：
此时页面会先实现未被渲染的 Mustache 语法的原始形态，待 3s 之后创建 Vue 对象才会将变量渲染出来，那么这种情况下用户体验非常不好，此时我们就可以使用到 v-cloak 来避免这种情况的出现，也就是先将为渲染出值的 Mustache 标签遮盖，渲染完成之后再显示。
v-cloak 指令的使用方式也是作用在标签上：
<div id="app">
<div>
<h2 v-cloak>{{message}}</h2>
<span>{{counter}}</span>
</div>
</div>
刷新页面：
此时添加了 v-cloak 指令的元素在渲染完成之前并没有被遮盖住，这是因为我们没有添加遮盖的样式，该指令要配合 CSS 一起使用才会生效，在 head 标签中添加如下 CSS 代码：
<style>
[v-cloak] {
display: none;
}
</style>
再次刷新页面：
可以看到未被渲染出来的 message 变量已经被遮盖住了，v-cloak 指令可以保持在元素上知道关联组件实例结束编译，需要和 CSS 规则如 [v-cloak] {display: none} 一起使用，这个指令可以隐藏为编译的 Mustache 标签知道组件实例准备完毕。
该组件的使用频率也非常低。
三、Vue 的 v-meno 指令
v-memo 指令用于记住一个模板的子树，在元素和组件上都可以使用，该指令接收一个固定长度的数组作为依赖值进行基于比对，如果数组中的每个值都可以上次渲染的时候相同，则整个该子树的更新会被跳过。
简单来说 v-memo 可以进行性能优化，如果子树没有改变，下次渲染时就会跳过，可以缩短渲染时间。
首先在 VSCode 中创建新的 HTML 文件，并添加上一节最基本的渲染变量的代码，然后在添加一个 button 标签并添加一个点击函数，命令为 handleChange，在 createApp 方法传入的对象中的 methods 属性中添加该方法的实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>v-memo</title>
</head>
<body>
<div id="app">
<div>
<h2>{{message}}</h2>
<span>{{counter}}</span>
</div>
<button @click="handleChange">Change</button>
</div>
<script src="../lib/vue.js"></script>
<script>
const app = Vue.createApp({
data: function () {
return {
message: "Hello Vue",
counter: 0,
};
},
methods: {
handleChange: function () {
this.message = "Hello Vue3";
},
},
});
app.mount("#app");
</script>
</body>
</html>
此时页面可以正常渲染出定义的变量，点击按钮也可以成功修改 message 变量的内容并重新渲染出来
<div id="app">
<div v-memo="[message]">
<h2>{{message}}</h2>
<span>{{counter}}</span>
</div>
<button @click="handleChange">Change</button>
</div>
此时之后 message 变量改变的时候才会重新渲染，如果是 counter 更新，则全部跳过，不做任何更新，我们将 v-memo 指定的数组中的变量从 message 改为 counter，刷新页面，点击 button，页面并没有重新渲染，message 没有重新渲染：
v-memo 指令传入的是一个数组，可以放入多个变量，该指令在 Vue 项目开发中使用频率也较低。
