Vue首次渲染的过程

本文详细解析Vue首次渲染的过程,从vm.$mount()开始,包括runtime中的$mount,再到mountComponent及其内部的生命周期,最后深入watcher.get(),揭示Vue如何编译模板、生成render函数,以及将虚拟DOM转换为真实DOM并完成挂载。
摘要由CSDN通过智能技术生成

首先Vue先初始化所有的实例成员和静态成员,生成Vue实例

再初始化完成后调用Vue实例的init方法,整个Vue首次渲染的初始化方法

在Vue的init方法中调用了$mount  vm.$mount()

一、vm.$mount()

第一个$mount是入口文件的$mount 文件位置为src\platforms\web\entry-runtime-with-complier.js 这个文件中$mount的核心作用是把模板编译成render函数,首先它会判断是否传入了render选项,如果没有传入的话会去获取传入template选项,如果template也没有的话会把el中的内容作为模板,然后把模板编译成render函数,在此中是通过complierToFuntion()帮助把模板编译成render函数的,当编译成render函数后,它会存在Vue实例options中 options.render = render

二、vm.$mount() (runtime中)

第二个$mount方法 文件位置在src\platforms\web\runtime.js中 此时 它会执行mountComponent() 在这个方法中首先会重新获取el ,如果Vue是运行时版本不会走这个入口 会从runtime\index中的$mount中重新获取el

三、mountComponent(this,el)

这个方法在src\core\instance\lifeCycle.js中定义,在这个方法中首先判断是否有render选项,如果没有render选项还传入了模板,并且当前是开发环境的话会发送一个警告因为运行时版本不支持编译器,再然后出发了beforeMount这个函数,也就是说实在挂载之前,再往下定义updateComponent函数此处仅仅是定义&#x

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值