5kb 的 Vue:尤雨溪发布新作 petite-vue

5kb 的 Vue:尤雨溪发布新作 petite-vue

前端程序员想必对尤雨溪及其开发的 Vue 框架不陌生。Vue 是一套用于构建用户界面的渐进式 JavaScript 框架,在 2014 年发布后获得了大量开发者的青睐,目前已更新至 3.0 版本。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

最近,尤雨溪发布了一款针对渐进增强(progressive enhancement)进行优化的 Vue 发行版——petite-vue,大小仅有约 5kb。与标准 Vue 相比,petite-vue 具备相同的模板语法和响应式心理模型,而二者的差别在于 petite-vue 专门针对在服务器框架渲染的一个现有 HTML 页面上 “sprinkle” 少量交互进行了优化。

尤雨溪发布新作 petite-vue

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 处加载即可:

<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 项目页面。

文章来源:公众号 Vue社区

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » 5kb 的 Vue:尤雨溪发布新作 petite-vue

发表评论

前端开发相关广告投放 更专业 更精准

立即查看 联系我们