vue源码解析-new Vue

233 阅读1分钟

废话不多说,直接进入正题。

在源码 src/core/instance/index.js 文件


从源码可以看出在new的时候,就是在实例化一个Vue对象。Vue这个函数最后是调用了 this._init() 这个方法,这个方法在src/core/instance/init.js里面定义


从源码可以看出this._init()方法主要执行了以下几个部分

  1. this._init()方法先初始化一些参数,如:uid
  2. 合并options配置,可以通过vm.$options.el等访问到创建实例时传入的option
  3. 初始化各种函数,初始化生命周期,初始化事件中心,初始化data,初始化props,computed,watcher等

判断实例是否存在vm.$options.el,存在的话,执行$mount方法,将vm挂载到dom节点上。

经过这一步,页面就会从 {{ message }}变为 ’hello vue‘。主要流程是el、template->render表达式->Vnode->DOM