共计 1433 个字符，预计需要花费 4 分钟才能阅读完成。
前端程序员想必对尤雨溪及其开发的 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 颗星。
我的项目地址：https://github.com/vuejs/peti…
接下来咱们来看 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>- 应用 v-scope 在页面上标记应被 petite-vue 管制的区域。
- defer 属性使脚本在 HTML 内容通过解析后执行。
- init 属性使 petite-vue 主动 query 并初始化页面上被 v-scope 标记的所有元素。
如果不想应用以上主动初始化办法，你能够移除 init 属性，将脚本移至 < body > 开端：
<script src="https://unpkg.com/petite-vue"></script>
<script>
PetiteVue.createApp().mount()
</script>或者应用 ES module build：
<script type="module">
import {createApp} from 'https://unpkg.com/petite-vue?module'
createApp().mount()
</script>除了初始化办法之外，petite-vue 的我的项目页面中还介绍了 CDN URL 生产、Root Scope、生命周期事件等。更多细节参见 GitHub 我的项目页面。