VueRouter源码分析(1)--主要执行步骤

前言

本文是vue-router 2.x源码分析的第一篇，主要看vue-router的整体结构！

实例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="app">
      <h1>Basic</h1>
      <ul>
        <li><router-link to="/">/</router-link></li>
        <li><router-link to="/foo">/foo</router-link></li>
        <li><router-link to="/bar">/bar</router-link></li>
        <router-link tag="li" to="/bar" :event="['mousedown', 'touchstart']">
          <a>/bar</a>
        </router-link>
      </ul>
      <router-view class="view"></router-view>
    </div>
    <script src='vue.js'></script>
    <script src='vue-router.js'></script>
    <script>
        const Home = { template: '<div>home</div>' }
        const Foo = { template: '<div>foo</div>' }
        const Bar = { template: '<div>bar</div>' }
        //创建router实例
        const router = new VueRouter({
          routes: [
            { path: '/', component: Home },
            { path: '/foo', component: Foo },
            { path: '/bar', component: Bar }
          ]
        })
        //创建vue实例
        new Vue({
          router
        }).$mount('#app')
    </script>
</body>
</html>

1、执行Vue.use(VueRouter)

VueRouter是作为Vue的插件存在的，使用Vue.use(VueRouter)的方式侵入Vue，这个操作在引入vue-router.js时就执行了，Vue.use方法会执行VueRouter的install方法，看下该方法：

function install (Vue) {
    if (install.installed) { return }
    install.installed = true;
    _Vue = Vue;
    //1、将$router和$route定义为Vue.prototype的存取器属性，以便所有组
    //件都可以访问到，注意这个get函数，是返回this.$root._router而不是
    //this._router,这是因为在beforeCreate中将_router放在了vue根实例上
    Object.defineProperty(Vue.prototype, '$router', {
        get: function get () { return this.$root._router }
    });
    Object.defineProperty(Vue.prototype, '$route', {
        get: function get () { return this.$root._route }
    });
    var isDef = function (v) { return v !== undefined; };
    var registerInstance = function (vm, callVal) {
        var i = vm.$options._parentVnode;
        if (isDef(i) && isDef(i = i.data) && isDef(i = i.registerRouteInstance)) {
            i(vm, callVal);
        }
    };
    //2、使用mixin构造了一个beforeCreate函数，该函数会在vue实例创建的
    // 时候被调用
    Vue.mixin({
        beforeCreate: function beforeCreate () {
            if (isDef(this.$options.router)) {
                this._router = this.$options.router;
                //执行router的初始化
                this._router.init(this);
                //route定义为响应式以便能在其改变时触发vue的更新机制
                Vue.util.defineReactive(this, '_route', this._router.history.current);
            }
            registerInstance(this, this);
        },
        destroyed: function destroyed () {
            registerInstance(this);
        }
    });
    // 3、增加vue的默认组件
    Vue.component('router-view', View);
    Vue.component('router-link', Link);
    var strats = Vue.config.optionMergeStrategies;
    // use the same hook merging strategy for route hooks
    strats.beforeRouteEnter = strats.beforeRouteLeave = strats.created;
}

以上三件事执行完，就开始new VueRouter了

2、创建VueRouter实例(new VueRouter(options))

    function VueRouter (options) {
      if ( options === void 0 ) options = {};
      this.app = null;
      this.apps = [];
      this.options = options;
      this.beforeHooks = [];
      this.resolveHooks = [];
      this.afterHooks = [];
      //1、根据传入的options.routes创建matcher对象
      this.matcher = createMatcher(options.routes || [], this);
      //2、根据传入的options.mode创建不同的history对象
      var mode = options.mode || 'hash';
      this.fallback = mode === 'history' && !supportsPushState;
      if (this.fallback) {
        mode = 'hash';
      }
      if (!inBrowser) {
        mode = 'abstract';
      }
      this.mode = mode;
      switch (mode) {
        case 'history':
          this.history = new HTML5History(this, options.base);
          break
        case 'hash':
          this.history = new HashHistory(this, options.base, this.fallback);
          break
        case 'abstract':
          this.history = new AbstractHistory(this, options.base);
          break
        default:
          {
            assert(false, ("invalid mode: " + mode));
          }
      }
    };

先看第一件事，由routes创建matcher

    //routes长这样：
    routes: [
        { path: '/', component: Home },
        { path: '/foo', component: Foo },
        { path: '/bar', component: Bar }
    ]
    //经过createMatcher处理的matcher长这样：
    matcher:{
        addRoutes:function addRoutes(routes)
        match:function match( raw, currentRoute, redirectedFrom )
        __proto__:Object
    }

再看第二件事，由mode创建history

    //mode默认值为'hash',故会创建HashHistory实例
    history:{
        base:""
        current:Object
        errorCbs:Array(0)
        pending:null
        ready:false
        readyCbs:Array(0)
        readyErrorCbs:Array(0)
        router:VueRouter
        __proto__:History
    }

最后创建的router实例长这样：

    router:{
        afterHooks:Array(0)
        app:null
        apps:Array(0)
        beforeHooks:Array(0)
        fallback:false
        history:HashHistory
        matcher:Object
        mode:"hash"
        options:Object
        resolveHooks:Array(0)
        currentRoute:(...)
        __proto__:Object
    }

创建的具体细节以后会分析。这两件事情做完就开始new Vue(options)了。

3、创建Vue实例(new Vue(options))

创建Vue实例的过程中会调用beforeCreate函数，故在第一节中定义的beforeCreate会得到执行：

    function beforeCreate () {
      if (isDef(this.$options.router)) {
        //1、正式将第二节创建的router实例挂在this._router上，这个this
        //是根实例，相当于子组件中的this.$root，因此在子组件中能通过t
        //his.$router访问到
        this._router = this.$options.router;
        //2、执行router的初始化
        this._router.init(this);
        //3、将_route定义为响应式以便能在其改变时触发vue的更新机制
        Vue.util.defineReactive(this, '_route', this._router.history.current);
      }
      //4、注册组件实例
      registerInstance(this, this);
    },

这里主要看下第二步router的初始化：

    function init (app /* Vue component instance */) {
          //注意this是VueRouter实例，app是Vue实例
          var this$1 = this;
          //将当前Vue实例app存入VueRouter实例this.apps数组中，因为一
          //个应用可能不止一个Vue实例，故用数组保存。
          this.apps.push(app);
          // main app already initialized.
          if (this.app) {
            return
          }
          //将当前Vue实例app存在VueRouter实例this.app下
          this.app = app;
          var history = this.history;
          //当点击一个路径时，页面会绘制该路径对应的组件，history
          //.transitionTo方法就是干这个事的，后续再分析
          if (history instanceof HTML5History) {
            history.transitionTo(history.getCurrentLocation());
          } else if (history instanceof HashHistory) {
            var setupHashListener = function () {
              history.setupListeners();
            };
            history.transitionTo(
              history.getCurrentLocation(),
              setupHashListener,
              setupHashListener
            );
          }
          //监听route,一旦route发生改变就赋值给app._route从而触发页面
          //更新，达到特定route绘制特定组件的目的
          history.listen(function (route) {
            this$1.apps.forEach(function (app) {
              app._route = route;
            });
          });
    };

beforeCreate函数执行完后，继续Vue实例化的过程，这里就回到了Vue渲染页面的过程，如下图：

渲染过程.png

4、小结

以上分析可以看出引入vue-router时代码的执行流程：

执行install方法。主要做了3件事：a、将$router和$route定义为Vue.prototype的存取器属性；b、使用Vue.mixin方法创建了beforeCreate函数；c、扩充了Vue的默认组件，即增加了router-link和router-view两个组件。
创建VueRouter实例。主要做了2件事：a、根据routes创建matcher；b、根据mode创建history。
创建Vue实例。主要做了1件事：调用beforeCreate函数，继而执行router.init方法去完善router对象。