Vue又出新品——petite-vue

相信前端程序员对Vue 框架不陌生，Vue 是一套用于构建用户界面的渐进式 JavaScript 框架，目前已更新至 3.0 版本。最近，官方又发布了一款针对渐进增强进行优化的 Vue 发行版——petite-vue，大小仅有约 5kb。与标准 Vue 相比，petite-vue 具备相同的模板语法和响应式心理模型，而二者的差别在于 petite-vue 专门针对在服务器框架渲染的一个现有 HTML 页面上 “sprinkle” 少量交互进行了优化。

petite-vue提供了与标准 Vue 相同的模板语法和响应式性心智模型，它是专门为在由服务器渲染具有少量交互的页面而存在的。服务端渲染一般会有注水（hydrate）过程，petite-vue 的亮点不仅在于体积小，还在于它能够使用针对渐进增强的最优实现。官方称 petite-vue 与 Vue 1 的工作原理类似，但实现细节更优：petite-vue 遍历实际 DOM，并利用 @vue/reactivity 连接 (attach) 细粒度 reactive effects，因此其更新可精确抵达各个binding。

如何使用？

petite-vue 可以不经过 build 步骤直接使用，只需从 CDN 处加载即可。先来看个例子：

<div v-scope="{ count: 0 }">
  {{ count }}
  <button @click="count++">加1</button></div>
<script src="https://unpkg.com/petite-vue" defer init></script>

打开这个文件后，页面呈现出数字0，和一个加1按钮，每次点击按钮后，数字便会累加1，对于这几行代码，用过 Vue 的同学一眼就能看懂，其实就是一个 Vue 模板，上面绑定了button的click事件，每次点击的时候，count就++。

正常我们写 Vue 的时候，都会从new Vue或者createApp开始，但是上面没有显式的 js 代码，这是怎么回事呢？细心的你也许看到 script 标签上多了一个init属性，这就是用于自动初始化 Vue 的标识，然后通过 div 标签上的v-scope属性来声明数据，div 就变成了一个 Vue 组件。

使用 v-scope 在页面上标记应被 petite-vue 控制的区域。defer 属性使脚本在 HTML 内容经过解析后执行。init 属性使 petite-vue 自动 query 并初始化页面上被 v-scope 标记的所有元素。使用init属性后，petite-vue 会自动初始化，然后我们也可以通过全局暴露的PetiteVue属性进行手动初始化。

如果不想使用以上自动初始化方法，你可以移除 init 属性，将脚本移至 < body > 末尾，使用PetiteVue手动初始化：

<div v-scope="{ count: 0 }">
  {{ count }}
  <button @click="count++">inc</button></div>
 <script src="https://unpkg.com/petite-vue"></script>
 <script>
  PetiteVue.createApp().mount()
 </script>

petite-vue 项目发布后获得了大量关注，连续多日出现在 GitHub Trending 榜单上，在数日内即获得 2300 颗星。

项目地址：https://github.com/vuejs/petite-vue.git

更多详细，请移步到项目地址进一步了解。