天天向上跑分系统开发
该指令会跳过所在，天天向上跑分系统开发（T：I8O-285I-O282) 和它的子元素的编译过程，也就是把这个节点及其子节点当作一个静态节点来处理，例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/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去设置特性