Vue源码分析（一）

一、初始化

源码目录

1.new Vue()

当我们new Vue({el:&＃39;#app&＃39;,data:{}}) 时候&＃xff0c;这是就要找到Vue的构造函数
该文件的路径为src\core\instance\index.jsVue的构造函数 判断环境并且 立即调用this._init()方法&＃xff0c;并把参数传入。
function Vue (options) {判断是否为生产环境并且 检查vue是否在this的prototype的原型上// if (process.env.NODE_ENV !&＃61;&＃61; &＃39;production&＃39; &&// !(this instanceof Vue)// ) {// warn(&＃39;Vue is a constructor and should be called with the &＃96;new&＃96; keyword&＃39;)// }this._init(options)
}
合并配置
initMixin(Vue)
定义$data,props,set,delete,watch,并且$data和$props是只读属性。
stateMixin(Vue)
初始化事件中心
eventsMixin(Vue)
初始化生命周期
lifecycleMixin(Vue)
初始化渲染函数
renderMixin(Vue)export default Vue

Vue就是一个Function实现的类&＃xff0c;使用必须是new实例&＃xff0c;然后调用this._init方法

构造函数下方执行了很多方法&＃xff08;***MIixin&＃xff08;Vue&＃xff09;&＃xff09;&＃xff0c;这些方法的作用就是给Vue的prototype上面添加一些方法&＃xff0c;这些方法是按照功能去定义的&＃xff0c;分别在多个模块去实现。

2.this._init()的过程

• this._init(options) 该方法是在initMixin(Vue)里面实现的。
• 路径 src\core\instance\init.js

Vue: Class 指定传入参数为class类export function initMixin (Vue: Class) {在Vue的原型上面添加_init()方法 负责vue的初始化过程。Vue.prototype._init &＃61; function (options?: Object) {获取vue的实例const vm: Component &＃61; this每个vue上面都有一个uid让vueuid自增保证vue的唯一性vm._uid &＃61; uid&＃43;&＃43;vue实例不应该是一个响应式的&＃xff0c;做个标记vm._isVue &＃61; true*****************************************************************************if (options && options._isComponent) {/*** 如果是子组件初始化时走这里,这里只做了一些性能优化* 将组件配置对象上的一些深层次属性放到 vm.$options 选项中&＃xff0c;以提高代码的执行效率*/initInternalComponent(vm, options)} else {vm.$options &＃61; mergeOptions(resolveConstructorOptions(vm.constructor),options || {},vm)}/* istanbul ignore else */if (process.env.NODE_ENV !&＃61;&＃61; &＃39;production&＃39;) {initProxy(vm)} else {vm._renderProxy &＃61; vm}// expose real selfvm._self &＃61; vm组件关系初始化initLifecycle(vm)初始化自定义事件initEvents(vm)初始化插槽initRender(vm)调用 beforeCreate 的生命周期callHook(vm, &＃39;beforeCreate&＃39;)provide和reject传值initInjections(vm) // resolve injections before data/props数据初始化 响应式原理的核心,处理 props methods computed data watch 等initState(vm)provide和reject传值initProvide(vm) // resolve provide after data/props调用 created 的生命周期callHook(vm, &＃39;created&＃39;)/* istanbul ignore if */// if (process.env.NODE_ENV !&＃61;&＃61; &＃39;production&＃39; && config.performance && mark) {// vm._name &＃61; formatComponentName(vm, false)// mark(endTag)// measure(&＃96;vue ${vm._name} init&＃96;, startTag, endTag)// }判断数据中有没有el&＃xff0c;如果有&＃xff0c;自动执行$mount没有的话&＃xff0c;就要手动去挂载。if (vm.$options.el) {vm.$mount(vm.$options.el)}}
}

3.响应式原理initState&＃xff08;vm&＃xff09;

• initState在import { initState } from &＃39;./state&＃39;
• 同级目录下找到state.js

export function initState (vm: Component) {vm._watchers &＃61; []const opts &＃61; vm.$options处理props对象 为每一个props对象上面设置响应式if (opts.props) initProps(vm, opts.props)处理methodsif (opts.methods) initMethods(vm, opts.methods)初始化data&＃xff0c;if (opts.data) {initData(vm)} else {observe(vm._data &＃61; {}, true /* asRootData */)}处理conputedif (opts.computed) initComputed(vm, opts.computed)处理watchif (opts.watch && opts.watch !&＃61;&＃61; nativeWatch) {initWatch(vm, opts.watch)}
}