源码学习的好处

大幅度提升编码水平

  • 了解架构设计
  • 设计模式
  • 命名风格
  • 数据结构及算法

提升问题解决能力

知其然知其所以然

提升思维逻辑能力

源码阅读技巧

高效源码学习技巧 - 图1

案例实操

Vue编译器

高效源码学习技巧 - 图2

Vue生命周期

  • 生命周期图示

image.png

  • 生命周期钩子
    1. var LIFECYCLE_HOOKS = [
    2.   'beforeCreate',
    3.   'created',
    4.   'beforeMount',
    5.   'mounted',
    6.   'beforeUpdate',
    7.   'updated',
    8.   'beforeDestroy',
    9.   'destroyed',
    10.   'activated',
    11.   'deactivated',
    12.   'errorCaptured',
    13.   'serverPrefetch'
    14. ];

$mount 函数解析

_this_.$options 自定义配置，以用户为优先，以用户配置为覆盖

  1. // install platform patch function
  2. Vue.prototype.__patch__ = inBrowser ? patch : noop;
  4. // public mount method
  5. Vue.prototype.$mount = function (
  6. el,
  7.  hydrating
  8. ) {
  9.   /**
  10.          * @desc $mount 初始化
  11.          * 先去检测是否在浏览器环境，
  12.          * 如果在浏览器环境返回el元素
  13.          * 运行时，直接使用就可以
  14.          */
  15.   el = el && inBrowser ? query(el) : undefined;
  16.   // 挂载组件的入口函数
  17.   return mountComponent(this, el, hydrating)
  18. };
  1. // 先将 mount 缓存起来
  2. var mount = Vue.prototype.$mount;
  1. // 完整时构建
  2. Vue.prototype.$mount = function (
  3. el,
  4.  hydrating
  5. ) {
  6.   el = el && query(el);
  8.   /* istanbul ignore if */
  9.   if (el === document.body || el === document.documentElement) {
  10.     warn(
  11.       "Do not mount Vue to <html> or <body> - mount to normal elements instead."
  12.     );
  13.     return this
  14.   }
  16.   /**
  17.          * @desc 用于当前 Vue 实例的初始化选项。需要在选项中包含自定义 property 时会有用处
  18.          * @type {{}}
  19.          */
  20.   var options = this.$options;
  21.   // resolve template/el and convert to render function
  22.   if (!options.render) {
  23.     var template = options.template;
  24.     if (template) {
  25.       if (typeof template === 'string') {
  26.         if (template.charAt(0) === '#') {
  27.           template = idToTemplate(template);
  28.           /* istanbul ignore if */
  29.           if (!template) {
  30.             warn(
  31.               ("Template element not found or is empty: " + (options.template)),
  32.               this
  33.             );
  34.           }
  35.         }
  36.       } else if (template.nodeType) {
  37.         template = template.innerHTML;
  38.       } else {
  39.         {
  40.           warn('invalid template option:' + template, this);
  41.         }
  42.         return this
  43.       }
  44.     } else if (el) {
  45.       template = getOuterHTML(el);
  46.     }
  47.     if (template) {
  48.       /* istanbul ignore if */
  49.       if (config.performance && mark) {
  50.         mark('compile');
  51.       }
  53.       /**
  54.                  * @desc 检测最终编译的模板是谁 ？ 字符串模板， "<div id='app'></div>"
  55.                  * @type {*|{}}
  56.                  */
  57.       var ref = compileToFunctions(template, {
  58.         outputSourceRange: "development" !== 'production',
  59.         shouldDecodeNewlines: shouldDecodeNewlines,
  60.         shouldDecodeNewlinesForHref: shouldDecodeNewlinesForHref,
  61.         delimiters: options.delimiters,
  62.         comments: options.comments
  63.       }, this);
  64.       var render = ref.render;
  65.       var staticRenderFns = ref.staticRenderFns;
  66.       options.render = render;
  67.       options.staticRenderFns = staticRenderFns;
  69.       /* istanbul ignore if */
  70.       if (config.performance && mark) {
  71.         mark('compile end');
  72.         measure(("vue " + (this._name) + " compile"), 'compile', 'compile end');
  73.       }
  74.     }
  75.   }
  76.   return mount.call(this, el, hydrating)
  77. };