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

最新推荐文章于 2023-06-13 09:08:23 发布
VIP文章 最新推荐文章于 2023-06-13 09:08:23 发布
阅读量1.1k 收藏
点赞数
文章标签： 前端 javascript 大数据
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/web2022050901/article/details/125446298
版权

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实现v-model原理详解
10-16
主要介绍了vue3实现v-model原理详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue-next/runtime-core 源码阅读指南详解
10-16
主要介绍了vue-next/runtime-core 源码阅读指南详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue-dom-hints:Vue devtool，用于在DOM中标识Vue组件及其SFC路径
05-01
:light_bulb: 提示提示 通过__vue__属性在DOM中添加开发提示的Vue开发__vue__ 即时识别DOM中的所有Vue组件及其在代码库中的位置 :person_raising_hand: 为什么？ :glowing_star: 与浏览器无关的最小替代品！ :woman_detective: 无需再猜测只需检查DOM即可轻松识别Vue组件！ :fire: 更快的调试快速确定SFC路径并开始调试！ :high_voltage: 专家提示：在Chrome DevTools中，检查带有hint属性的元素， $0.__vue__在控制台中输入$0.__vue__ ，以进入视图模型并检查状态。 :rocket: 安装 npm i vue-dom-hints :vertical_traffic_light: 设置 将其作为安装到Vue： import DomHints from 'vue-dom-hints' Vue . use ( DomHints ) 在构建中将其禁用以进行生产： if ( process . env . NODE_ENV !== 'pr
vue3-icon-picker：Vue3项目的绝佳图标选择器
03-04
Vue3图标选择器 Vanilla Js版本是由很棒的人在这里开发的-https: 由移植到Vue3 :) 查看的演示:) 如何建造 git clone https://github.com/hasinhayder/vue3-icon-picker.git cd vue3-icon-picker yarn yarn dev # when you're happy with the changes yarn build 预览
vue使用better-scroll实现菜单列表左右联动
07-13
vue使用better-scroll实现菜单列表左右联动
Vue3源码学习之路-实现runtime-dom
凉秋秋秋
09-08 1624
Vue3源码学习之路-实现runtime-dom
Vue2.0教程（二） vue指令学习
qq_43682422的博客
04-09 2345
vue的基本使用 1）导入vue.js的script脚本文件 可以前往 https://staticfile.org/ 下载vue.js或者引入在线cdn 也可以前往 https://www.bootcdn.cn/ 下载vue.js或者引入在线cdn 2）在页面中声明一个将要被vue所控制的DOM区域 3）创建vm实例对象（vue实例对象） <body> <!--2.在页面中声明一个将要被vue所控制的DOM区域--> <div id="test">hel
Vue 2.7 is Now in Beta
weixin_51083890的博客
07-05 2547
今天，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 5038
vscode vue2 + volar 实现vue.prototype全局属性 智能代码提示
架构-vue3笔记
weixin_45687657的博客
05-03 265
1)组件首次调用执行effect的run方法，在run方法中收集每个属性和它依赖的effect，每个effect和它依赖的属性(在effect回调中取值时会走get方法，在get方法中调用track方法进行收集)4)执行runner.effect.stop()相当于执行effect上面的stop方法解除effect对应的属性上面的effect，这样属性改变对应的effect不执行。5.未知序列对比：根据新的节点 创造一个映射表 ， 用老的列表去里面找有没有，如果有则复用，没有就删除。最后新的多余在追加，
vue3-element-admin：vue3 + element-plus + typescript 后台管理系统
05-04
vue3-element-admin 是【有来开源组织】基于 Vue3 + Vite4 + TypeScript + Element-Plus + Pinia 等前端主流技术栈从0到1搭建后台管理系统模板（前后端开源）。 后端是基于 Spring Boot 3.0 、Spring Security 6.0 ...
Vue3是如何升级虚拟DOM模块的？
总柴的博客
04-26 1539
Vue3是如何升级虚拟DOM模块的？ 静态标记（PatchFlag） 在Vue2中，元素的更新比较是采用的全量对比的方式，虽然借鉴了react的diff算法中同级对比的方式进行了优化，但依然会对比部分静态节点，这明显还有优化空间。 所以在Vue3中采用了静态标记（PatchFlag）的方式对这部分进行优化。在render函数中就将每个节点进行分析，为动态节点进行标记，标明该节点是未来有可能变化的节点（即动态节点）；并且PatchFlag枚举定义了十几种类型，更精确的定位需要对比节点的类型。 现有如下DOM结
Vue1.0迁移到Vue2.0+ 遇到的问题 -- header.vue（二）
这里是迷阵的博客耶
07-27 351
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')....
7.vue3渲染模块的domAapi实现
wenyeqv的博客
07-17 431
vue3中渲染模块有两个子模块，分别是runtime-dom和runtime-core，其中，runtime-dom模块提供了常用的节点操作api和属性操作的api，而runtime-core中则包含虚拟dom的创建，diff算法等。本节来完善runtime-dom中的domapi，以便后面供runtime-core模块使用。通过vue3中的runtime-core可以实现自己的渲染逻辑。...
vue3初体验
weixin_46182770的博客
02-22 197
修改响应式对象的值-触发set操作-执行trigger-重新运行effect函数-执行fn-触发get操作-执行track-把effect收集起来作为依赖 (重新运行effect函数有基本上走了初始化收集依赖的流程)runtime-dom如图是依赖于后面的runtime-core和reactivity的，很多vue中的api都是由runtime-core中export出来的。创建effect对象-执行fn函数-触发get操作-执行track-把effect收集起来作为依赖。3 最后就是 更新update。
vue.3.0 dom赋值_Vue3.0 解读
weixin_33109551的博客
01-31 1170
原文：https://juejin.im/post/5d977f47e51d4578453274b3兼容性目前打包后的代码是 ES2015+，不支持 IE 11。对 TypeScript 的使用目前的代码 98% 以上使用 TypeScript 编写。如果你还没有学习 TypeScript，请尽快学习，否则可能看不懂源码。另外有件事情说出来可能会让你非常惊讶，Vue 3 的源代码完全没有...
vue2生命周期
CFSBD的博客
03-06 178
vue生命周期
Runtime 核心原理，Vue3真正的烫手山芋
weixin_61372907的博客
06-13 487
vue中的runtime模块是做什么？怎么做的？作为伟大的程序猿怎么能仅仅是会用呢？这篇文章我们来探讨一下Vue的runtime核心原理和实现思路
Vue3和@types/node的类型不兼容问题
前端原创分享
10-13 5156
点击上方卡片“前端司南”关注我您的关注意义重大原创@前端司南插播个广告：最近我在掘金社区有个专栏，主要涉及Vite,Vue3,TypeScript,业务组件库等关键词，目的是帮助读者掌握基于 Vite 构建现代组件库的核心方法。链接：https://juejin.cn/column/7140103979697963045最近有个新项目启动，主体内容与先前做的一个项目相似度很高，于是我准备拿这个旧项...
runtime-dom.esm-bundler.js:1374 Unable to preventDefault inside passive event listener invocation
最新发布
10-28
这个错误通常是由于在被动事件监听器中调用了preventDefault()方法导致的。被动事件监听器是指在事件处理程序中使用{passive:true}选项的事件监听器。这些事件监听器不能调用preventDefault()方法，因为它们被设计为不会阻止事件的默认行为。如果你确实需要在被动事件监听器中调用preventDefault()方法，那么你需要将{passive:true}选项更改为{passive:false}。如果更改选项不可行，你可以尝试卸载default-passive-events依赖或注释掉在main.js中引入的import 'default-passive-events'语句。这个插件是用来解决谷歌浏览器消除Passive Event Listeners（被动事件警告）的方法，但是它可能会导致一些问题。如果你仍然无法解决问题，你可以尝试查找其他可能导致问题的代码或库。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值