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

最新推荐文章于 2024-05-07 23:22:21 发布
最新推荐文章于 2024-05-07 23:22:21 发布
阅读量597 收藏
点赞数
文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/web2022050901/article/details/125389576
版权

接上回说到，我们已经实现了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 初始化时做了什么
12-11
这次先来一起看看 vue-router 初始化时做了什么。 vue router 的初始化使用步骤 我们首先来看 vue-router 的使用步骤，然后再分别去看各个步骤都发生了什么。 使用 vue-router 需要经过一下几个步骤： 引入 vue-...
可视化大屏 Vue3 版本vue-big-screen-plugin-master.zip
04-04
可视化大屏 Vue3 版本vue-big-screen-plugin-master.zip
数据量太大，DOM节点加载过多，怎么保证前端在渲染的时候页面不会卡（性能优化）
Best_ID的博客
06-07 3827
一、定时器分批渲染既然一次渲染10万条数据会造成页面加载速度缓慢，那么我们可以不要一次性渲染这么多数据，而是分批次渲染， 比如一次10000条，分10次来完成， 这样或许会对页面的渲染速度有提升。 然而，如果这13次操作在同一个代码执行流程中运行，那似乎不但无法解决糟糕的页面卡顿问题，反而会将代码复杂化。 类似的问题在其它语言最佳的解决方案是使用多线程，JavaScript虽然没有多线程，但是setTimeout和setInterval两个函数却能起到和多线程差不多的效果。 因此，要解决这个问题， 其中的s
vue3学习
violetta521的博客
05-22 425
vue3 官网Vite 官网//查看vue版本 必须在4.5.0以上//升级vue//创建项目重写向数据绑定//vue2//defineProperty只有知道key，才能读取拦截，所以新增属性v2表示无能为力get(){},set(){},})//知道对象名就可以读取或拦截data上任意的key})相比有以下优势：丢掉麻烦的备份数据省去for in 循环可以监听数组变化代码更简化可以监听动态新增的属性；可以监听删除的属性；可以监听数组的索引和 length 属性；
vue3如何实现预渲染超详细保姆级
最新发布
weixin_55493330的博客
05-07 472
Vue 3提供了一种名为"静态站点生成（Static Site Generation，SSG）"的预渲染方式，可以将部分或全部页面在构建时预先生成为静态HTML文件。这些预渲染的HTML文件可以直接部署在任何静态服务器上，从而实现更快的首次加载速度和SEO优化。运行以上命令后，Vue将根据预定义的路由列表生成静态HTML文件，并保存在。在Vue项目的根目录下创建一个。在Vue项目的入口文件（一般是。的目录，并在其中新建一个。
vue3的使用细节
x65456的博客
04-06 158
分为完整引入和按需引入，后者减少耗能,另外vue2和vue3的引入方式也不一样。5、vue2引用的是 element vue3引用的是element plus。1、、 在终端里npm install element-plus --save。2、setup可以重复使用多次生命周期函数，划分不同的业务,使用前需要引入。2、、在main.js里。1、、把main.js里面的添加element的东西删了。2、、然后复制粘贴到config.js把里面的覆盖掉。然后就可以直接在页面组件里使用。4、、改变字体图标大小。
javascript --- > Vue初始化 && 模板渲染
栗子好好吃的博客
03-01 295
不带响应式的Vue缩减实现 模板 现有模板如下: <div id ="app"> <div class="c1"> <div title='tt1' id="id">{{ name }}</div> <div title='tt2' >{{age}}</div> <...
Vue3核心源码解析第三课 组件渲染前的初始化过程
fegus的博客
07-12 960
Vue.js 3.0 允许我们在编写组件的时候添加一个 setup 启动函数，它是 Composition API 逻辑组织的入口，本节课我们就来分析一下这个函数。我们先通过一段代码认识它，在这里编写一个 button 组件： 可以看到，这段代码和 Vue.js 2.x 组件的写法相比，多了一个 setup 启动函数，另外组件中也没有定义 props、data、computed 这些 options。在 setup 函数内部，定义了一个响应式对象 state，它是通过 reactive API 创建的。st
大前端学习-Vue首次渲染过程
大白菜的博客
07-30 3268
文章内容输出来源：拉勾教育大前端高薪训练营 最近在学习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 190
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 1235
   先上图： 首先进行Vue的初始化，初始化Vue的实例成员以及静态成员。 当初始化结束之后，开始调用构造函数，在构造函数中调用this._init()，这个方法相当于我们整个Vue的入口。 在_init()中调用this.$mount()，共有两个this.$mount()。      第一个this.$mount()是entry-runtime-with-compiler.js入口文件，这个$mount()的核心作用是
vue-upload-cropper:结合 ELUpload + vue-cropper 进行图片初始化渲染，图片上传裁剪的封装
05-10
vue-upload-cropper结合 element-ui upload + vue-cropper 进行图片初始化渲染，图片上传裁剪的封装DemoNotices使用条件：使用 elementUI编译环境安装并配置 babel-plugin-transform-vue-jsx，babel-plugin-syntax-...
vue-cli3搭建项目的详细步骤
12-11
npm install -g @vue/cli (ps: vue cli2的安装方法 npm install -g vue-cli ) 安装全局桥插件,能兼容使用vue cli2 npm install -g @vue/cli-init cmd命令行创建项目 1. 快速创建一个新项目 vue create name 2. ...
Vue3 从初始化到首次渲染发生了什么？
m0_53273062的博客
06-25 470
在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 153
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 992
初始化一个Vue3+TS项目
vue3+ts项目初始化
指尖细砂
12-02 650
vue3+ts 后台管理端项目初始化
vue3+element-plus动态渲染级联选择器，重置渲染数据
博客
12-22 716
解决方法：在级联中绑定options，在需要重置的地方设置为空（虽然动态渲染的级联选择器根本就不需要。...一直在试ref绑定各种方法，但是都失败了，反而这样写成功了...需求：重置级联选择器。
Vue3——02路由跳转以及数据渲染的新写法
NanChen的博客
03-01 1798
目录 一、路由跳转的写法 useRouter 二、引入element-ui支持Vue3的组件库 三、Vue3中的Composition API Composition API 的优势 在传统的Vue2中 的Options API 存在的问题 四、ref | reactive 一、路由跳转的写法 useRouter 官网解释： 使用useRouter对路由进行跳转 HomeView.vue页面 <p @click="goAbout">点我</...
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、付费专栏及课程。

余额充值