該指令會跳過所在元素和它的子元素的編譯過程，也就是把這個節點及其子節點當作一個靜態節點來處理，例如: 編譯後的結果為: 對應的HTML節點樹為: 可以看到:title屬性也被當成了特性來處理了，我們在控制台輸入app.message="Hello Vue!"看看渲染變化: 可以看到對於v-pre對應 ...
該指令會跳過所在元素和它的子元素的編譯過程，也就是把這個節點及其子節點當作一個靜態節點來處理，例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p v-pre :title="message">{{message}}</p>
<p>{{message}}</p>
</div>
<script>
Vue.config.productionTip=false;
Vue.config.devtools=false;
var app = new Vue({
el:'#app',
data:{message:"Hello World"}
})
</script>
</body>
</html>
編譯後的結果為:
對應的HTML節點樹為:
可以看到:title屬性也被當成了特性來處理了，我們在控制台輸入app.message="Hello Vue!"看看渲染變化:
可以看到對於v-pre對應的DOM節點，數據變化時也不會觸發渲染的
源碼分析
解析模板時如果遇到標簽開始，會執行start函數，對於 <p v-pre :title="message">{{message}}</p>來說
start: function start (tag, attrs, unary) { //第9136行 解析到標簽開始時執行到這裡 /*略*/ if (!inVPre) { //如果inVPre為false inVPre是個全局，用於判斷當前是否在v-pre屬性的環境之下，比如<p v-pre><span>123</span></p>解析到span標簽時可以通過該屬性來判斷當前在v-pre內 processPre(element); //嘗試解析v-pre屬性 if (element.pre) { //如果element有v-pre屬性 inVPre = true; //則設置inVPre為true } } if (platformIsPreTag(element.tag)) { inPre = true; } if (inVPre) { //如果當前為pre標簽 processRawAttrs(element); //則設置inPre為true } else if (!element.processed) { // structural directives processFor(element); //對於v-pre特性標記的節點來說，不會進行這裡面的分支，也就不會處理Vue指令了 processIf(element); processOnce(element); // element-scope stuff processElement(element, options); } /*略*/ },
processRawAttrs用於將特性保存到AST對象的attrs屬性上，如下:
function processRawAttrs (el) { //第9317行 如果設置了v-pre特性，則執行到這裡 var l = el.attrsList.length; if (l) { var attrs = el.attrs = new Array(l); for (var i = 0; i < l; i++) { //遍歷當前所有的特性，依次保存到e.attrs上面 attrs[i] = { name: el.attrsList[i].name, value: JSON.stringify(el.attrsList[i].value) }; } } else if (!el.pre) { // non root node in pre blocks with no attributes el.plain = true; } }
後面在gendata()函數執行時就會拼湊成attr屬性里，最後render渲染成相應的DOM節點後就會將該attr屬性保存到對應的節點上了，例子里的模板渲染成render函數如下:
with(this){return _c('div',{attrs:{"id":"app"}},[_c('p',{pre:true,attrs:{":title":"message"}},[_v("{{message}}")]),_v(" "),_c('p',[_v(_s(message))])])}
紅色標記的就是v-pre編譯後的模板，等到p元素渲染成真實DOM節點的時候，就會觸發Vue內部attrs模塊的updateAttrs方法進行初始化，之後就和v-bind指令里的後部分流程時一樣的，最後會調用原生的DOM函數setAttribute去設置特性
