Vue3初始化怎么调用函数

时间：2023-05-22 01:22

Vue3初始化调用函数

createApp({}).mount(‘#app')

入口文件 runtime-dom/src/index.tx

createApp -> createRenderer -> createBaseRenderer(这里还创建了render函数以及一系列渲染时的函数) -> createAppAPI(返回了真正的createApp方法),返回了实例 app,
然后 app.mount(“#app”) -> createVNode -> render(vnode,rootcontainier,isSVG) -> patch -> processComponent -> mountComponent(初次渲染)或者是updateComponent ->(createComponentInstance , setupComponent,setupRenderEffect)
对于setupComponent,有setup函数和没有setup函数分情况处理,如果有就走setup函数处理,初始化props等需要传递给setup函数的参数,调用setup,setupComponent->finishComponentSetup(在这里会处理 2.x版本的options选项初始化),
对于setupRenderEffect,执行一系列生命钩子函数,创建渲染ReactiveEffect,并执行了**effect.run()**方法

ReactiveEffect

类似于 vue2.x 的Watcher, computed,watch,渲染过程中componentUpdateFn也使用了 ReactiveEffect,

const effect = new ReactiveEffect(fn,…)后,除了计算属性会在被访问时才去调用effect.run()->调用fn(),在fn里访问响应式变量,收集依赖,其余的setupRenderEffect,watch,watchEffect,均会在创建ReactiveEffect后调用effect.run()收集依赖,其中

setupRenderEffect会访问依赖的响应变量
watch(source,cb,options),会执行访问source的函数,收集依赖
watchEffect(fn),会自动执行一次fn收集依赖
effect(fn,options),其中options有个lazy:true选项,表示不立即执行fn函数收集依赖,返回一个run函数,再次调用run(),执行一次fn函数,收集依赖

// 1.计算属性// computed.ts// ComputedRefImpl类构造函数调用了new ReactiveEffectthis.effect = new ReactiveEffect(getter, () => {      if (!this._dirty) {        this._dirty = true        triggerRefValue(this)      }    })    // 2. effect// effect.ts// effect函数中,可以接收第二个参数effect(fn,{lazy:true}),表示不立即执行  const _effect = new ReactiveEffect(fn)// 3. apiWatch.ts doWatch方法// watch和watchEffect都是通过doWatch函数来,在这里调用new ReactiveEffect,然后根据不同情况执行effect.run(),对于watchEffect就是//执行器回调,对于watch就是访问监听的数据,然后收集依赖  const effect = new ReactiveEffect(getter, scheduler)// 4. render.ts//在 setupRenderEffect中const effect = (instance.effect = new ReactiveEffect(      componentUpdateFn,//更新组件函数      () => queueJob(update),      instance.scope // track it in component's effect scope    ))

Vue3程序初始化流程

初始化

Vue 3 不再使用 Vue2 的 new Vue() 方法进行程序初始化，而是采用了 createApp 方法。在createApp中发生了什么呢？

改写的原因

createApp是一个Vue中的工厂函数，以函数的方式进行导入和调用。而函数式的好处是

1、消灭了原来挂载在Vue上的静态方法，变成实例方法，可以减少内存占用，便于tree-shaking，减小了打包体积；

函数式和类装饰器在 TypeScript 的支持性很好，使用函数调用的方式可以更好地支持 TypeScript，从而提高类型支持

3、根组件的api，如data要和子组件的api保持相同的格式，挂载从$mount改为mount，简化了api并统一了api的一致性

4、new Vue中挂载的方法会造成全局污染，不能独立出来，createApp可以相互独立，并按需挂载。

流程实现

mount

const Vue = {	createApp(options) {		//返回app实例		return {			mount(selector){				// 获取渲染函数，编译结果				// 渲染dom，追加到宿主元素			}			compile(template){			//返回render				return function render(){					//描述视图				}			}		}	}}

在调用createApp时，如果options中无render，则初始化组件，调用compile产生一个render，若有render则直接挂载；

在Vue2中，添加元素使用了比较替换的方式，在diff元素之间的差异时进行对比判断，而在Vue3中，会直接删除并重新添加元素。

可以在setup或者是data中定义响应式变量， setup的优先级更高。

createApp

Vue暴露的两个初始化的函数，createApp和createRenderer，他们之间的调用关系

/*暴露给Vue的createApp*/function createApp(options){    const renderer =  Vue.createRenderer({        /*定义一些平台特有的api，一些实例*/        aaa(){},        bbb(){}    })    /*用户调用的createApp，实际上是渲染器的createApp*/    return renderer.createApp()}function createRenderer({aaa,bbb}){    /*获得渲染器*/    /*这个createApp是函数内部的*/    return createApp(options){        /*挂载逻辑*/        return {            /*返回App实例*/        }    }}

源码流程

1、用户调用createApp方法 =》通过ensureRenderer得到渲染器

2、渲染器调用createRender =》※调用工厂函数baseGreateRenderer，这个函数中定义了patch和diff等，最终会return一个render用来给spa页面进行渲染，一个hydrate用来给ssr页面进行注水，还有一个函数的createApp（不同于Vue的createApp）

3、在函数的createApp中会定义程序的实例方法，如mount，get，set，use，mixin等

4、mount实例方法会去查看是否有根组件挂载，使用什么方法进行挂载（spa/ssr）

5、render方法调用patch方法进行打补丁

6、patch方法根据传入的节点类型进行挂载方法的判断，如果首次挂载则为挂载component，之后是挂载element(patch方法会将vnode转化为node节点)

7、patch方法执行内部processComponent方法，最终执行mountComponent方法，也就是Vue2中$mount最终执行的方法