该指令会跳过所在元素和它的子元素的编译过程，也就公司名称变更函是把这个节点及其子节点当作一个静态节点来处理，例如:
<!doctype html><html lang="en"><head> <meta chart="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=fal; vue.config.devtools=fal; 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为fal invpre是个全局，用于判断当前是否在v-pre属性的环境之下，比如<p v-pre><span>123</span></p>解析到span标签时可以通过该属性来判断当前在v-pre内 processpre(element); //尝试解析v-pre属性 if (element.pre) { //如果element有v-pre属性 invpre = t女生节祝福语rue; //则设置invpre为true } } if (platformispretag(element.tag)) { inpre = true; } if (invpre) { //如果当前为pre标签 processrawattrs(element); //则设置inpre为true } el if (!element.procesd) { // structural directives processfor(element); //对于v-pre特性标记的节点来情花歌词说，不会进行这里面的分支，也就不会处理vue指令了 processif(element); processonce(element); // element-scope stuff proceslement(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) }; } } el 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函数tattribute去设置特性
本文发布于:2023-04-03 03:00:36，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/97d66780f9412f47c1e0a22e971b3000.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：Vue.js 源码分析(二十一) 指令篇 v.doc
本文 PDF 下载地址：Vue.js 源码分析(二十一) 指令篇 v.pdf
| 留言与评论（共有 0 条评论） |
