petite-vue源码剖析-为什么要读源码()
什么是petite-vue?
根据官方解释,petite-vue是专门为非前后端分离的历史项目提供和Vue相近的响应式开发模式。 与完整的Vue相比最大的特点是,面对数据的变化petite-vue采取直接操作DOM的方式重新渲染。
具体的使用方式请参考GitHub,在这里我想展示两个示例:
示例1 - 在线渲染
[v-cloak] {
display: none;
}
上述代码最终输出结果为
ONLINE
,但渲染过程是直接在DOM Tree上进行(分为如下4个步骤),当浏览器资源紧张时整个渲染过程将会被用户一览无余。- 生成模板
OFFLINE ONLINE
- 【petite-vue源码剖析-为什么要读源码()】移除
v-cloak
属性
OFFLINE ONLINE
- 解析
v-if
和v-else
指令
OFFLINE
- 最终渲染
ONLINE
EMPTY
=> ONLINE示例2 - 组件化
petite-vue虽然没有提供明确的组件构建方式,但通过
v-scope
属性我们依然可以采取组件化构建我们的页面。但上述例子有明显的问题采取全局组件注册机制,如例子中即使
Message
组件不需要还是能引用Counter
组件,假如注册的不是Counter
组件的构造函数,那么Counter
的状态将会被意外修改。createApp({
Counter: Counter()
})
阅读源码的好处
- 通过阅读源码了解解析、调度和渲染过程,针对渲染过程编码即可预防并解决示例1的问题;
- 虽然petite-vue针对非前后端分离的历史项目进行优化,但离实际能与LayUI、MiniUI等DOM操作框架协作还有一段距离,这就需要我们熟悉petite-vue的内部机制从而结合项目现有技术栈;
- petite-vue源码确实很少,结合
@vue/reactivity
源码食用,十分适合入门Vue源码。
@vue/reactivity
,并实现自己的petite-vue和响应式系统,敬请期待:)推荐阅读
- 读读源码|【源码】HashMap源码学习笔记
- Vue|Vue 源码解读(8)—— 编译器 之 解析(下)
- Springboot基于Redisson实现Redis分布式可重入锁【案例到源码分析】
- Vue|Vue 源码解读(8)—— 编译器 之 解析(上)
- 源码系列|查看动态代理生成的类文件
- vue|Vue入门项目(学生管理系统之班级管理 【含源码】)
- unity项目源代码|unity3d游戏3dRPG角色扮演完整项目源码分享
- IDEA高效查看源码的快捷键及小技巧
- JVM完全解读之Metaspace解密源码分析
- 《Chrome|《Chrome V8 源码》48. 弱类型加法的奥秘,"+" 源码分析