Vue源码理解---敲门砖

╰半夏微凉° 2023-08-17 16:42 53阅读 0赞

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初始化函数

转载于:https://www.cnblogs.com/qiemh/p/11287586.html