vue源码之首次渲染过程详解
更新时间：2022年02月09日 09:40:33 作者：前端阿龙
这篇文章主要为大家详细介绍了vue源码之首次渲染过程，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
首次渲染
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
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!
您可能感兴趣的文章:
相关文章
这篇文章主要给大家介绍了关于vue的ssr服务端渲染的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
这篇文章主要介绍了解决Vue 移动端点击出现300毫秒延迟的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要为大家详细介绍了vue实现指定日期之间的倒计时，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-05-05
这篇文章主要介绍了vue中内嵌iframe的src更新页面未刷新问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
Element Table的row-class-name无效与动态高亮显示选中行背景色
这篇文章主要介绍了Element Table的row-class-name无效与动态高亮显示选中行背景色，本文详细的介绍了解决方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
这篇文章主要介绍了Vue 电商后台管理项目阶段性总结，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-08-08
使用vue深度选择器修改ElementUI组件内样式的示例代码
在带有scoped属性的style中书写样式时，无法作用影响到子组件中的样式，此时我们会使用到deep深度选择器，来解决此问题，我们在使用less预处理器，能正常使用，但是在scss预处理器中会报错，下面通过本文介绍vue深度选择器修改ElementUI组件内样式,需要的朋友可以参考下2022-12-12
这篇文章主要介绍了vue 微信授权解决方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
这篇文章主要为大家详细介绍了vue实现自定义表格工具扩展，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
有时候我们需要在vue中使用轮播组件,如果是在vue组件中引入第三方组件的话,最好通过npm安装,从而进行统一安装包管理,下面这篇文章主要给大家介绍了关于vue调用swiper插件的相关资料,需要的朋友可以参考下2023-04-04
最新评论