vue源码首次渲染过程

软件发布|下载排行|最新软件

当前位置:首页IT学院IT技术

vue源码首次渲染过程

前端阿龙   2022-05-23 我要评论

首次渲染

src/core/instance/index.js 中的 this._init方法

在这里插入图片描述

init方法内部

在这里插入图片描述
在这里插入图片描述

$mount内部 - 编译版本内部逻辑

在这里插入图片描述

$mount内部 - 运行时版本内部逻辑(最终执行) runtime/index中的 $mount方法

进入runtime/index中的$mount方法可以看到最终调用了mountComponent函数来渲染dom

core/instance/lifecycle 中的mountComponent

在这里插入图片描述

src/core/observer/watcher

在这里插入图片描述

在这里插入图片描述

总结

首次渲染过程

  • vue初始化 实例成员 静态成员
  • new Vue()
  • this._init()
  • vm.$mount() - src/platforms/web/entry-runtime-with-compiler.js
    • 如果没有传递render,把模版编译成render函数
    • compileToFunctions()生成render()渲染函数
    • options.render = render
  • vm.$mount() runtime/index中定义的 $mount 最终调用了mountComponent函数
  • mountComponent(this,el) - src/core/instance/lifecycle.js
    • 判断是否有render选项,如果没有但是传入了模版,并且当前是开发环境的话会发送警告
    • 触发beforeMount
    • 定义 updateComponent
    • 创建watcher实例
    • 触发mounted
    • return vm
  • watcher.get()
    • 创建完watcher之后会调用一次get
    • 调用updateComponent函数
    • 调用 vm._render函数创建VNode
      • 调用render.call(vm._renderProxy, vm.$createElement)
      • 调用实例化时vue传入的render 函数
      • 或者编译template生成的render
      • 返回vnode
    • 调用vm._update内部调用vm.__patch__方法挂载真实dom 记录 vm.$el

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注的更多内容!      

Copyright 2022 版权所有 软件发布 访问手机版

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 联系我们