1.v-cloak
情景：請求服務器資源的時候，服務器資源有可能延時響應，這時候，vue無法加載一些數據，比如下面這種情況，
<div id="root">
<div>你好，{{name}}<div>
</div>如果平常情況，這個是可以渲染數據的，但是如果從服務器上請求資源延遲響應，但是html還是要渲染，那么頁面上只能渲染成下面這樣：
這樣讓用戶看到了。。。。
解決這個問題的辦法一般有兩個，第一個是給name賦初值，然后等請求的數據來了，再替換掉。
第二個就是今天要簡單介紹的v-cloak。它的作用就是用來解決瀏覽器在加載頁面時因存在事件差而產生的閃動問題，她的原理是先隱藏文件掛載位置，處理渲染好后在顯示最終結果。而且這個一般配合css來使用。
比如下面這樣寫法：
<!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>vue測試</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="root">
<h3 v-cloak> 你好，{{name}}</h3>
</div>
<script type="text/javascript">
new Vue({
el: '#root',
})
</script>
</body>
</html>
2.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>vue測試</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="root">
<h3 v-once>初始化的n:{{n}}</h3>
<h3>變化后的n:{{n}}</h3>
<button @click="n++"> 點我n+1</button>
</div>
<script type="text/javascript">
new Vue({
el: '#root',
data:{
n:1,
}
})
</script>
</body>
</html>
效果：
可以看出，標簽上加上這個v-once后， 標簽里的值就保持原始值不變，其他的地方可以改變。
3.v-pre
v-pre指令就不解析插值語法這些，寫的什么樣，顯示的就是什么樣，比如上面的代碼，我們加上v-pre后
<div id="root">
<h3 v-pre>初始化的n:{{n}}</h3>
<h3 v-pre>變化后的n:{{n}}</h3>
<button v-pre @click="n++"> 點我n+1</button>
</div>那么頁面最終顯示出來就是
