前端程序员想必对尤雨溪及其开发的 vue 框架不陌生。Vue 是一套用于构建用户界面的渐进式 JavaScript 框架,在 2014 年发布后获得了大量开发者的青睐,目前已更新至 3.0 版本。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
最近,尤雨溪发布了一款针对渐进增强(progressive enhancement)进行优化的 Vue 发行版——petite-vue,大小仅有约 5kb。与标准 Vue 相比,petite-vue 具备相同的模板语法和响应式心理模型,而二者的差别在于 petite-vue 专门针对在服务器框架渲染的一个现有 html 页面上 “sprinkle” 少量交互进行了优化。
petite-vue 的亮点不仅在于体积小,还在于它能够使用针对渐进增强的最优实现,后者是它与标准 Vue 的主要区别,也是其主要优势。尤雨溪透露 petite-vue 与 Vue 1 的工作原理类似,但实现细节更优:petite-vue 遍历实际 dom,并利用 @vue/reactivity 连接 (attach) 细粒度 reactive effects,因此其更新可精确抵达各个binding。
petite-vue 项目发布后获得了大量关注,连续多日出现在 GitHub Trending 榜单上,在数日内即获得 2300 颗星。
接下来我们来看 petite-vue 的更多细节。
主要特性
petite-vue 具备以下特性:
大小仅为约 5.8kb
Vue 兼容的模板语法
基于 DOM (mutates in place)
由 @vue/reactivity 驱动
如何使用?
petite-vue 可以不经过 build 步骤直接使用,只需从 CDN 处加载即可:
<script src="https://unpkg.com/petite-vue" defer init></script>
<!-- anywhere on the page -->
<div v-scope="{ count: 0 }">
{{ count }}
<button @click="count++">inc</button>
</div>
<script src="https://unpkg.com/petite-vue"></script>
<script>
PetiteVue.createApp().mount()
</script>
<script type="module">
import { createApp } from 'https://unpkg.com/petite-vue?module'
createApp().mount()
</script>
GitHub项目地址:https://github.com/vuejs/petite-vue
prtite-vue 保留了 Vue 的一些基础特性,这使得 Vue 开发者可以无成本使用,在以往,当我们在开发一些小而简单的页面想要引用 Vue 但又常常因为包体积带来的考虑而放弃,现在,petite-vue 的出现或许可以拯救这种情况了,毕竟它真的很小,大小只有 5.8kb,大约只是 Alpine.js 的一半
我们看到在v-if和v-for的解析过程中都会生成块对象,而且是v-if的每个分支都对应一个块对象,而v-for则是每个子元素都对应一个块对象。
在petite-vue中我们通过reactive构建上下文对象,并将根据状态渲染UI的逻辑作为入参传递给effect,然后神奇的事情发生了,当状态发生变化时将自动触发UI重新渲染。那么到底这是怎么做到的呢?
本篇我们会继续探索 reactive 函数中对 Map/WeakMap/Set/WeakSet 对象的代理实现。由于WeakMap和WeakSet分别是Map和Set的不影响GC执行垃圾回收的版本,这里我们只研究Map和Set即可。
当我们通过effect将副函数向响应上下文注册后,副作用函数内访问响应式对象时即会自动收集依赖,并在相应的响应式属性发生变化后,自动触发副作用函数的执行。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!