尤雨溪最近发布了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 的亮点不仅在于体积小,还在于它能够使用针对渐进增强的最优实现,后者是它与标准 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 项目页面。
尤雨溪最近发布了5kb的vue,新作 petite-vue相关推荐
- 专访尤雨溪:先别管4.0了,Vue CLI重构了解一下
\ 上个月,Vue CLI 3.0 正式发布,为很多开发者带来期待已久的新特性,尤雨溪也说 Vue CLI 3.0 经历了重构,旨在尽可能减少现代前端工具在配置上的烦恼,并尽可能在工具链中加入最佳实践 ...
- Vue 作者尤雨溪:以匠人的态度不断打磨完善 Vue
本文仅用于学习和交流目的.非商业转载请注明作译者.出处,并保留本文的原始链接:http://www.ituring.com.cn/art... 访谈对象 尤雨溪,Vue.js 创作者,Vue Tech ...
- 抄笔记:尤雨溪在Vue3.0 Beta直播里聊到了这些…
前言 在 4 月 21 日晚,Vue 作者尤雨溪在哔哩哔哩直播分享了Vue.js 3.0 Beta最新进展. 以下是直播内容整理 1. 全新文档RFCs Vue.js 3.0 Beta发布后的工作重点 ...
- 专访Vue作者尤雨溪:Vue CLI 3.0重构的原因
1.为什么要对 Vue CLI 进行大规模修改? 尤雨溪认为旧版本的 Vue CLI 本质上只是从 GitHub 拉取模版,这种拉模版的方式有几个问题: (1) 在单个模版里面同时支持太多选项会导致模 ...
- 比较详细的采访 Vue 作者尤雨溪
比较详细的采访 Vue 作者尤雨溪 原文链接: medium.freecodecamp.com image 我采访了尤雨溪,著名渐进式 JavaScript 框架 vuejs.org 的创造者.尤雨溪 ...
- 尤雨溪和Vue的那些事
本文为转载.版权属于原作者. 原译文出处为:https://www.zcfy.cc/article/an-interview-with-vue-js-creator-evan-you-3143.htm ...
- Vite 与 Vue Cli 对比 - 尤雨溪: Vite 会取代 vue-cli 吗?
本文完整版:<Vite 与 Vue Cli 对比 - 尤雨溪: Vite 会取代 vue-cli 吗> Vite 与 Vue Cli 对比 一.Vite 与 Vue CLI 是什么? Vu ...
- 尤雨溪:VUE 3 之后会休息一下
此文转载自:https://my.oschina.net/u/4487475/blog/4631827 LiteOS Studio图形化调测能力,物联网打工人必备!>>> 9 月 1 ...
- 尤雨溪:全职做开源年薪百万,非科班程序员也能成功
9 月 19 日,VUE 终于迎来了 . 众所周知,VUE 的作者尤雨溪是一个资深的二次元爱好者.自 2014 年以来,VUE 的每个重要版本都会被赋予一个神秘代号.从 VUE 1.0 的 " ...
最新文章
- html当作附件发送,MIME以HTML文件作为附件发送电子邮件?
- 浅谈C/C++中的static和extern关键字
- 计算机软件打开为什么跑一边,为什么打开Excel后开始菜单就跑掉了?
- java内存shell_2019蚂蚁金服Java后端三面,详述程序员必须掌握的架构底层原理
- access 合并多行字符串_第20p,什么是字符串?Python中的str
- anaconda的python使用教程-Python安装教程之Anaconda入门使用总结
- C# Winform程序中DataGridView中使用ContextMenuStrip实现右键菜单
- maven install出错:Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.1:compile (d
- 使用命令行导出 SQL Server 数据层应用程序
- werkzeug Request
- DRUID连接池的使用
- Django发送邮件
- 常用Physionet命令整理
- 动态修改服务器配置文件,asp.net(c#)动态修改webservice的地址和端口(动态修改配置文件)...
- LeetCode之快乐数
- linux grep 如何搜索出包含某个字符串的所有文件 find
- Nginx教程(三) Nginx日志管理 (转)
- zTree展开树节点
- javaswing个人记账系统 java swing mysql实现的个人记账系统源码(1012)
- 雷凌3070无线网卡linux驱动,3070无线网卡驱动,小编教你ralink3070无线网卡驱动
热门文章
- java流式上传下载_精讲RestTemplate第6篇-文件上传下载与大文件流式下载
- 论文分享 DeepCenterline: A Multi-task Fully Convolutional Network for Centerline Extraction
- apk下载链接(实时更新)
- 基本数据类型与高精度数字
- apple pay集成_如何将Google Pay集成到您现有的Android应用中
- 30个常用Python实现,新手必备!
- SpringBoot结合RabbitMQ
- GitHub最有毒的仓库
- 数据库扩容也可以如此丝滑,MySQL千亿级数据生产环境扩容实战
- 2022 年博客总结