当前位置: 首页 > Web前端 > vue.js

当Vue只有5kb时:游禹锡发布新作petite-vue,针对渐进增强进行了优化

时间:2023-04-01 01:51:13 vue.js

前端程序员一定对游禹锡和他开发的Vue框架不陌生。Vue是一个用于构建用户界面的渐进式JavaScript框架。自2014年发布以来,受到了广大开发者的青睐,现已更新至3.0版本。与其他大型框架不同,Vue被设计为自下而上逐层应用。Vue的核心库只专注于视图层,不仅易于使用,而且易于与第三方库或现有项目集成。另一方面,当与现代工具链和各种支持库相结合时,Vue也完全有能力为复杂的单页应用程序提供支持。近日,游雨溪发布了一个针对渐进增强优化的Vue发行版——petite-vue,大小只有5kb左右。与标准Vue相比,petite-vue具有相同的模板语法和响应式心智模型,但两者的区别在于petite-vue针对在服务器框架呈现的现有HTML页面上“散布”少量交互进行了优化。Petite-vue的亮点不仅在于它的体积小,还在于它能够使用最佳实现来进行渐进增强,这是它与标准Vue的主要区别和主要优势。尤玉玺透露,petite-vue的工作原理与Vue1类似,但实现细节更好:petite-vue遍历了实际的DOM,并使用@vue/reactivity来连接(附加)细粒度的反应效果,因此它的更新可以到达每个捆绑。petite-vue项目自发布以来就备受关注,连续多日登上GitHubTrending榜单,几天之内获得2300颗星。项目地址:https://github.com/vuejs/peti...接下来,我们来看一下petite-vue的更多细节。主要特点petite-vue具有以下特点:大小仅为5.8kb左右兼容Vue的模板语法,基于@vue/reactivity驱动的DOM(mutatesinplace)如何使用?petite-vue可以直接使用,无需构建步骤,只需从CDN加载它:{{count}}inc

标记在页面上使用v-scope的petite-vue应该控制的区域。defer属性导致脚本在HTML内容被解析后执行。init属性让petite-vue自动查询并初始化页面上所有被v-scope标记的元素。如果不想使用上面的自动初始化方式,可以去掉init属性,将脚本移动到的末尾:或使用ES模块构建:的初始化方法外,还介绍了CDNURL制作、RootScope、生命周期事件等,更多详情请查看GitHub项目页面。