Vue源码理解---敲门砖

new Vue({
   el:'#app',
   ...     
})

Vue是一个构造函数，在入口文件实例化一个构造函数

export function initMixin (Vue: Class<Component>) {
//实例化的Vue对象经过初始化
    Vue.prototype._init = function (options?: Object) {
        //将this对象赋值给一个变量
        const vm: Component = this
        // a uid  记录经过了几次初始化函数
        vm._uid = uid++

        //定义开始和结束变量
        let startTag, endTag
        /* istanbul ignore if */
        //判断是否生产环境
        if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
            startTag = `vue-perf-start:${vm._uid}`
            endTag = `vue-perf-end:${vm._uid}`
            mark(startTag)
        }

        // a flag to avoid this being observed 避免被观察的标志
        vm._isVue = true
        // merge options
        if (options && options._isComponent) {
            // optimize internal component instantiation
            // since dynamic options merging is pretty slow, and none of the
            // internal component options needs special treatment.
　　　　　　　//优化组件内部的实例化
            initInternalComponent(vm, options)
        } else {
            //合并this对象和实例化参数 参数1：对this对象进行处理；参数2：Vue对象参数；参数3：this对象本身
            vm.$options = mergeOptions(
                resolveConstructorOptions(vm.constructor),
                options || {},
                vm
            )
        }
        /* istanbul ignore else */
        //当前环境判断
        if (process.env.NODE_ENV !== 'production') {
            //当前环境为开发环境时，代理vm属性
            initProxy(vm)
        } else {
            //当前环境为生产环境时，vm
            vm._renderProxy = vm实例的_renderProxy属性指向vm本身
        }
        // expose real self
        vm._self = vm
        //初始化生命周期相关的属性，已经parent，child等属性赋值
        initLifecycle(vm)
　　　　　//初始化事件
        initEvents(vm)
　　　　　//初始化render函数
        initRender(vm)
　　　　　//用于实现钩子函数->brforeCreate的源码
        callHook(vm, 'beforeCreate')
　　　　　//父级组件向下传递数据
        initInjections(vm) // resolve injections before data/props
　　　　　//初始化state--数据绑定
        initState(vm)
　　　　　//父级组件向下传递数据
        initProvide(vm) // resolve provide after data/props
　　　　　//用于实现钩子函数->created的源码
        callHook(vm, 'created')

        /* istanbul ignore if */
        if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
            vm._name = formatComponentName(vm, false)
            mark(endTag)
            measure(`vue ${vm._name} init`, startTag, endTag)
        }

        //将Vue实例挂载到dom元素上
　　　　　if (vm.$options.el) {
            vm.$mount(vm.$options.el)
        }
    }
}

以上是new Vue之后，init的执行顺序，本系列只需了解Vue初始化函数

Vue源码理解---敲门砖

猜你喜欢