Vue源码一行行分析（一）整体分析

妖狐艹你老母 2023-05-31 07:56 14阅读 0赞

##### 一、前言 #####

Vue的项目也已经做了四五个了，虽然已经能够基本的做项目，但是要知其然，知其所以然，所以今天来研究一下源码，虽然自己前面也断续了看了一下源码， 但是你懂得，看源码真的看得头痛，所以就放弃了很多次，今天，就开始写这一部分，一则是为了记录自己的学习，以供自己的成长，以及后续的回顾，避免走弯路，二则则是表明自己的决心，相当于立一个flag，督促自己研究下去，好啦，闲话少叙，开工。

##### 二、准备 #####

这里只是下一个打包后的vue.js文件，而没有去下载vue的源码文件，因为vue的源码文件太复杂，我们先拿打包后的vue的js文件来分析，我们先了解vue的基本原理之后，我再下载他的源码文件，一步步来，步子太大，容易扯着…蛋(咳咳) ,当前vue.js的版本为v2.6.10，整体如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70]  
从上面图可以看出：vue.js整体为一个立即执行函数，学名IIFE,不知道的可以自己去百度一下，这里先不过多叙述，这个立即执行函数最大的作用是防止变量的污染，第一个参数将当前环境的this传入，第二个factory，可以理解为工厂函数，里面的typeof检验exports，module，module.exports在当前环境是否可用，不知道这三个东西的可以去看[ES6阮一峰][ES6]，总之就是各种校验之后调用工厂函数。

##### 三、调试 #####

index.html

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>vue-sync</title>
      
      <script src="./vue.js"></script>
    </head>
    
    <body>
      <div id="app">
        { { msg}}
      </div>
    </body>
    <script>
      var vm = new Vue({ 
        el: '#app',
        data: { 
          msg: 'hello vue'
        }
      })
    </script>
    
    </html>

从上面可以看出，创建一个Vue实例，然后在vue.js找到构造函数

function Vue(options) { 
        if (!(this instanceof Vue) // 如果没有使用new Vue创建实例的方式使用Vue，会报下面的警告
        ) { 
          warn('Vue is a constructor and should be called with the `new` keyword');
        }
        this._init(options);
      }

找到this.\_init

Vue.prototype._init = function (options) { 
          debugger
          var vm = this;
          // a uid
          vm._uid = uid$3++;
    
          var startTag, endTag;
          /* istanbul ignore if */
          if (config.performance && mark) { 
            startTag = "vue-perf-start:" + (vm._uid);
            endTag = "vue-perf-end:" + (vm._uid);
            mark(startTag);
          }
    
          // a flag to avoid this being observed
          vm._isVue = true;
          // merge options
          if (options && options._isComponent) { 
            // optimize internal component instantiation
            // since dynamic options merging is pretty slow, and none of the
            // internal component options needs special treatment.
            initInternalComponent(vm, options);
          } else {  // 合并options，因为Vue自身有option，与用户传入的option合并
            vm.$options = mergeOptions(
              resolveConstructorOptions(vm.constructor),
              options || { },
              vm
            );
          }
          /* istanbul ignore else */
          { 
            initProxy(vm);
          }
          // expose real self
          vm._self = vm;
          initLifecycle(vm);
          initEvents(vm);
          initRender(vm);
          callHook(vm, 'beforeCreate');
          initInjections(vm); // resolve injections before data/props
          initState(vm);
          initProvide(vm); // resolve provide after data/props
          callHook(vm, 'created');
    
          /* istanbul ignore if */
          if (config.performance && mark) { 
            vm._name = formatComponentName(vm, false);
            mark(endTag);
            measure(("vue " + (vm._name) + " init"), startTag, endTag);
          }
    
          if (vm.$options.el) { 
            vm.$mount(vm.$options.el);
          }
        };

可以看出，\_init是放在Vue的原型链上，在上面的\_init方法里已经写上了debugger，调试已经开始了，浏览器打开index.html 按F12  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70 1]  
上面的config为全局配置，你可以查找var config = 就可以定位到相应的位置，先不说，具体作用请看[官方API文档全局配置][API]，而config.performance表示  
**设置为 true 以在浏览器开发工具的性能/时间线面板中启用对组件初始化、编译、渲染和打补丁的性能追踪。只适用于开发模式和支持 performance.mark API 的浏览器上。** 所以config.performance下方的代码是性能相关，先不去了解，不是说我们每行真的要懂，不可能的，一个框架，是经过了很多时间来磨合，要解决很多问题，所以有些我们不懂很正常，不可能一下就全懂一个框架源码，所以我们要学会去蚕食，去分解，最后掌握大部分，即可。

// 这段代码是合并options，将前面我们传入的options与框架自身的options合并，
    // 并将合并options放入到Vue的$options上
     if (options && options._isComponent) { 
            // optimize internal component instantiation
            // since dynamic options merging is pretty slow, and none of the
            // internal component options needs special treatment.
            initInternalComponent(vm, options);
          } else { 
          // 将vm.constructor传入，即将当前实例的构造函数传入
            vm.$options = mergeOptions(
              resolveConstructorOptions(vm.constructor),
              options || { },
              vm
            );
          }

// 合并options
     function mergeOptions(
        parent,
        child,
        vm
      ) { 
        { 
        //检测用户传入的options里面的component属性是否符合html5规范，不符合会警告
          checkComponents(child);
        }
    	// 如果child为方法，让child等于child里面的options
        if (typeof child === 'function') { 
          child = child.options;
        }
    	// 以下三个是验证pros，inject directive，这里先没看，先不看
        normalizeProps(child, vm);
        normalizeInject(child, vm);
        normalizeDirectives(child);
    
        // Apply extends and mixins on the child options,
        // but only if it is a raw options object that isn't
        // the result of another mergeOptions call.
        // Only merged options has the _base property.
        if (!child._base) { 
          if (child.extends) { 
            parent = mergeOptions(parent, child.extends, vm);
          }
          if (child.mixins) { 
            for (var i = 0, l = child.mixins.length; i < l; i++) { 
              parent = mergeOptions(parent, child.mixins[i], vm);
            }
          }
        }
    
        var options = { };
        var key;
        for (key in parent) { 
          mergeField(key);
        }
        for (key in child) { 
          if (!hasOwn(parent, key)) { 
            mergeField(key);
          }
        }
        function mergeField(key) { 
          var strat = strats[key] || defaultStrat;
          options[key] = strat(parent[key], child[key], vm, key);
        }
        return options
      }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70 2]  
合并之后获得的options  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70 3]

可以看出parent是Vue自带的option，而child是我们自己定义的，vm为this，主要是合并的代码，这里应该不难，一步步 调试，就可以看出变化。将options合并到vue的$options上之后。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70 4]  
下面进来代理拦截initProxy，而proxy是ES6的语法，语法详情可以看[阮一峰ES6 proxy][ES6 proxy],对this对象进行拦截，其中hasProxy验证当前环境是否可以使用Proxy

initProxy = function initProxy(vm) { 
          if (hasProxy) {  // 当环境能使用proxy 为true
            // determine which proxy handler to use
            var options = vm.$options;
            var handlers = options.render && options.render._withStripped
              ? getHandler
              : hasHandler;
            vm._renderProxy = new Proxy(vm, handlers); // 当访问vm的时候，会先进入handlers拦截过滤
          } else { 
            vm._renderProxy = vm;
          }
        };
      }

// 当获取的时候触发，判断key是否是字符串 并且是否属于对象属性，如果不通过 则警告
    var getHandler = { 
          get: function get(target, key) { 
            if (typeof key === 'string' && !(key in target)) { 
              if (key in target.$data) {  warnReservedPrefix(target, key); }
              else {  warnNonPresent(target, key); }
            }
            return target[key]
          }
        };

// 判断key是否是保留字 第一个字符是下划线为保留字，如果是则警告， 不是则通过
     var hasHandler = {  // 在Proxt中，has在 for...in中会使用到，意思就是说循环遍历的时候会触发
          has: function has(target, key) {  // target为目标对象
            var has = key in target;
            var isAllowed = allowedGlobals(key) ||
              (typeof key === 'string' && key.charAt(0) === '_' && !(key in target.$data));
            if (!has && !isAllowed) { 
              if (key in target.$data) {  warnReservedPrefix(target, key); }
              else {  warnNonPresent(target, key); }
            }
            return has || !isAllowed
          }
        };

就是说在使用vm的使用，会先调用initProxy设置的代理过滤，如果不满足条件的话，会警告你的，后面会单独开一章来举列子说明吧，现在将的比较笼统，只要知道这个是设置拦截过滤了，不满足条件的话会警告的，我们继续调试。  
然后就到了关键部分了，如下如所示，这就不得不讲到Vue的生命周期了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70 5]  
相信大家对这张图片不陌生吧。下面的图片就是对我们上面截图图片的流程化的介绍，我们一一分析  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70 6]  
开始我们new Vue对应上图头部  
!\[在这里插入图片描述\](https://img-blog.csdnimg.cn/20200114104042426.png  
![在这里插入图片描述][2020011410405871.png]

... //前面代码省略
      	vm._self = vm;
          initLifecycle(vm); // 初始化生命周期 其实就是一些变量的定义，详情可以自己看，不难
          initEvents(vm); // 初始化事件
          initRender(vm); // 初始化渲染 里面代码看不懂，以后研究
          callHook(vm, 'beforeCreate'); // 执行beforeCreate钩子函数
          initInjections(vm); //初始化注入 涉及到inject的用法
          initState(vm); // vue双向绑定相关
          initProvide(vm); // 初始化 provide 与上面的inject相关
          callHook(vm, 'created'); // 执行created钩子，这个时候data数据已经完成绑定，所以这就是为什么我们
          							//一般在created调用方法的原因了。
           /* istanbul ignore if */
          if (config.performance && mark) {  // 设置为 true 以在浏览器开发工具的性能/时间线面板中
         //启用对组件初始化、编译、渲染和打补丁的性能追踪。只适用于开发模式和支持
         // performance.mark API 的浏览器上。
            vm._name = formatComponentName(vm, false);
            mark(endTag);
            measure(("vue " + (vm._name) + " init"), startTag, endTag);
          }
    
          if (vm.$options.el) {  // 判断是否有el选项，没有的话 自行调用vm.$mount也可以渲染
            vm.$mount(vm.$options.el);
          }

下方为$mount方法

Vue.prototype.$mount = function (
        el,
        hydrating
      ) { 
        el = el && query(el);
    
        /* istanbul ignore if */
        if (el === document.body || el === document.documentElement) { 
          warn(
            "Do not mount Vue to <html> or <body> - mount to normal elements instead."
          );
          return this
        }
    
        var options = this.$options;
        // resolve template/el and convert to render function
        if (!options.render) {  // 判断是否有render
          var template = options.template;
          if (template) { // 判断是否有template
            if (typeof template === 'string') { 
              if (template.charAt(0) === '#') { 
                template = idToTemplate(template);
                /* istanbul ignore if */
                if (!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
            }
          } else if (el) { // 既没有render也没有template 使用外部模板
            template = getOuterHTML(el);
          }
          if (template) { 
            /* istanbul ignore if */
            if (config.performance && mark) { 
              mark('compile');
            }
    
            var ref = compileToFunctions(template, {  // 与AST虚拟语法树有关 后续将
              outputSourceRange: "development" !== 'production',
              shouldDecodeNewlines: shouldDecodeNewlines,
              shouldDecodeNewlinesForHref: shouldDecodeNewlinesForHref,
              delimiters: options.delimiters,
              comments: options.comments
            }, this);
            var render = ref.render;
            var staticRenderFns = ref.staticRenderFns;
            options.render = render;
            options.staticRenderFns = staticRenderFns;
    
            /* istanbul ignore if */
            if (config.performance && mark) { 
              mark('compile end');
              measure(("vue " + (this._name) + " compile"), 'compile', 'compile end');
            }
          }
        }
        return mount.call(this, el, hydrating)
      };

mount.call(this, el, hydrating)调用如下：

Vue.prototype.$mount = function (
        el,
        hydrating
      ) { 
        el = el && inBrowser ? query(el) : undefined;
        return mountComponent(this, el, hydrating)
      };

mountComponen如下：

上面的挖掘就到此告一段落 你现在不需要知道他们干了什么，实际上上面一大部分都是为了将模板渲染成AST，然后转换成VNode，在转换成html，大致是这个样子，你现在只要知道流程，如上面贴的生命周期流程，现在你应该懂了官方的生命周期是什么意思吧，以及他们相应的钩子，会直接触发的原理的吧。

##### 四、总结 #####

看了上面的分析，你也应该了解很多了，总结一下吧，new Vue -> mergeOptions合并options -> initProxy设置代理 ->初始化生命周期initLifecycle->初始化事件initEvents ->初始化渲染initRender->执行beforeCreate生命钩子->初始化注入initInjections->绑定数据initState->  
初始化provide initProvide ->执行created生命钩子->询问是否有el ->没有退出，有则继续询问有没有render->没有询问有没有template->没有使用外部模板->执行beforeMount生命钩子->执行mounted生命钩子

没有画流程图，简单的用箭头表示，偷点懒，拿着官方的生命周期图，对着代码一步步走，一目了然，我偷不偷懒无所谓，下章待续…

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70]: /images/20230531/12009c6283af44f381db5d5623bebe35.png
[ES6]: http://es6.ruanyifeng.com/#docs/module
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70 1]: /images/20230531/3fe8121378074b4b816c0b54d815e10d.png
[API]: https://cn.vuejs.org/v2/api/#performance
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70 2]: /images/20230531/e7003a12ecd74719a46c747619c6d91b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70 3]: /images/20230531/6684e427493245b4b52091dc10cd8ac0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70 4]: /images/20230531/e3549449ab2f431ea129617cdc191f56.png
[ES6 proxy]: http://es6.ruanyifeng.com/#docs/proxy
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70 5]: /images/20230531/0fb4d2815cbf4c69818d9bf6ee1fd7f7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70 6]: /images/20230531/7dd643c0b9c54282b47e79a21e3e659c.png
[2020011410405871.png]: /images/20230531/e28ba379ce7842b88e39e5e43e85d983.png