Vue AST源码解析第一篇


Posted in Javascript onJuly 19, 2017

讲完了数据劫持原理和一堆初始化,现在是DOM相关的代码了。

上一节是从这个函数开始的:

// Line-3924
 Vue.prototype._init = function(options) {
  // 大量初始化
  // ...
  // Go!
  if (vm.$options.el) {
   vm.$mount(vm.$options.el);
  }
 };

弄完data属性的数据绑定后,开始处理el属性,也就是挂载的DOM节点,这里的vm.$options.el也就是传进去的'#app'字符串。

有一个值得注意的点是,源码中有2个$mount函数都是Vue$3的原型函数,其中一个标记了注释public mount method,在7531行,另外一个在9553行。打断点进入的是后面,因为定义的晚,覆盖了前面的函数。

// Line-7531
 // public mount method
 Vue$3.prototype.$mount = function(el,hydrating) {
  el = el && inBrowser ? query(el) : undefined;
  return mountComponent(this, el, hydrating)
 };

 // Line-9552
 var mount = Vue$3.prototype.$mount;
 Vue$3.prototype.$mount = function(
  el,
  hydrating
 ) {
  // ...很多代码
  return mount.call(this, el, hydrating)
 };

现在进入后面的$mount函数看看内部结构:

// Line-9552
 var mount = Vue$3.prototype.$mount;
 Vue$3.prototype.$mount = function(el,hydrating) {
  // 将el格式化为DOM节点
  el = el && query(el);
  // 判断是否挂载到body或者html标签上
  if (el === document.body || el === document.documentElement) {
   "development" !== 'production' && warn(
    "Do not mount Vue to <html> or <body> - mount to normal elements instead."
   );
   return this
  }

  var options = this.$options;
  // 处理template/el 转换为渲染函数
  if (!options.render) {
   // ...非常多代码
  }
  return mount.call(this, el, hydrating)
 };

代码前半段首先将el转换为DOM节点,并判断是否挂载到body或者html标签,看看简单的query函数:

// Line-4583
 function query(el) {
  // 如果是字符串就调用querySelector
  if (typeof el === 'string') {
   var selected = document.querySelector(el);
   if (!selected) {
    "development" !== 'production' && warn(
     'Cannot find element: ' + el
    );
    // 找不到就返回一个div
    return document.createElement('div')
   }
   return selected
  }
  // 不是字符串就默认传进来的是DOM节点 
  else {
   return el
  }
 }

函数比较简单,值得注意的几个点是,由于调用的是querySelector方法,所以可以传标签名、类名、C3新选择器等,都会返回查询到的第一个。当然,总是传一个ID或者确定的DOM节点才是正确用法。

下面看接下来的代码:

// Line-9552
 var mount = Vue$3.prototype.$mount;
 Vue$3.prototype.$mount = function(el,hydrating) {
  // ...el转换为DOM节点
  // ...
  // 没有render属性 进入代码段
  if (!options.render) {
   var template = options.template;
   // 没有template 跳
   if (template) {
    if (typeof template === 'string') {
     if (template.charAt(0) === '#') {
      template = idToTemplate(template);
      /* istanbul ignore if */
      if ("development" !== 'production' && !template) {
       warn(
        ("Template element not found or is empty: " + (options.template)),
        this
       );
      }
     }
    } else if (template.nodeType) {
     template = template.innerHTML;
    } else {
     {
      warn('invalid template option:' + template, this);
     }
     return this
    }
   }
   // 有el 获取字符串化的DOM树
   else if (el) {
    template = getOuterHTML(el);
   }
   if (template) {
    // ...小段代码
   }
  }
  return mount.call(this, el, hydrating)
 };

由于没有template属性,会直接进入第二个判断条件,调用getOuterHTML来初始化template变量,函数比较简单, 来看看:

// Line-9623
 function getOuterHTML(el) {
  if (el.outerHTML) {
   return el.outerHTML
  }
  // 兼容IE中的SVG
  else {
   var container = document.createElement('div');
   container.appendChild(el.cloneNode(true));
   return container.innerHTML
  }
 }

简单来讲,就是调用outerHTML返回DOM树的字符串形式,看图就明白了:

Vue AST源码解析第一篇

下面看最后一段代码:

// Line-9552
 var mount = Vue$3.prototype.$mount;
 Vue$3.prototype.$mount = function(el,hydrating) {
  // ...el转换为DOM节点
  // ...
  // 没有render属性 进入代码段
  if (!options.render) {
   // ...处理template
   // ...
   if (template) {
    // 编译开始
    if ("development" !== 'production' && config.performance && mark) {
     mark('compile');
    }

    // 将DOM树字符串编译为函数
    var ref = compileToFunctions(template, {
     shouldDecodeNewlines: shouldDecodeNewlines,
     delimiters: options.delimiters
    }, this);
    // options添加属性
    var render = ref.render;
    var staticRenderFns = ref.staticRenderFns;
    options.render = render;
    options.staticRenderFns = staticRenderFns;

    // 编译结束
    if ("development" !== 'production' && config.performance && mark) {
     mark('compile end');
     measure(((this._name) + " compile"), 'compile', 'compile end');
    }
   }
  }
  return mount.call(this, el, hydrating)
 };

忽略2段dev模式下的提示代码,剩下的代码做了3件事,调用compileToFunctions函数肢解DOM树字符串,将返回的对象属性添加到options上,再次调用mount函数。

首先看一下compileToFunctions函数,该函数接受3个参数,分别为字符串、配置对象、当前vue实例。

由于函数比较长,而且部分是错误判断,简化后如下:

// Line-9326
 function compileToFunctions(template,options,vm) {
  // 获取配置参数
  options = options || {};

  // ...

  var key = options.delimiters ?
   String(options.delimiters) + template :
   template;
  // 检测缓存
  if (functionCompileCache[key]) {
   return functionCompileCache[key]
  }

  // 1
  var compiled = compile(template, options);

  // ...

  // 2
  var res = {};
  var fnGenErrors = [];
  res.render = makeFunction(compiled.render, fnGenErrors);
  var l = compiled.staticRenderFns.length;
  res.staticRenderFns = new Array(l);
  for (var i = 0; i < l; i++) {
   res.staticRenderFns[i] = makeFunction(compiled.staticRenderFns[i], fnGenErrors);
  }

  // ...

  // 3
  return (functionCompileCache[key] = res)
 }

可以看到,这个函数流程可以分为4步,获取参数 => 调用compile函数进行编译 => 将得到的compiled转换为函数 => 返回并缓存。

 第一节现在这样吧。一张图总结下:

Vue AST源码解析第一篇

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
更快的异步执行(setTimeout多浏览器)
Aug 12 Javascript
js中this的用法实例分析
Jan 10 Javascript
微信小程序(应用号)简单实例应用及实例详解
Sep 26 Javascript
js获取Get值的方法
Sep 29 Javascript
简单谈谈JS数组中的indexOf方法
Oct 13 Javascript
Jquery Easyui菜单组件Menu使用详解(15)
Dec 18 Javascript
JS中from 表单序列化提交的代码
Jan 20 Javascript
微信小程序实现滑动删除效果
May 19 Javascript
JS实现中文汉字按拼音排序的方法
Oct 09 Javascript
SVG实现时钟效果
Jul 17 Javascript
Angular8 Http拦截器简单使用教程
Aug 20 Javascript
element-ui如何防止重复提交的方法步骤
Dec 09 Javascript
Vue之Watcher源码解析(1)
Jul 19 #Javascript
angular.js + require.js构建模块化单页面应用的方法步骤
Jul 19 #Javascript
Vue学习笔记进阶篇之多元素及多组件过渡
Jul 19 #Javascript
vue中的非父子间的通讯问题简单的实例代码
Jul 19 #Javascript
Vue之Watcher源码解析(2)
Jul 19 #Javascript
Angular.js项目中使用gulp实现自动化构建以及压缩打包详解
Jul 19 #Javascript
JS+canvas实现的五子棋游戏【人机大战版】
Jul 19 #Javascript
You might like
两种php调用Java对象的方法
2006/10/09 PHP
php 魔术函数使用说明
2010/02/21 PHP
基于session_unset与session_destroy的区别详解
2013/06/03 PHP
Linux操作系统安装LAMP环境
2015/06/26 PHP
php删除一个路径下的所有文件夹和文件的方法
2018/02/07 PHP
php实现的数组转xml案例分析
2019/09/28 PHP
laravel5.5安装jwt-auth 生成token令牌的示例
2019/10/24 PHP
收集的一些Array及String原型对象的扩展实现代码
2010/12/05 Javascript
javascript判断iphone/android手机横竖屏模式的函数
2011/12/20 Javascript
基于jQuery的遍历同id元素 并响应事件的代码
2012/06/14 Javascript
使用按钮控制以何种方式打开新窗口的属性介绍
2012/12/17 Javascript
jquery实现智能感知连接外网搜索
2013/05/21 Javascript
JS中把字符转成ASCII值的函数示例代码
2013/11/21 Javascript
表单验证正则表达式实例代码详解
2015/11/09 Javascript
JS基于递归实现倒计时效果的方法
2016/11/26 Javascript
BootStrap Datetimepicker 汉化的实现代码
2017/02/10 Javascript
Vue.js实现移动端短信验证码功能
2017/03/29 Javascript
微信小程序支付功能 php后台对接完整代码分享
2018/06/12 Javascript
浅谈super-vuex使用体验
2018/06/25 Javascript
浅谈element中InfiniteScroll按需引入的一点注意事项
2020/06/05 Javascript
浅谈vue 多个变量同时赋相同值互相影响
2020/08/05 Javascript
[31:00]2014 DOTA2华西杯精英邀请赛5 24 NewBee VS iG
2014/05/25 DOTA
python实现的登录和操作开心网脚本分享
2014/07/09 Python
Django1.9 加载通过ImageField上传的图片方法
2018/05/25 Python
Django实现跨域的2种方法
2019/07/31 Python
Python中正反斜杠(‘/’和‘\’)的意义与用法
2019/08/12 Python
Python time库基本使用方法分析
2019/12/13 Python
如何使用html5与css3完成google涂鸦动画
2012/12/16 HTML / CSS
美国职棒大联盟的官方手套、球和头盔:Rawlings
2020/02/15 全球购物
兼职业务员岗位职责
2014/01/01 职场文书
十八大报告观后感
2014/01/28 职场文书
坚定理想信念心得体会
2014/03/11 职场文书
2014年保洁员工作总结
2014/11/19 职场文书
综合测评自我评价
2015/03/06 职场文书
2015年小学语文工作总结
2015/05/25 职场文书
前端JS获取URL参数的4种方法总结
2022/04/05 Javascript