PetiteVue - Vue 作者尤雨溪新作品,小巧精简版的 Vue

Vue 作者尤雨溪大神近期的新作品,Vue 的 小巧可代替版,值得关注。

关于 petite-vue

基于 Vue 在国内前端开发圈的火爆程度,无需再过多介绍,Vue 是一套用于构建用户界面的渐进式 JavaScript 框架,在 2014 年发布后获得了大量开发者的青睐,目前已更新至 3.0 版本。而今天要推荐给大家的是 Vue 作者尤雨溪大神近期的新作品 petite-vue,Petite 的英文意思为小号的,没错,petite-vue 就是 Vue 的精简版,大小只有5.8kb,是Vue对于渐进增强进行优化的一个构建。

github 首页
github 首页

它提供了与标准 Vue 相同的模板语法和响应式性心智模型,它是专门为在由服务器渲染具有少量交互的页面而存在的。简单地说,petite-vue 是 Vue 的可替代发行版,针对渐进式增强进行了优化。它提供了与标准 Vue 相同的模板语法和响应式模型。

petite-vue 的特性

简单体验下来,prtite-vue 支持 build 引入和直接在页面的 script 标签中引入 cdn 的方式引入,petite-vue 的亮点不仅在于体积小,还在于它能够使用针对渐进增强的最优实现,后者是它与标准 Vue 的主要区别,也是其主要优势。

使用示例

快速上手示例
快速上手示例
  • 使用 v-scope 在页面上标记应被 petite-vue 控制的区域。
  • defer 属性使脚本在 HTML 内容经过解析后执行。
  • init 属性使 petite-vue 自动 query 并初始化页面上被 v-scope 标记的所有元素。

据尤雨溪透露 petite-vue 与 Vue 1 的工作原理类似,但实现细节更优:petite-vue 遍历实际 DOM,并利用 @vue/reactivity 连接 (attach) 细粒度 reactive effects,因此其更新可精确抵达各个binding。想要了解更多细节,可以访问官网。

使用场景

与标准 Vue 相比,petite-vue 具备相同的模板语法和响应式模型,从用途上来看,二者的差别在于标准 Vue 可以用于复杂的单页面应用,往往页面里是没有内容的,需要初始化 Vue 后异步加载,而 petite-vue 则专门针对在已经服务器框架渲染好的现有 HTML 页面上的少量交互进行了优化。

总的来说,prtite-vue 保留了 Vue 的部分基本特性,熟悉 Vue 的开发者可以直接上手使用,在一些简单的 web 页面需求,想要引用 Vue 但又因为包体积带来的加载速度的考虑而放弃,现在,petite-vue 的出现或许可以解决这个问题了,毕竟它真的很小,大小只有 5.8kb,使用也非常简单。

需要注意的问题

prtite-vue 是一个相当新的项目,可能也会有 bug,也可能仍然会有 API 更改,需要承担一些风险。但是可用性很强,值得去使用。

目前 issue 是尤大故意禁用的,据说有更高优先级的事情要关注,不会花太多精力来维护,目前没有官网,也还没有中文文档,一切都要靠自己,如果发现了 bug,几乎只能靠自己去解决。

免费开源说明

prtite-vue 作为 Vue 小巧可替代版本,同样是基于 MIT 开源协议免费开源,任何人和公司都可以使用。