1.v-once
v-once指令只渲染元素和组件一次，随后的渲染，如果使用了此指令的元素、组件及其所有子节点，则都会当作静态内容并跳过。这个特性可以用于优化更新性能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-once指令</title>
</head>
<body>
<div id="app">
<p> <input type="type" v-model="message"/></p>
<p v-once> 只渲染一次: {
{
message}} </p>
<p> 可以改变: {
{
message}} </p>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data: {
message :"Hello"
}
})
</script>
</body>
</html>
在浏览器中运行的效果如图所示:
运行上面的示例代码，当打开浏览器页面时，DOM元素中的{
{message}}渲染了message属性的值，当使用v-model绑定的输入框再次改变message属性的值时，添加了v-once指令的标签则没有发生任何变化。
2.v-cloak
v-cloak指令将会保持在DOM元素上，直到关联实例结束编译后自动移除。v-cloak指令的使用场景非常有限，常用于解决网络较慢时数据的加载问题。用户在访问Vue.js实现的网站时，如果网络延迟，网页还在加载Vue.js，便会导致Vue来不及渲染，这时页面就会显示出Vue源代码，我们就可以使用v-cloak指令来解决这一问题。
<div id="app">
{
{
message}}
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data: {
message :"hello world"
}
})
</script>
当网络较慢时，在浏览器中打开页面，此时会在页面中出现Vue源码，直到Vue.js加载完成并编译之后，才会显示正常的数据内容，如图所示。
为了解决上面代码运行的问题，我们可以为DOM元素添加v-cloak指令，并使用属性选择器为指定的DOM元素设置隐藏样式。v-cloak指令可以保持在DOM元素上，直到编译结束才自动移除，这样就可以在Vue完成编译之前使指定的DOM元素处于隐藏状态，等编译完成后，CSS样式就对该DOM元素无效了。
<style>
[v-clock] {
display: none;
}
</style>
<div id="app">
{
{
message}}
</div>
3.v-pre
v-pre指令会跳过这个元素和它的子元素的编译过程，所以可以用来显示原始Mustache标签。跳过大量没有指令的节点会加快编译，代码如下：
<span v-pre>{
{
this will not be compiled}}</span>
在浏览器中运行的效果如图所示。
