文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Vue3初始化如何调用函数

2024-04-02 19:55

关注

Vue3初始化调用函数

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

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

ReactiveEffect

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

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

// 1.计算属性
// computed.ts
// ComputedRefImpl类构造函数调用了new ReactiveEffect
this.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程序初始化流程

初始化

在vue3中,程序的初始化不再沿用vue2的new Vue()方法,而是使用了createApp。在createApp中发生了什么呢?

改写的原因

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

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

2、因为函数式和class装饰器对ts的支持好,使用函数的方式调用,可以更好的支持ts,提高类型支持

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,他们之间的调用关系 


function createApp(options){
    const renderer =  Vue.createRenderer({
        
        aaa(){},
        bbb(){}
    })
    
    return renderer.createApp()
}
function createRenderer({aaa,bbb}){
    
    
    return createApp(options){
        
        return {
            
        }
    }
}

源码流程

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()会自动的收集依赖。 

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯