Vue3中runtime-dom的实现-详细步骤

最新推荐文章于 2024-07-02 12:23:03 发布
最新推荐文章于 2024-07-02 12:23:03 发布
阅读量1.2k 收藏
点赞数
文章标签： 前端 javascript 大数据
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/web2022050901/article/details/125446298
版权
本文详细介绍了Vue3中runtime-dom的实现过程，包括创建runtime-dom文件夹、编写nodeOps和patchProp方法，处理class、style和事件，以及render API。讲解了runtime-dom如何封装平台特定代码并调用渲染器进行虚拟DOM的渲染。强调了runtime-dom与平台相关，而runtime-core则与平台无关。
摘要由CSDN通过智能技术生成

Vue为了解耦，将逻辑分成了两个模块

  • 运行时 （不依赖平台的browser），主要靠的是虚拟dom，它是可以跨平台的
  • 针对不同平台的运行时，vue就是针对浏览器平台的
  • runtime-dom提供一个渲染器，这个渲染器可以渲染虚拟dom节点到指定的容器中。

官方提供

image.png

  • 根据用户传入的内容进行渲染

我们实现这个runtime-dom，创建runtime-dom文件夹

image.png

创建src文件夹，下面创建index.ts，以及nodeOps.ts提供一些对节点的操作

插入节点

image.png

  • anchor是插入参照物，可以为null，当anchor参数为null的时候，inserBefore等同于appendChild

创建元素

最低0.47元/天 解锁文章
蚂蚁二娘
关注
Vue3元素的初始化渲染-详细步骤
老司机的后备箱
06-21 640
接上回说到，我们已经实现了h方法和createVnode方法，那么我们目前已经可以拿到处理后的虚拟dom和用户传入的renderOptions，接下来我就开始进行渲染[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AYuTGIki-1655790599009)(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/93c6d276a5b1438787a62b40fc4a31ef~tplv-k3u1fbpfcp-zoom-in-cro
【学习笔记】Vue3源码解析：第四部分- runtime-dom（1）
youyoufenglai的博客
04-16 1260
第四部分-：（对应课程的第24-26节）
Vue3源码学习之路-实现runtime-dom
凉秋秋秋
09-08 1761
Vue3源码学习之路-实现runtime-dom
vue3源码（六）渲染原理-runtime-dom
最新发布
cwjxyp的博客
07-02 483
项目入口文件文件位置保证了render的中主要调用了创建返回的App，中返回核心方法主要包含了创建渲染器和更新和渲染的一系列方法，接下来开始从使用到实现吧~
Vue3源码学习之路-实现runtime-core
凉秋秋秋
09-09 1002
Vue3源码学习之路-实现runtime-core
Vue 3.0 源码开放，看看都有哪些新特性
weixin_45566319的博客
10-16 222
当大多数国人还在庆祝国庆节的时候，尤雨溪大大在昨天凌晨发布了 Vue 3.0 源代码，源码地址：github.com/vuejs/vue-n… 。虽然目前还 处于 Pre-Alpha 版本，但是可以预见后面的 Alpha、Beta 等版本应该不会太遥远。 之前，就有预言，除了性能优化、脚手架和新功能外，TypeScript绝对是一个重点，因此，在Vue 3.0源代码版本中，98%代码由Types...
vue-next/runtime-core 源码阅读指南详解
10-16
本文将详细介绍如何阅读和理解 vue-next/runtime-core 的源码。 首先，阅读源码前的准备工作非常重要。你需要一个支持代码跳转的编辑器，如 VSCode，以及对 Vue.js 基本概念的理解，包括组件、虚拟 DOM、响应式系统...
vue-Source-code:vue原始码分析-vue source code
03-24
3. **组件系统**：Vue的组件是可复用的代码模块，它们在`src/core/instance`和`src/components`中实现。组件的生命周期、props、事件处理等特性都在这里定义。`Vue.extend`方法用于创建自定义组件。 4. **指令系统*...
runtime-dom.esm-bundler.js:33 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'parentNode')
08-13
根据提供的引用内容，报错信息"runtime-dom.esm-bundler.js:33 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'parentNode')"通常表示在Vue项目中使用过程中发生了一些错误。...
hand-vue3-project:Vue 3.x + Webpack 5.x 手动搭建开发环境
05-26
理解这些配置可以帮助你在项目中实现更高级的功能，如代码分割、动态导入、优化等。 通过以上步骤，你将拥有一个基于Vue 3.x和Webpack 5.x的开发环境，可以在这个环境中自由地创建和扩展你的JavaScript应用。这个...
vue-source-code-study-源码.rar
10-10
`src/platforms/web`目录包含了Web端的渲染器实现，如`render-dom`和`runtime-dom`。 10. **模块打包**： Vue的源码是模块化的，通过webpack等构建工具被打包成浏览器可执行的文件。`build`目录下包含了构建配置和...
vuecli安装时 runtime-compiler和runtime-only区别
ing的博客
04-21 247
一、引用 在使用vuecli2.x脚手架时候，有两个 runtime-Compiler和runtime-only选项 runtime-Compiler推荐大多用户使用 runtime-only 比上面那种模式轻大约 6KB 二、区别 1、runtime-only 比 runtime-compiler 轻 6kb 2、runtime-only 效率更高，打包更快 3、runtime-only 其实只能识别render函数，.vue文件中的也是被 vue-template-compiler 翻译成了ren
Vue 2.7 is Now in Beta
weixin_51083890的博客
07-05 2748
今天，Vue 创始人尤雨溪刚刚正式发布了 Vue 2.x 最后一个版本：Vue 2.7，代号 “Naruto”（火影忍者）。尽管现在 Vue 3 是默认版本，但由于仍有许多用户由于依赖兼容性、浏览器支持要求或没有足够的带宽升级而不得不继续使用 Vue 2。在 Vue 2.7 中，从 Vue 3 向后移植了一些最重要的功能，以便 Vue 2 用户也可以从中受益。此外，还支持以下 API：defineComponent()具有改进的类型推断（与Vue.extend)h(), , ,useSlot()useAtt
Vue1.0迁移到Vue2.0+ 遇到的问题 -- header.vue（二）
这里是迷阵的博客耶
07-27 649
header.vue报错 Failed to mount component: template or render function not defined. 解决方案： Vue1.0引入组件的方式：import star from "./components/star.vue"; 新的版本引入组件需要这样引用：const star = require('@/components/star')....
vscode vue2 + volar 全局代码提示
weixin_43724473的博客
04-17 5969
vscode vue2 + volar 实现vue.prototype全局属性 智能代码提示
【Vue3】源码解析-虚拟DOM
在这里你大概率会有所收获，欢迎指错||纠正||建议||水评+点赞&&评论&&关注&&转发
11-29 1822
vue.js3.0源码解析系列文章则是会从源码层面给大家抽丝剥茧，让大家知道我们内部到底是如何实现的。我们希望通过该源码解析系列，能让大家对有一个更深刻的理解。
[Vue 源码] v-model 逻辑分析
小王的技术库
03-06 347
最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。
Vue2---
Koite的博客
03-23 1483
Vue2 简介 一套用于构建用户界面的渐进式js框架 特点 1、采用组件化模式，提高代码复用率、且让代码更好维护 2、声明式编码，让编码人员无需直接操作DOM，提高开发效率 3、使用虚拟DOM+优秀算法Diff算法，尽量复用DOM节点 安装 官网：Vue.js 学习——教程——安装——用<script>引入——选择开发版或生产版 使用前准备 <script src="../../Vue/vue.js"> 将文件引入后打开浏览器测试，f12中会出现两个提示
前端vue入门(纯代码)04---全网最详细的Vue脚手架入门
m0_62003092的博客
06-08 533
Ctrl + C或 Ctrl +shift + C【以管理员的方式运行】Vue CLI叫做脚手架。，翻译为命令行接口工具，俗称脚手架。:创建Vue项目:运行该Vue项目。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值