petite-vue源码剖析-为什么要读源码?

什么是petite-vue?

根据官方解释,petite-vue是专门为非前后端分离的历史项目提供和Vue相近的响应式开发模式。 与完整的Vue相比最大的特点是,面对数据的变化petite-vue采取直接操作DOM的方式重新渲染。

具体的使用方式请参考GitHub,在这里我想展示两个示例:

示例1 - 在线渲染


上述代码最终输出结果为

ONLINE
,但渲染过程是直接在DOM Tree上进行(分为如下4个步骤),当浏览器资源紧张时整个渲染过程将会被用户一览无余。

  1. 生成模板

    OFFLINE ONLINE
  2. 移除v-cloak属性

    OFFLINE ONLINE
  3. 解析v-ifv-else指令

    OFFLINE
  4. 最终渲染

    ONLINE

那么用户很有可能会看到闪屏现象:ONLINE => OFFLINE ONLINE => OFFLINE => EMPTY => ONLINE

示例2 - 组件化

petite-vue虽然没有提供明确的组件构建方式,但通过v-scope属性我们依然可以采取组件化构建我们的页面。但上述例子有明显的问题
采取全局组件注册机制,如例子中即使Message组件不需要还是能引用Counter组件,假如注册的不是Counter组件的构造函数,那么Counter的状态将会被意外修改。

createApp({
  Counter: Counter()
})

阅读源码的好处

  1. 通过阅读源码了解解析、调度和渲染过程,针对渲染过程编码即可预防并解决示例1的问题;
  2. 虽然petite-vue针对非前后端分离的历史项目进行优化,但离实际能与LayUI、MiniUI等DOM操作框架协作还有一段距离,这就需要我们熟悉petite-vue的内部机制从而结合项目现有技术栈;
  3. petite-vue源码确实很少,结合@vue/reactivity源码食用,十分适合入门Vue源码。

待续

后续我们会以应用示例为入口,逐行阅读理解petite-vue和@vue/reactivity,并实现自己的petite-vue和响应式系统,敬请期待:)

你可能感兴趣的:(petite-vue源码剖析-为什么要读源码?)