Vue 首次渲染的过程

在这里插入图片描述

1、Vue初始化 实例成员、静态成员
2、初始化结束后调用new Vue()构造函数
3、在new Vue()构造函数中调用this._init()方法,这个方法相当于整个vue的入口
4、在this._init()方法中定义了 vm. m o u n t ( ) 此 处 定 义 的 mount() 此处定义的 mount()mount为入口文件中的src\platforms\web\entry-runtime-with-compiler.js,
核心作用是把模板编译成render函数,首先会先判断是否传入render,如果没有传入,则会先获取template选项,如果template也没有,
则会把el中的内容作为模板,然后把模板编译成render函数,而这个过程是通过compileToFunctions()这个方法生成render(),最终将编译
好的render存入到options.render当中,即options.render = render()
5、调用 src\platforms\web\runtime\index.js 文件当中的 $mount 方法,在这个方法中会重新获取el,调用mountComponent()方法

6、mountComponent方法在 core/instance/lifecycle 这个文件中定义,在这个方法中首先会判断是否有render选项,如果没有但是传入了模板,
并且当前是开发环境的话会发送警告,目的是提示运行时版本不支持编译器。
触发beforeMount钩子函数
定义updateComponent函数,调用vm._update(vm._render()) 、vm._render()渲染,作用是渲染虚拟DOM,vm._update()更新,作用是将虚拟DOM转换成真实DOM
创建Watcher实例,调用updateComponent(),调用get()
触发mounted()
return vm
7、Watcher.get(),创建完watcher会调用一次get,在get方法中调用updateComponent(),vm._render(),在这个方法中调用render.call(vm._renderProxy,vm. c r e a t E l e m e n t ) , 实 例 化 时 传 入 的 r e n d e r 或 者 编 译 t e m p l a t e 生 成 的 r e n d e r 返 回 V N o d e v m . u p d a t e ( ) , 调 用 v m . p a t c h ( v m . creatElement),实例化时传入的render或者编译template生成 的render 返回VNode vm._update(),调用vm._patch_(vm. creatElement),rendertemplaterenderVNodevm.update(),vm.patch(vm.el.vnode)挂载真实DOM,记录vm.$el

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值