入口文件 runtime-dom/src/index.txcreateapp -> 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最终执行的方法
初始化流程1、根组件的实例化：调用createcomponentinstance
2、初始化根组件：调用setupcomponent方法，也就是vue2中的this.$_init方法，用来将选项进行合并，并设置钩子和响应式
3、安装render函数的副作用函数：setuprenderereffect
在vue3中取消了watcher改为了副作用函数，副作用函数会在每次响应式数据发生变化的时候重新执行，内部的render函数的执行会触发依赖收集，这样当响应式数据变化时，响应式组件就会更新。
ps：与react中的useeffect不同的方面是，useeffect需要手动的收集依赖，而vue中的effect()会自动的收集依赖。
以上就是vue3初始化怎么调用函数的详细内容。