Vue源码学习。（一）

从入口开始

首先，我们需要先找到vue的入口。

• 1. 从package.josn 中，找到 "dev": "rollup -w -c scripts/config.js --sourcemap --environment TARGET:web-full-dev".

   // Runtime+compiler development build (Browser)
  'web-full-dev': {
        entry: resolve('web/entry-runtime-with-compiler.js'),
        dest: resolve('dist/vue.js'),
        format: 'umd',
        env: 'development',
        alias: { he: './entity-decoder' },
        banner
  },

• 2. platforms/web/entry-runtime-with-compiler.js

  扩展默认$mount方法：处理template或el选项

• 3. platforms/web/runtime/index.js

  定义$mount：挂载根组件到指定宿主元素
  定义__patch__：补丁函数，执行patching算法进行更新

• 4. core/index.js

  实现全局api，具体如下

  Vue.set = set
  Vue.delete = del
  Vue.nextTick = nextTick
  initUse(Vue) // 实现Vue.use函数
  initMixin(Vue) // 实现Vue.mixin函数
  initExtend(Vue) // 实现Vue.extend函数
  initAssetRegisters(Vue) // 注册实现Vue.component/directive/filter
  

• 5. 最终找到vue的庐山真面目 core/instance/index.js

  Vue构造函数定义，实例api定义

      function Vue (options) { 
          // 构造函数仅执行了_init
          this._init(options)
      }
      initMixin(Vue) // 实现init函数
      stateMixin(Vue) // 状态相关api $data,$props,$set,$delete,$watch
      eventsMixin(Vue)// 事件相关api $on,$once,$off,$emit
      lifecycleMixin(Vue) // 生命周期api _update,$forceUpdate,$destroy
      renderMixin(Vue)// 渲染api _render,$nextTick