Vue3源码学习之路-设计思想和理念

最新推荐文章于 2024-05-06 20:52:53 发布
最新推荐文章于 2024-05-06 20:52:53 发布
阅读量360 收藏
点赞数
分类专栏： Vue3源码学习记录 文章标签： 学习 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44659356/article/details/126673816
版权

Vue设计思想

  • Vue3.0更注重模块上的拆分，在2.0中无法单独使用部分模块，需要引入完整的Vuejs，Vue3中的模块之间耦合度低，模块可以独立使用。拆分模块
  • Vue2中很多方法挂载到了实例中，导致没有使用也会被打包（包括一些组件）。通过构建工具Tree-shaking机制实现按需引入，减少用户打包后体积。重写API
  • Vue3允许自定义渲染器，扩展能力强，不会发生以前的事情，改写Vue源码改造渲染方式。扩展更方便

声明式架构

  • 早在JQ时代编写的代码都是命令式的，命令式框架重要特点就是关注过程。
  • 声明式框架更加关注结果。命令式的代码封装到Vuejs中，过程靠Vuejs来实现。

采用虚拟DOM

传统更新页面，拼凑一个完整的字符串innerHTML全部重新渲染，添加虚拟DOM后，可以比较新旧虚拟节点，找到变化在进行更新。

区分编译时和运行时

  • 我们需要有一个虚拟DOM，调用渲染方法虚拟DOM渲染成真实DOM。
  • 专门写个编译时可以将模板编译成虚拟DOM（在构建时进行编译性能更高，不需要在运行时进行编译，而且Vue3在编译中做了很多优化）
凉秋秋秋
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue3源码梳理：运行时的设计方案概况
Wang的专栏
12-17 104
在运行时 runtime ，渲染器 renderer 会遍历整个虚拟dom树，并据此结构构建真实的dom树这个过程我们可以把它叫做挂载 mount在这个 vnode 对象发生变化时候，我们会对比 旧的 VNode 和 新的 VNode 之间的区别找出它们之间的区别，并应用这其中的变化到真实的dom上，这个过程叫做更新 patch。
vue 3 day(1)
初心魏的博客
11-19 878
@[TOC](vue 3 day(1)) 一、基本语法 1.1 变量的定义 定义变量 export default { data() { return { name: "jack", name1:"rose", name2:"lili" } }, } 使用变量 <div class="about" id="about"> <h1>This is an about page</h1>
深入了解Vue 3.0中的v-html指令：用法、安全性与最佳实践
最新发布
李长渊的博客
05-06 1207
深入了解Vue 3.0中的v-html指令：用法、安全性与最佳实践
VUE3响应式数据
duzhe17629085113的博客
12-10 615
内存中两块空间一个数mydata储存空间，另一个节点对象，在文档树中用于页面显示的，里面有一个innerHTML属性，这个属性决定页面显示效果 前提设置了一个全局变量Let mydata={title:"我也是个数据容器"} 当mydata存储空间修改后，但是innerHTML没有运行，导致页面的mydata没有运行，页面首次加载innerHTML赋值,然后去了变量存储空间中的字符串，显示出来，innerHTML不会再运行，变量存储空间中的数据发生修改，由于innerHTML没有运行所...
Vue3监听属性
余月初贰的博客
07-29 1304
以上代码中我们创建了两个输入框，data属性中，kilometers和meters初始值都为0。watch对象的两个监控方法kilometers和meters。Vue3监听属性watch，我们可以通过watch来响应数据的变化。当我们再输入框输入数据时，watch会实时监听数据变化并改变自身的值。示例使用watch实现计数器。示例实现千米与米之间的换算。侦听器watch的用法3。侦听器watch的用法2。侦听器watch的用法。...
基于SpringBoot+Vue华强北商城二手手机管理系统（源码+部署说明+演示视频+源码介绍）.zip
03-09
此外，该源码资源包还提供了源码介绍，详细介绍了系统的设计理念、功能模块、技术架构等内容，可以帮助开发者深入了解系统的内部结构和运行原理。 总的来说，这个基于SpringBoot+Vue的华强北商城二手手机管理系统的...
最新SpringBoot项目数码论坛系统设计与实现.zip
04-16
- 包括完整的文档说明，帮助理解项目的设计理念和实现细节。 - 可能还包括PPT演示，有助于了解系统的概况和功能。 5. **系统展示**： - 包括了直观的系统总体功能模块图和系统界面截图，使用户可以快速理解和使用...
最新SpringBoot项目小学家校一体“作业帮”的设计与实现.zip
04-16
- 提供了全套项目源码，包括数据库文件、文档和PPT，有助于理解和演示项目的设计理念和实现细节。 5. **系统展示**： - 包括了直观的系统总体功能模块图和系统首页界面图，使用户可以快速了解和使用系统的各项功能。...
最新SpringBoot项目游戏分享网站.zip
04-16
- 包括完整的文档说明，帮助理解项目的设计理念和实现细节。 - 可能还包括PPT演示和视频教程，有助于了解系统的概况和功能。 5. **系统展示**： - 包括了直观的系统总体功能模块图和系统界面截图，使用户可以快速...
最新SpringBoot项目家具商城系统.zip
04-16
- 包括完整的文档说明，帮助理解项目的设计理念和实现细节。 - 可能还包括PPT演示和视频演示，有助于了解系统的概况和功能。 5. **系统展示**： - 包括了直观的系统总体功能模块图和系统界面截图，使用户可以快速...
Vue3学习笔记（9.4）
mez_Blog的博客
04-04 1203
例如在v-my-directive.foo.bar中，修饰对象为{foo:true,bar:true}。例如在v-my-directive：foo中，arg为“foo”。除了默认设置的核心指令（v-model和v-show），Vue也允许注册自定义指令。value：传递给指令的值。beforeUNmount：当指令与在绑定元素父组件卸载之前时，只调用一次。updated：在包含组件的VNode及其子组件的VNode更新后调用。unmounted：当指令与元素解除绑定且父组件已卸载时，只调用一次。
Vue中动态拼接innerHTML时添加点击事件，并在点击事件中调用vue方法
BADAO_LIUMANG_QIZHI的博客
04-13 6318
场景 在VUE页面中动态生成某个弹窗的innerHTML的内容。 内容中添加一个button，并设置Button的点击事件， 在点击事件中能调用vue的方法。 注： 博客：霸道流氓气质的博客_CSDN博客-C#,架构之路,SpringBoot领域博主 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。 实现 1、innerHTML的内容如下 str =`
vue3基础（三）组件命名及调用，render,render中获取插槽值，函数式组件，异步组件,vue3中data只有函数形式
差不少的博客
08-03 6549
组件命名及调用，render,render中获取插槽值，函数式组件，异步组件,vue3中data只有函数形式
vue的重点3:event.target.innerHTML的使用和过滤器filter、子组件传值给父组件、兄弟组件之间的传值
小黄呀呀呀的博客
10-12 1761
event.target.innerHTML 没有传递参数，上面什么都不写，下面用event接受 <div id="app"> <button v-on:click="add">点击</button> {{num}} </div> var vue = new Vue({ el: '#app', data: { msg: 'zhangsan', num: 0 },
vue3响应式的简单实现（vue设计与实现-霍春阳）
weixin_45932463的博客
03-20 1728
这一篇主要讲解VUE3的响应式，这个系列会随着博主的不断学习一直更新 1.首先vue3是通过proxy实现的响应式，先来简单描述proxy let obj = new Proxy(你要代理的对象，{ get(target,key){ target是当前对象,key是键 return target[key] }, set(target,key,newValue){ target[key]= newValue } }) 2.编写开始 首先我们需要存储所有需要触发的effect桶，也就是集合，
解读Vue3模板编译优化
yyds2026的博客
11-04 435
其实 Vue3 相关的性能优化有很多，这里只单独将 patchFlag 的十分之一的内容拿出来讲了，Vue3 还没正式发布的时候就有看到说 Diff 过程会通过 patchFlag 来进行性能优化，所以打算看看他的优化逻辑，总的来说还是有所收获。
vue3和ts使用vue-grid-layout
04-29
Vue3 和 TypeScript 都是非常流行的技术栈，而 Vue-Grid-Layout 是一个用于 Vue 的网格布局组件库，可以帮助我们实现灵活的网页布局。下面是使用 Vue3 和 TypeScript 集成 Vue-Grid-Layout 的例子： 首先，你需要...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值