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源码坑
    posted @ 2020-02-20 00:32  FannieGirl  阅读(1852)  评论(0编辑  收藏