前端程序员想必对尤雨溪及其开发的 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>
如果不想使用以上自动初始化方法,你可以移除?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 项目页面。
相关文章:facebook的信息架构评析 原文:http://www.chouyu.com.cn/?p=102 为什...
实现下图的加号效果: 若想实现这个效果, 只需一个div元素即可搞定。 需要用到c...
大家都知道Visual Studio, Eclipse等IDE都具有使得C语言、java语言等文件自动缩...
前端同学在日常开发中精彩会因为一些动效和设计争的面红耳赤,设计希望用代码实...
?不是吧,不是吧,原来真的有人都2021年了,连TypeScript都没听说过吧?在项目中...
一般我们需要设置一个div与浏览器等高并等宽充满全屏,然后设置背景图片来达到一...
兼容css3新属性 在css3中,我们可以使用prefixfree.min.js这个插件来自动为css3...
背景 在公司参与一个原生APP和h5混合开发的项目,本人在项目中负责h5部分,现将...
一、校验数字的表达式 数字: ^[0-9]*$ n位的数字: ^\d{n}$ 至少n位的数字: ^\...
最近一直在捣鼓如何搭建React组件库,至于为什么会产生这个想法,主要是因为组件...