5kb 的 Vue：尤雨溪发布新作 petite-vue(1)

回复“2”加入前端群

技术编辑：小魔丨发自 思否编辑部

---

前端程序员想必对尤雨溪及其开发的 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/petite-vue

接下来我们来看 petite-vue 的更多细节。

主要特性

petite-vue 具备以下特性：

• 大小仅为约 5.8kb

• Vue 兼容的模板语法

• 基于 DOM (mutates in place)

• 由 @vue/reactivity 驱动

如何使用？

petite-vue 可以不经过 build 步骤直接使用，只需从 CDN 处加载即可：

{{ count }}

<button @click=“count++”>inc

• 使用 v-scope 在页面上标记应被 petite-vue 控制的区域。

• defer 属性使脚本在 HTML 内容经过解析后执行。

• init 属性使 petite-vue 自动 query 并初始化页面上被 v-scope 标记的所有元素。

如果不想使用以上自动初始化方法，你可以移除 init 属性，将脚本移至 < body > 末尾：

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】