new vue 实例发生了什么呢？

前言

　　最近全面栽进vue源码解析中，将出一系列的学习笔记 以及个人的一些总结

 

1. 第一步准备工作
   1. 到GitHub上下载vue的源码（巧妇难为无米之炊）
   2. 用自己喜欢的编辑器打开源码
   3. vue主要源码資源在src文件中
   4. 放一张很流行解说vue数据响应式的图儿
2. 第二步认识目录结构
3. 第三步一回只理清一条线 (这次我们主要是理清new vue 实例 vue 做了哪些工作)
   1. vue 用 flow 静态类型检查（flow是如何工作的呢 可以上官网看看）
   2. vue 用 rollup 构建 （为什么不用webpack ？）
   3. 用脚手架（vue-cli）写demo （new vue 实例）
   4. 在index.js 中有定义 vue 函数（src/core/instance/index.js 源码路径）

   5. mport { initMixin } from './init'
      import { stateMixin } from './state'
      import { renderMixin } from './render'
      import { eventsMixin } from './events'
      import { lifecycleMixin } from './lifecycle'
      import { warn } from '../util/index'
      /*Github:https://github.com/answershuto*/
      function Vue (options) { //vue 函数
        if (process.env.NODE_ENV !== 'production' &&
          !(this instanceof Vue)) {
          warn('Vue is a constructor and should be called with the `new` keyword')
        }
        /*初始化*/
        this._init(options) //调用了这个函数 这个函数是定在原型上的 
      }
      
      initMixin(Vue)
      stateMixin(Vue)
      eventsMixin(Vue)
      lifecycleMixin(Vue)
      renderMixin(Vue)
      
      export default Vue

       

   6. 初始化inti函数 定义了 _inti(src/core/instance/inti.js 源码路径)
   7. 在inti 很重要的是合并了options(你在new vue 实例传的参数) 
   8. mergeOptions主要调用两个方法，resolveConstructorOptions和mergeOptions。(实例化组件还是实例化对象)
   9. 合并options 后检查 是否有el (肯定不陌生 el:'#app')

      if (vm.$options.el) {
            /*挂载组件*/
            vm.$mount(vm.$options.el)
          }

   10. 迎来很重要的函数 $mount （重点记下这个函数）
   11. 挂载后 打开浏览器页面 打开调试工具 查看dom结构
   12. 可以看到el对应的dom

 

Fannie式总结

本章的结构我觉得已经是非常的清晰了 

$mount 函数具体又做了什么？请听下回分解

跟着我 突破vue源码坑