欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

Vue.js 源码分析(二十一) 指令篇 v-pre指令详解

程序员文章站 2022-06-19 08:14:11
该指令会跳过所在元素和它的子元素的编译过程，也就是把这个节点及其子节点当作一个静态节点来处理，例如: 编译后的结果为: 对应的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/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>

编译后的结果为:

Vue.js 源码分析(二十一) 指令篇 v-pre指令详解

对应的html节点树为:

Vue.js 源码分析(二十一) 指令篇 v-pre指令详解

可以看到:title属性也被当成了特性来处理了，我们在控制台输入app.message="hello vue!"看看渲染变化:

Vue.js 源码分析(二十一) 指令篇 v-pre指令详解

可以看到对于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去设置特性

上一篇： 如何分辨OPPO VOOC闪充电源适配器的真假呢?

下一篇： 教你一招让你的拼多多店铺申请为旗舰店

推荐阅读