啥，Vue 又出新单曲？

码生笔谈

关注

发布于: 2021 年 07 月 03 日

今天周六来加班，对于还没机会开始使用 Vue3 的前端来说，生怕被你们落下，于是打开了 Vue 官方仓库，想看看你们都学习到哪了，就在刚打开仓库的一瞬间，居然发现了一支新单曲《petite-vue》！

这是个啥东西

根据 README 中的介绍：petite-vue 是 Vue 对于渐进增强进行优化的一种 distribution（没想好怎么翻译）。它提供了与标准 Vue 相同的模板语法和响应式性心智模型，它是专门为在由服务器渲染具有少量交互的页面而存在的。服务端渲染一般会有注水（hydrate）过程，而在 petite-vue 要做的事情比较简单，被称为"洒水（sprinkling）"

直接来个例子看吧

我们可以直接创建一个html文件，把下面简单的几行代码粘贴进去：

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

复制代码

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

正常我们写 Vue 的时候，都会从new Vue或者createApp开始，但是上面没有显式的 js 代码，这是怎么回事呢？

事实上，我们看到 script 标签上多了一个init属性，这就是用于自动初始化 Vue 的标识，然后通过 div 标签上的v-scope属性来声明数据，div 就变成了一个 Vue 组件。

手动初始化

上面在 script 标签上使用init属性后，petite-vue 会自动初始化，然后我们也可以通过全局暴露的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>

复制代码

上面代码中我们使用PetiteVue手动初始化，而数据仍定义在v-scope中，其实我们也可以把数据初始化在createApp中：

PetiteVue.createApp({  count: 0}).mount()

复制代码

另外 petite-vue 还支持手动指定挂载点，也支持初始化多个应用，更简单的组件复用，全局状态管理，指令等，具体可以去查看 README 自己尝试。

面向模板的声明式编程

以前我们写一个 Vue 组件，通常需要定义 data、method、lifecycle、effect、watch 等等，而现在我们要实现一些简单的逻辑时，这些东西都可以直接写在模板上，而不用写一行额外的 js：

<div  v-scope="{ count: 0 }"  @mounted="console.log('mounted on: ', $el)">  <p v-effect="$el.textContent = count"></p>  <button @click="count++">inc</button></div><script src="https://unpkg.com/petite-vue" init></script>

复制代码

上面我们为最外层 div 添加了@mounted属性，这个就是被挂载的生命周期，属性值就是我们要做的具体逻辑，其中$el代表的是当前 div 元素。在子元素 p 的属性上添加的v-effect的用处是当属性值表达式里边的数据有变化后，表达式会重新执行，其中的$el也就代表的是这个 p 元素。

与之相似的 Alpine

README 中有说到 petite-vue 与一个叫Alpine框架的相似性，感兴趣同学可以过去看看，笔者简单看了看 Alpine 这东西果然和 petite-vue 非常相似：

<div x-data="{ open: false }">  <button @click="open = true">Expand</button>  <span x-show="open">    Content...  </span></div><script src="//unpkg.com/alpinejs"></script>

复制代码

上面是 Alpine 的逻辑，实现一个点击按钮可以展示或隐藏 Content 的功能， 两个框架都将关注点放在了模板上，而 Alpine 的功能会更多一些，也更重。petite-vue 基于 @vue/reactivity 实现，非常轻量，大约只有 5~7kb。

最后

不得不佩服尤大的创造力，他总能用敏锐的眼光把对社区上观察到的东西进行再创新，另外还要归功于 Vue 的分包设计的强大，仅凭 @vue/reactivity 包，用来做一些数据驱动渲染视图的项目都会事半功倍。

本文只是对于 petite-vue 的一些尝鲜，抛砖引玉，未来的用处大家可以发挥想象。对于新鲜事物，在目前没有应用场景的情况下，没必要去刻意深入学习，分析源码，我们只需要了解他们的设计理念，对自己的思路有没有启发，想想未来可以用在哪，然后静观其变就够了。对于文章开头纯属开了个玩笑，并没有灌输焦虑的意思，所以也没必要说"学不动了"这种话，我们要懂得合理运用时间，把发力点集中在某个方向，而不是学鸠摩智的小无相功，什么武功都能驱动，但是什么都不精。

封面图：跟着Tina画美国