(9)v-once指令
問題:有些綁定只在首次加載時，修改一次。之後其他地方的修改，都不會影響這裏的顯示結果。如果一個元素之後不需要再更新，但是卻佔着虛擬DOM樹中的一個位置，會影響虛擬DOM樹的遍歷速度！
解決: 如果只在首次加載時顯示，之後其他地方修改，這裏都不會受影響的綁定，可用v-once綁定。
寫法：<元素 v-once>{{變量或js表達式}}></元素>
原理: 只在首次渲染頁面時，替換元素的綁定語法內容。但是不會將當前元素加入虛擬DOM樹。結果: 只在首次加載一次，之後都不會再改變。
示例: 使用v-once綁定頁面加載時間
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1 v-once>頁面加載完成時間:{{new Date(timer).toLocaleString()}}</h1>
<h1>當前系統時間:{{new Date(timer).toLocaleString()}}</h1>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
timer:new Date().getTime() //獲得當前系統時間的毫秒數
}
//get timer(){}
//set timer(value){}
})
//因爲data中的變量進入new Vue()後會被自動請保鏢，且保鏢直接隸屬於new Vue()對象，所以其實在new Vue()外部也可以用vm.屬性名方式，修改data中的變量值。vm.timer
//每隔1秒鐘，修改new Vue()對象中的timer爲當前系統時間新值
setInterval(function(){
vm.timer=new Date().getTime();
},1000)
//因爲timer是訪問器屬性，內置通知機制。所以，即使在new Vue()外部修改timer屬性，也會觸發頁面自動更新！
</script>
</body>
</html>
運行結果：
東哥筆記