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

最新推荐文章于 2023-11-29 16:54:36 发布
最新推荐文章于 2023-11-29 16:54:36 发布
阅读量1.1k 收藏
点赞数
文章标签： 前端 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元/天 解锁文章
蚂蚁二娘
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3源码学习之路-实现runtime-dom
凉秋秋秋
09-08 1690
Vue3源码学习之路-实现runtime-dom
【学习笔记】Vue3源码解析：第四部分- runtime-dom（1）
最新发布
youyoufenglai的博客
04-16 1143
第四部分-：（对应课程的第24-26节）
Vue3源码学习之路-实现runtime-core
凉秋秋秋
09-09 962
Vue3源码学习之路-实现runtime-core
Vue 3.0 源码开放，看看都有哪些新特性
weixin_45566319的博客
10-16 174
当大多数国人还在庆祝国庆节的时候，尤雨溪大大在昨天凌晨发布了 Vue 3.0 源代码，源码地址：github.com/vuejs/vue-n… 。虽然目前还 处于 Pre-Alpha 版本，但是可以预见后面的 Alpha、Beta 等版本应该不会太遥远。 之前，就有预言，除了性能优化、脚手架和新功能外，TypeScript绝对是一个重点，因此，在Vue 3.0源代码版本中，98%代码由Types...
vuecli安装时 runtime-compiler和runtime-only区别
ing的博客
04-21 208
一、引用 在使用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-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. **指令系统*...
vue-source-code-study-源码.rar
10-10
`src/platforms/web`目录包含了Web端的渲染器实现，如`render-dom`和`runtime-dom`。 10. **模块打包**： Vue的源码是模块化的，通过webpack等构建工具被打包成浏览器可执行的文件。`build`目录下包含了构建配置和...
vue3-test:vue3源码的一些分析
03-23
虚拟智慧本仓库的使用按照学习步骤，按顺序提交commit ，进行注解；除主干逻辑外，其他一些细节分支也会进行注解；会把综合性的原始码解析，知识方案，发布到Issues ；每个月进行一次对vue-next的同步，确保即时性；...
部署vue+Springboot前后端分离项目的步骤实现
10-15
本文将详细介绍如何部署一个Vue+SpringBoot的前后端分离项目。 首先，我们从单页应用（SPA）的概念开始。SPA是指在浏览器加载初始HTML页面后，所有后续交互都通过Ajax或其他异步技术进行，无需重新加载整个页面。...
Vue 2.7 is Now in Beta
weixin_51083890的博客
07-05 2645
今天，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
vscode vue2 + volar 全局代码提示
weixin_43724473的博客
04-17 5627
vscode vue2 + volar 实现vue.prototype全局属性 智能代码提示
Vue1.0迁移到Vue2.0+ 遇到的问题 -- header.vue（二）
这里是迷阵的博客耶
07-27 532
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')....
学习vue2遇到过的问题及个人总结
刘大猫
05-26 2209
学习使用vue2时，碰到的问题及个人总结介绍
Vue学习笔记2-安装Vue
摘繁华
06-12 1315
Vue.js 设计的初衷就包括可以被渐进式地采用。这意味着它可以根据需求以多种方式集成到一个项目中。
Typescript学习笔记
kianagrow的博客
07-20 1122
TypeScript JavaScript 的超集，在 JS 基础之上，为 JS 添加了静态类型支持，提高代码的可读性和可维护性
【Vue3】源码解析-虚拟DOM
在这里你大概率会有所收获，欢迎指错||纠正||建议||水评+点赞&&评论&&关注&&转发
11-29 1474
vue.js3.0源码解析系列文章则是会从源码层面给大家抽丝剥茧，让大家知道我们内部到底是如何实现的。我们希望通过该源码解析系列，能让大家对有一个更深刻的理解。
深入学习Vue.js（三）渲染器的设计
volit的博客
12-31 1129
​ 在前文中我们提到过，因为虚拟DOM将UI抽象成了对象，因此借助虚拟DOM我们可以很容易的实现跨平台的特性。而渲染系统作为最核心的几个子系统之一，将它设计成可配置的，解耦合是非常有必要的。const {// 调用 createElement 函数创建元素 const el = createElement(vnode . type) if(typeof vnode . children === 'string') {
vue程序运行过程(runtime-compiler和runtime-only)
weixin_42043532的博客
08-17 1735
这个图就是一个vue文件的完整运行过程，在用vue-cli2创建项目时,会让我们选择两种类型：1.runtime-compiler     2.runtime-only 这两种类型的区别就在于： 1.runtime-compiler： template -> ast -> render -> vdom -> ui 通过这种方式创建的项目vue文件会完整的走一遍流程 2.runtime-only render -> vdom -> .
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项目中使用过程中发生了一些错误。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值