Vue3元素的初始化渲染-详细步骤

最新推荐文章于 2024-05-14 11:14:12 发布
最新推荐文章于 2024-05-14 11:14:12 发布
阅读量614 收藏
点赞数
文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/web2022050901/article/details/125389576
版权
本文深入探讨Vue3的渲染过程，从runtime-core模块的renderer.ts入手，详细阐述render方法、patch方法以及遇到的问题，如处理儿子节点为数组的情况。文中还涉及了元素的挂载、更新及卸载逻辑，对文本节点和数组节点的处理进行了特殊说明。
摘要由CSDN通过智能技术生成

接上回说到，我们已经实现了h方法和createVnode方法，那么我们目前已经可以拿到处理后的虚拟dom和用户传入的renderOptions，接下来我就开始进行渲染

在runtime-core模块下的renderer.ts中我现在来着重写render方法

image.png

  • 如果拿到vnode是空的话，说明是一个卸载逻辑
  • 如果vnode不是空，那就是一个挂载逻辑
  • 调用patch方法，容器上的_vode保存上次的vnode

patch方法

image.png

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AYuTGIki-1655790599009)(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/93c6d276a5b1438787a62b40fc4a31ef~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image?)]

image.png

最低0.47元/天 解锁文章
蚂蚁二娘
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
详解vue-router 初始化时做了什么
08-27
以下是 Vue Router 初始化时的主要步骤和涉及的知识点： 1. **引入 Vue Router**： 首先，我们需要通过 `import VueRouter from 'vue-router'` 来引入 Vue Router 模块。这使得我们可以使用 Vue Router 提供的各种...
Vite+vue3+ts 项目初始化底座
02-21
本文将详细讲解如何使用Vite、Vue 3和TypeScript初始化一个项目底座。 **1. Vite介绍** Vite是基于ES模块的前端构建工具，它在开发环境中利用浏览器的原生模块加载能力，跳过了传统构建工具的打包步骤，实现了快速...
javascript --- > Vue初始化 && 模板渲染
栗子好好吃的博客
03-01 303
不带响应式的Vue缩减实现 模板 现有模板如下: <div id ="app"> <div class="c1"> <div title='tt1' id="id">{{ name }}</div> <div title='tt2' >{{age}}</div> <...
Vue3核心源码解析第三课 组件渲染前的初始化过程
fegus的博客
07-12 1039
Vue.js 3.0 允许我们在编写组件的时候添加一个 setup 启动函数，它是 Composition API 逻辑组织的入口，本节课我们就来分析一下这个函数。我们先通过一段代码认识它，在这里编写一个 button 组件： 可以看到，这段代码和 Vue.js 2.x 组件的写法相比，多了一个 setup 启动函数，另外组件中也没有定义 props、data、computed 这些 options。在 setup 函数内部，定义了一个响应式对象 state，它是通过 reactive API 创建的。st
基于uniapp+vue3+ts小程序项目实战之项目初始化
最新发布
二当家小D的学习资源库
05-14 593
uniapp+vue3+ts+vite+unocss小程序项目实战
大前端学习-Vue首次渲染过程
大白菜的博客
07-30 3288
文章内容输出来源：拉勾教育大前端高薪训练营 最近在学习Vue源码,然后主要是对Vue的首次渲染做一个总结～ 首先来看下图把,接下来会一步一步讲解 Vue源码地址,这里主要看src目录下面的源码 一、从入口文件开始 定义在 src/platform/web/entry-runtime-with-compiler.js 二、Vue初始化过程 1.首先取出Vue的$mount,对$mount进行重写,给$mount增加新的功能 // src/platform/web/entry-runtime-with-c.
Vue 首次渲染的过程
m0_54740440的博客
03-11 200
1、Vue初始化 实例成员、静态成员 2、初始化结束后调用new Vue()构造函数 3、在new Vue()构造函数中调用this._init()方法，这个方法相当于整个vue的入口 4、在this._init()方法中定义了 vm.mount()此处定义的mount() 此处定义的mount()此处定义的mount为入口文件中的src\platforms\web\entry-runtime-with-compiler.js， 核心作用是把模板编译成render函数，首先会先判断是否传入render，如.
Vue 首次渲染过程简述
Baron的技术blog
07-28 1243
   先上图： 首先进行Vue的初始化，初始化Vue的实例成员以及静态成员。 当初始化结束之后，开始调用构造函数，在构造函数中调用this._init()，这个方法相当于我们整个Vue的入口。 在_init()中调用this.$mount()，共有两个this.$mount()。      第一个this.$mount()是entry-runtime-with-compiler.js入口文件，这个$mount()的核心作用是
vite2 + vue3构建多页应用-源码demo
10-15
Vue3 提供了更加高效、模块化和可扩展的组件系统，而Vite2则是一款由Vue.js作者尤雨溪开发的新型构建工具，它利用了ES模块的原生加载能力，大大提升了开发时的性能。本项目“vite2 + vue3构建多页应用-源码demo”将...
vite+vue3动态模块化导入并使用pinia
03-25
与传统的Webpack相比，Vite在项目初始化和热重载速度上有显著优势，特别适合快速迭代的项目。 **Pinia** 是Vue3推荐的状态管理库，替代了原先的Vuex。Pinia保持了Vuex的核心理念，但设计得更加简洁，易于理解和使用...
vue服务端渲染ssr(server-side rendering)
11-10
6. **客户端启动：** 客户端加载时，使用`vue-router`的`replace`或`push`方法初始化状态，恢复到服务器渲染的视图。 **注意事项：** 1. **状态管理：** SSR中需要考虑状态的同步问题，如使用Vuex进行状态管理。 2....
Vue3 从初始化到首次渲染发生了什么？
m0_53273062的博客
06-25 476
在packages/runtime-core/src/apiCreateApp.ts中，他返回真正的createApp,内部包含了const app = createApp(App)。这里的app 就是一个包含了许多方法的对象。因此我们可以使用app.方法名调用。本文从createApp开始简要分析都做了些什么。位置在packages/runtime-dom/src/index.ts。方法非常长，包含了渲染器的所有方法,createApp是。这就是createApp大概流程。上，可能是后续渲染时会用到。
4. vue常用指令 v-once 初始化渲染数据
人无远虑,必有近忧.
07-02 162
vue指令 指令是vue内部提供的自定义属性 指令封装好vue内部特定功能 vue数据绑定特点 一般情况,数据发生变化,界面显示就会同步变化 v-once v-once指令让界面渲染后,界面不在跟随数据变化而变化 v-once不需要赋值,单纯的放在元素中就行 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compa
初始化一个Vue3+TS项目
qq_52031408的博客
04-16 1046
初始化一个Vue3+TS项目
vue3+ts项目初始化
指尖细砂
12-02 678
vue3+ts 后台管理端项目初始化
vue3+element-plus动态渲染级联选择器，重置渲染数据
博客
12-22 836
解决方法：在级联中绑定options，在需要重置的地方设置为空（虽然动态渲染的级联选择器根本就不需要。...一直在试ref绑定各种方法，但是都失败了，反而这样写成功了...需求：重置级联选择器。
Vue3——02路由跳转以及数据渲染的新写法
NanChen的博客
03-01 1818
目录 一、路由跳转的写法 useRouter 二、引入element-ui支持Vue3的组件库 三、Vue3中的Composition API Composition API 的优势 在传统的Vue2中 的Options API 存在的问题 四、ref | reactive 一、路由跳转的写法 useRouter 官网解释： 使用useRouter对路由进行跳转 HomeView.vue页面 <p @click="goAbout">点我</...
【Vuejs】1718- 一文看完Vue3的渲染过程
pingan8787
06-19 248
Vue3官网中有下面这样一张图，基本展现出了Vue3的渲染原理：render pipeline本文会从源码角度来草率的看一下Vue3的运行全流程，旨在加深对上图的理解，从下面这个很简单的使用示例开始：import{createApp,ref}from"vue"; createApp({ template:` <divclass="card"> ...
Vue 初始渲染流程 你理解了吗?
chenhongcancan的博客
05-20 151
要点 面试中有大量的题型和它高度相关 $mount() render() updateComponent() 渲染 Watcher patch() 例子 聊一聊 Vue 中是如何渲染 DOM 的? new Vue() 的过程, 页面是如何挂载的? 这是一个很庞大的工程, 整个过程很繁杂, 大概分为: 虚拟 DOM / render 函数 / 渲染 Watcher / patch 函数 / diff 算法这些要点 我们
vue组件的初始化过程和顺序是什么样的
07-13
3. 初始化数据：Vue会初始化组件的数据，包括响应式数据、props等。 4. 编译模板：Vue会将组件的模板编译成渲染函数。 5. 渲染组件：Vue会调用渲染函数，将组件渲染成虚拟DOM。 6. 创建子组件：如果组件包含子...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值