该指令会跳过所在元素和它的子元素的编译过程，也就是把这个节点及其子节点当作一个静态节点来处理，例如:

<!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;

  }

}

writer by:大沙漠 QQ:22969969

后面在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去设置特性

Vue.js 源码分析(二十一) 指令篇 v-pre指令详解的更多相关文章

  1. Vue.js 源码分析(二十六) 高级应用 作用域插槽 详解

    普通的插槽里面的数据是在父组件里定义的,而作用域插槽里的数据是在子组件定义的. 有时候作用域插槽很有用,比如使用Element-ui表格自定义模板时就用到了作用域插槽,Element-ui定义了每个单 ...

  2. Vue.js 源码分析(二十八) 高级应用 transition组件 详解

    transition组件可以给任何元素和组件添加进入/离开过渡,但只能给单个组件实行过渡效果(多个元素可以用transition-group组件,下一节再讲),调用该内置组件时,可以传入如下特性: n ...

  3. Vue.js 源码分析(二十九) 高级应用 transition-group组件 详解

    对于过度动画如果要同时渲染整个列表时,可以使用transition-group组件. transition-group组件的props和transition组件类似,不同点是transition-gr ...

  4. Vue.js 源码分析(十四) 基础篇 组件 自定义事件详解

    我们在开发组件时有时需要和父组件沟通,此时可以用自定义事件来实现 组件的事件分为自定义事件和原生事件,前者用于子组件给父组件发送消息的,后者用于在组件的根元素上直接监听一个原生事件,区别就是绑定原生事 ...

  5. Vue.js 源码分析(二十四) 高级应用 自定义指令详解

    除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令. 官网介绍的比较抽象,显得很高大上,我个人对自定义指令的理解是:当自定义指令作用在一些DOM元素或组件上 ...

  6. jQuery 源码分析(二十一) DOM操作模块 删除元素 详解

    本节说一下DOM操作模块里的删除元素模块,该模块用于删除DOM里的某个节点,也可以理解为将该节点从DOM树中卸载掉,如果该节点有绑定事件,我们可以选择保留或删除这些事件,删除元素的接口有如下三个: e ...

  7. Vue.js 源码分析(二十三) 指令篇 v-show指令详解

    v-show的作用是将表达式值转换为布尔值,根据该布尔值的真假来显示/隐藏切换元素,它是通过切换元素的display这个css属性值来实现的,例如: <!DOCTYPE html> < ...

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

    Vue.js提供了v-model指令用于双向数据绑定,比如在输入框上使用时,输入的内容会事实映射到绑定的数据上,绑定的数据又可以显示在页面里,数据显示的过程是自动完成的. v-model本质上不过是语 ...

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

    数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值,例如:<p>Message: {{ msg }}</p>以后每当msg属性发生了改变,插值处的内 ...

随机推荐

  1. JNDI和JDBC的区别-个人理解

    网上关于JNDI和JDBC的定义有很多,但是都很官方不容易理解,下面是我最近查阅资料得出的心得体会.希望对你在理解上有一点点的帮助,说的不对的请指正哦. JDBC: 看到最多的就是 Java Data ...

  2. Java设计模式：Flyweight(享元)模式

    概念定义 享元(Flyweight)模式运用共享技术高效地支持大量细粒度对象的复用. 当系统中存在大量相似或相同的对象时,有可能会造成内存溢出等问题.享元模式尝试重用现有的同类对象,如果未找到匹配的对 ...

  3. 史上最全的Java命名规范[转]

    每个公司都有不同的标准,目的是为了保持统一,减少沟通成本,提升团队研发效能.所以本文中是笔者结合阿里巴巴开发规范,以及工作中的见闻针对Java领域相关命名进行整理和总结,仅供参考. 一.Java中的命 ...

  4. javaScript之基础介绍

    前言一:javascript历史背景介绍 布兰登 • 艾奇(Brendan Eich,1961年-),1995年在网景公司,发明的JavaScript. 一开始JavaScript叫做LiveScri ...

  5. 定时任务之SpringSchedule的注意事项

    在我们现在的项目中,或多或少的都会涉及到定时任务,Spring在3.0之后引入了SpringSchedule,这让我们在使用Spring的时候,可以很容易的整合SpringSchedule.但是好用归 ...

  6. 数据库——SQL-SERVER CREATE-TABLES

    给出数据库实验所需要的“CREATE-TABLES.SQL”文件 use master go if exists (select * from dbo.sysdatabases where name ...

  7. Python爬取6271家死亡公司数据，看十年创业公司消亡史

    前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者: 朱小五 凹凸玩数据 PS:如有需要Python学习资料的小伙伴可以加 ...

  8. 完整版的CAD技巧！3天轻松玩转CAD，零基础也能学会

    最近有很多小伙伴反应,CAD图纸学起来有点小困难,也许你还没能掌握技巧,CAD大神带你3天轻松玩转CAD,零基础也能快速学会. 一.看懂图纸是关键 CAD制图首先得让自己知道要绘制什么,如果心中对图纸 ...

  9. JS基础语法---函数练习part2---10个综合练习（运用：循环/数组/函数）

    练习1:求2个数中的最大值 function getMax(num1, num2) { return num1 > num2 ? num1 : num2; } console.log(getMa ...

  10. 简单文件传输协议TFTP分析还原

    - 协议介绍 TFTP有如下特征: 1.UDP承载,请求端口固定为69: 2.没有列出目录内容功能: 3.无验证和加密机制: 4.仅有读取或写入文件功能: 5.支持三种不同的传输模式:"ne ...