這三個指令都是用來優化性能體驗的：一個是搞一次不搞了 ,一個是乾脆不搞 ，另一個是塊遮羞布
v-once
當你只希望元素加載一次後面不再改變的時候，這個時候可以在根元素上添加這個指令。確保這些內容不會跟着數據改變而改變，只在初次頁面加載時候計算一次然後緩存起來，v-once後面不用跟表達式
<div id="app">
<img v-once :src="url" >
<button @click="change">換圖片</button>
</div>
<script type="text/javascript">
const app = new Vue({
el:"#app",
data:{
url:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1577715191417&di=4b79c2be425ab4d75cbfca72b4033b8f&imgtype=0&src=http%3A%2F%2Fimg.tukexw.com%2Fimg%2Fc4083711e2477fb5.jpg"
},
methods:{
change(){
this.url = "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1577715191417&di=92cda882bad8242ed2a1da077373de95&imgtype=0&src=http%3A%2F%2Fimg.qqzhi.com%2Fuploads%2F2019-02-26%2F004320294.jpg"
}
}
})
</script>v-pre
一些靜態的內容不需要編譯加上這個指令可以加快編譯，程序執行的時候就會跳過這個元素和它的子元素的編譯過程。v-pre後面也不用跟表達式
<h1 v-pre>哈哈哈哈哈哈哈</h1>v-cloak
這個其實是用在網絡比較差 程序執行慢或卡的時候，瀏覽器可能會顯示出如下頁面
<div id="app">
<div>
<h1>{{count}}</h1>
<h1>{{count}}</h1>
<h1>{{count}}</h1>
<h1>{{count}}</h1>
<h1>{{count}}</h1>
</div>
</div>此時，模板還未掛載到頁面上，真實數據還沒顯示出來，看起來比較醜，那怎麼辦 ，要不就找一個斗篷先遮住吧，等到模板掛載上去數據正常顯示了，再把斗篷扔了。v-cloak後面也不用跟表達式
cloak 英[kləʊk] 美[kloʊk]
n. (尤指舊時的) 披風，斗篷; 遮蓋物;
<style type="text/css">
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app">
<div v-cloak>
<h1>{{count}}</h1>
<h1>{{count}}</h1>
<h1>{{count}}</h1>
<h1>{{count}}</h1>
<h1>{{count}}</h1>
</div>
</div>
<script type="text/javascript">
setTimeout(function(){
const app = new Vue({
el: "#app",
data: {
count: "1111"
},
methods: {
}
})
},3000)
</script>
</body>