petite-vue源码解读：探究其源码学习的必要性是什么？

本文共计895个文字，预计阅读时间需要4分钟。

什么是petite-vue？petite-vue是一款为非前后端分离的历史项目提供类似Vue的响应式开发模式的框架。与完整的Vue相比，petite-vue最大的特点是面对数据的变更，它直接操作DOM。

什么是petite-vue？

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

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

示例1 - 在线渲染

<style> [v-cloak] { display: none; } </style> <div v-scope="App"></div> <script type="module"> import { createApp } from 'unpkg.com/petite-vue?module' createApp({ App: { $template: ` <span v-cloak v-if="status === 'offline'"> OFFLINE </span> <span v-else> ONLINE </span> `, status: 'online' } }).mount('[v-scope]') </script>

上述代码最终输出结果为 <div><span> ONLINE </span></div>，但渲染过程是直接在DOM Tree上进行(分为如下4个步骤)，当浏览器资源紧张时整个渲染过程将会被用户一览无余。

1. 生成模板

   <div> <span v-cloak v-if="status === 'offline'"> OFFLINE </span> <span v-else> ONLINE </span> </div>

2. 移除v-cloak属性

   <div> <span v-if="status === 'offline'"> OFFLINE </span> <span v-else> ONLINE </span> </div>

3. 解析v-if和v-else指令

   <div> <span v-if="status === 'offline'"> OFFLINE </span> </div>

   <div> </div>

4. 最终渲染

   <div> <span> ONLINE </span> </div>

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

示例2 - 组件化

<div v-scope="App"></div> <script type="module"> import { createApp } from 'unpkg.com/petite-vue?module' const App = { $template: ` <div v-scope="Counter(1)"></div> <div v-scope="Message()"></div> ` } const Counter = initialCount => ({ $template: ` <span>{{ count }}</span> <button @click="handleAdd">ADD</button> `, count: initialCount || 0 handleAdd() { this.count += 1 } }) const Message = () => { $template: `<div>{{ Counter.name }}</div>` } createApp({ App, Counter, Message, }).mount('[v-scope]') </script>

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和响应式系统，敬请期待:)
尊重原创，转载请注明来自：www.cnblogs.com/fsjohnhuang/p/15959708.html 肥仔John

欢迎添加我的公众号一起深入探讨技术手艺人的那些事！

如果您觉得本文的内容有趣就扫一下吧！捐赠互勉！