petite-vue简介：Vue的一个小的、新的子集

根据Vue的创造者Evan You的说法。 [petite-vue](https://github.com/vuejs/petite-vue#comparison-with-standard-vue)是Vue的另一种分布，其灵感来自Alpine.js，为渐进式增强进行了优化。

petite-vue 对于那些熟悉Vue并希望将Vue添加到一个在服务器端渲染的项目中的人来说是完美的。

在这篇文章中，我们将看看petite-vue 的作用，它是如何工作的，以及它与标准Vue和Alpine.js的比较。我们还将介绍如何开始使用petite-vue ，并看看一些用例。让我们开始吧!

什么是渐进式增强？

渐进式增强是一种方法，它允许网络开发人员从HTML开始编程，并根据需要加入其他技术。你可以只用HTML开始建立一个静态的网站，然后在页面上添加互动性或客户状态。

petite-vue 是为现有的HTML页面上的小型互动而优化的，这些页面是由一个服务器框架渲染的，因此简化了渐进式增强。让我们看看它是如何工作的!

的基本特征petite-vue

让我们通过观察它的基本特征来了解petite-vue 是如何工作的。

没有构建工具

你可以简单地在script 标签中包含petite-vue ，以便在HTML页面中获得其功能。

<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>

捆绑尺寸小

最新版本的Vue和Alpine的bundle大小分别为22.9kB和9.9kB，经过minified和gzipped。另一方面，petite-vue ，其bundle大小为6.4kB，旨在实现轻量级。

Vue兼容的模板语法

一个已经熟悉Vue模板语法的开发者会发现在petite-vue 和Vue之间移动很容易。

作为Vue本身的一个子集，petite-vue 使用大部分熟悉的Vue语法。例如，petite-vue 使用像{{ count }} 的模板插值和像@click 的模板事件监听器。

没有虚拟DOM

与Vue、React和其他大多数前端库和框架不同，petite-vue 不使用虚拟DOM。相反，它在原地突变DOM。

标准Vue利用渲染函数，允许它在网络以外的平台上进行渲染。 petite-vue 在网页上运行，因此直接突变DOM。因此，petite-vue ，不需要编译器，减少了整体尺寸。

由以下因素驱动@vue/reactivity

该 [@vue/reactivity](https://github.com/vuejs/vue-next/tree/master/packages/reactivity)包负责Vue和Alpine的反应性。petite-vue ，也使用这种反应性技术。

petite-vue 与标准 Vue 的对比情况

petite-vue 在许多方面与Vue相似。如前所述，它提供了与标准Vue所提供的模板语法和@vue/reactivity 模型相同。然而，最重要的区别是，petite-vue 是为渐进式增强而制作的。

标准Vue是为使用构建步骤来构建具有大量交互的单页应用程序（SPA）而设计的。它使用渲染函数来替换现有的DOM模板。另一方面，Petite-vue ，行走现有的DOM，并在原地进行变异，所以它不需要构建步骤。

petite-vue 独家功能

petite-vue 引入了一些标准Vue中没有的新功能，这些功能有助于优化渐进式增强。让我们来看看它们吧!

v-scope

在petite-vue 中，v-scope 是一个指令，用于标记由petite-vue 控制的页面区域。你也可以使用v-scope 指令来传递你的页面的特定区域所能访问的状态。

v-effect

v-effect 是一个指令，用于执行petite-vue 中的内联反应式语句。在下面的代码片段中，count 变量是反应式的，所以每当计数发生变化时，v-effect 将重新运行，然后用count 的当前值更新div 。

<div v-scope="{ count: 0 }">
  <div v-effect="$el.textContent = count"></div>
  <button @click="count++">++</button>
</div>

生命周期事件

petite-vue 有两个生命周期事件，@mounted 和@unmounted ，它们允许你监听petite-vue 在你的页面上挂载或卸载的时间。

Vue兼容的功能

现在我们已经看到了petite-vue 带来的新功能，让我们回顾一下它在Vue中已经存在的功能。

• {{ }} ：文本绑定
• v-bind 和:: 类和样式的特殊处理
• v-on 和@: 事件处理
• v-model ：代表所有输入类型和非字符串:value 绑定
• v-if/v-else /v-else-if
• v-for
• v-show
• v-hmtl
• v-pre
• v-once
• v-cloak
• reactive()
• nextTick()
• 模板参考

Vue的独家功能

由于其范围小，petite-vue 已经放弃了标准Vue中的一些功能。

• ref() 和computed()
• 渲染功能：petite-vue 没有虚拟DOM
• 集合类型的反应性：Map,Set, 等等。
• Transition,keep-alive,<teleport>, 和<suspense> 组件
• v-for: 深度去结构
• v-on="object"
• v-is 和<component :is="newComponent">
• v-bind:style 自动排序

petite-vue 与Alpine的比较

尽管petite-vue 是受Alpine的启发，并且解决了类似的问题，但它与Alpine的不同之处在于它的极简主义和与Vue的兼容性。

petite-vue 的大小约为Alpine的三分之二。与Alpine不同的是，它并不带有过渡系统。

Alpine和petite-vue 有不同的设计。尽管Alpine在某些方面类似于Vue的结构，但petite-vue 与标准的Vue更加一致，如果你想在Vue和petite-vue 之间过渡，可以将开销降到最低。

开始使用petite-vue

要开始使用petite-vue ，你需要包含一个指向petite-vue 包的script 标签。让我们创建一个由petite-vue 支持的简单投票应用程序。

首先，创建一个index.html 文件。在它的正文中，添加以下代码片断。

 <script src="https://unpkg.com/petite-vue" defer init></script>
  <div v-scope="{ upVotes: 0, downVotes: 0 }">
    <p>
      {{ upVotes }} <button @click="upVotes++">&#128077;</button>
    </p>
    <p>
      {{ downVotes }} <button @click="downVotes++">&#128078;</button>
    </p>
  </div>

script 标签上的defer 属性使加载petite-vue 的脚本在浏览器解析了HTML内容后加载。

init 属性告诉petite-vue ，自动查询并初始化所有有v-scope 的元素。

v-scope 告诉petite-vue 要处理页面的哪个区域。我们还传入了upVotes 和downVotes 的状态，以便于该区域使用。

手动初始化

如果你不希望petite-vue 自动初始化所有带有v-scope 属性的元素，你可以通过改变脚本来手动初始化它们。

<script src="https://unpkg.com/petite-vue"></script>
<script>
  PetiteVue.createApp().mount()
</script>

或者，你可以使用ES模块构建的petite-vue 。

<script type="module">
  import { createApp } from 'https://unpkg.com/petite-vue?module'
  createApp().mount()
</script>

petite-vue CDN生产URL

我们正在使用CDN URL访问petite-vue 。我们正在使用一个速记的URL [https://unpkg.com/petite-vue](https://unpkg.com/petite-vue)，这对原型设计来说很好，但对生产来说不是很好。我们想避免解析和重定向的成本，所以我们将使用完整的URL。

全局构建生产URL [https://unpkg.com/petite-vue@0.2.2/dist/petite-vue.iife.js](https://unpkg.com/petite-vue@0.2.2/dist/petite-vue.iife.js)暴露了PetiteVue global，也支持自动启动。

ESM的构建生产URL [https://unpkg.com/petite-vue@0.2.2/dist/petite-vue.es.js](https://unpkg.com/petite-vue@0.2.2/dist/petite-vue.es.js)必须在一个<script type="module"> 块中使用。

何时使用petite-vue

我们已经了解了很多关于petite-vue 的功能和它能做什么。让我们回顾一下，petite-vue 最适合用于哪种情况。

• 当你不需要构建工具时，快速建立原型
• 在Sails、Laravel或Rails等服务器渲染框架中添加Vue功能
• 构建登陆页面或营销页面，这些页面可以是静态的，很少有交互。
• 任何你通常会使用Alpine的地方

总结

petite-vue 是Vue的一个轻量级版本，可以为页面增加高效的交互。在这篇文章中，我们通过考虑其独有的功能、与标准Vue的相似性，以及为保持其轻量级而做出的功能权衡，对petite-vue 进行了初步了解。

petite-vue 仍然是新的，包括对任何潜在错误的免责声明。然而，petite-vue 已经是一个具有强大潜力和实用性的功能选项。它对于快速制作原型、将Vue功能洒入服务器渲染的框架以及构建静态页面特别有帮助。

我希望你喜欢这篇文章!请给我们留言，让我们知道你是否打算尝试petite-vue 。

petite-vue简介：Vue的一个小的、新的子集 》一文出现在LogRocket博客上。