What new vue instance happened then?

Foreword

  Vue recently plunged into a comprehensive source parsing, the study notes as well as a series of summary of some individuals

 

  1. The first step in the preparatory work
    1. Vue to download the source code on GitHub (can not make bricks without straw)
    2. Use your favorite editor to open source
    3. vue main source of resources in the file src
    4. Put a very popular explanation vue data responsive Figure children
  2. The second step understanding of the directory structure
  3. The third step is to sort out a return only one line (this time we mainly to sort out new vue vue instance what had been done)
    1. vue flow static type checking with (flow of how it works can take a look at the official website)
    2. vue with a rollup build (why not webpack?)
    3. Write demo (new vue example) scaffold (vue-cli)
    4. Vue definition function (src / core / instance / index.js source path) in the 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源码坑

    Guess you like

    Origin www.cnblogs.com/ifannie/p/12334091.html