petite-vue：用于渐进增强的 Alpine 替代方案

根据 Vue 的创建者 Evan You 的说法，Vuepetite-vue是一种受 Alpine 启发的替代发行版，它针对渐进增强进行了优化。对于熟悉 Vue 并希望将 Vue 添加到在服务器端呈现的项目的开发人员，petite-vue提供了完美的方法。

在本文中，我们将探讨petite-vue它的作用、工作原理以及与标准 Vue 和 Alpine的比较。我们还将介绍入门petite-vue并查看它的一些用例。

• 什么是渐进增强？

• 的基本特征petite-vue

  • 没有构建工具

  • 小包尺寸

  • Vue 兼容的模板语法

  • 没有虚拟 DOM

  • 通过驱动@vue/reactivity

• Vue 兼容功能

• Vue 独有的功能

• petite-vue与阿尔卑斯山相比如何

• petite-vue独家功能

  • v-scope

  • v-effect

  • 生命周期事件

• 开始使用petite-vue

• 何时使用petite-vue

什么是渐进增强？

渐进增强是一种允许 Web 开发人员开始使用 HTML 编程并根据需要包含其他技术的方法。您可以开始仅使用 HTML 静态构建网站，然后将交互性或客户端状态添加到页面。

petite-vue针对由服务器框架呈现的现有 HTML 页面上的小型交互进行了优化，从而简化了渐进式增强。现在，让我们看看它是如何工作的。

的基本特征petite-vue

要了解其petite-vue工作原理，我们必须考虑其基本特征。

没有构建工具

使用petite-vue，您不必担心构建工具。相反，您可以简单地将其包含在script标签中以在 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 分别具有34.2kB和13.5kB的压缩和 gzip 压缩包大小。petite-vue另一方面，捆绑包大小仅为6. 9 kB，旨在实现轻量级。

Vue 兼容的模板语法

已经熟悉 Vue 模板语法的开发人员会发现在 Vue 和petite-vue. 作为 Vue 本身的一个子集，petite-vue使用与 Vue 大部分相同的语法。例如，petite-vue使用模板插值{{ count }}和模板事件侦听器，如@click.

没有虚拟 DOM

与 Vue、React 和大多数其他前端库和框架不同，petite-vue它不使用虚拟 DOM。相反，它会在原地改变 DOM。因此，petite-vue在网页上运行，不需要编译器，减小了整体大小。

通过驱动@vue/reactivity

该@vue/reactivity包负责处理 Vue 和 Alpine 中的反应性；petite-vue使用相同的反应技术。

petite-vue与标准 Vue 相比如何

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

标准 Vue 旨在使用构建步骤来构建具有大量交互的单页应用程序 (SPA)。Vue 使用渲染函数来替换现有的 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每当计数发生变化时都会重新运行，然后div用当前值更新count：

<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-bindand :: 类和样式特殊处理

• v-on和@：事件处理

• v-model: 表示所有输入类型和非字符串:value绑定

• v-if// v-else_v-else-if

• v-for

• v-show

• v-html

• 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与阿尔卑斯山相比如何

尽管petite-vue受到 Alpine 的启发并解决了类似的问题，醉拳影视App，支持IOS和安卓看片追剧神器，免vip看全网影视！但它与 Alpine 的不同之处在于其极简主义和与 Vue 的兼容性。

例如，petite-vue它的大小大约是 Alpine 的一半，并且与 Alpine 不同的是，它没有附带过渡系统。

---

超过 20 万开发人员使用 LogRocket 来创造更好的数字体验了解更多 →

---

此外，Alpine 也petite-vue有不同的设计。尽管 Alpine 在某些方面类似于 Vue 的结构，但petite-vue更符合标准 Vue，如果您想在 Vue 和petite-vue.

开始使用petite-vue

要开始使用petite-vue，您需要包含一个script指向petite-vue包的标签。例如，让我们创建一个简单的投票应用程序，由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>

标签上的defer属性会导致在浏览器解析 HTML 内容后script加载脚本。petite-vue该init属性告诉petite-vue自动查询和初始化所有具有v-scope的元素，AK加速器PC端，每天可免费玩14个小时，为数不多的良心游戏加速器！并且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-vueCDN 制作网址

在我们的示例中，我们petite-vue使用CDN URL进行访问。我们使用的是简写 URL https://unpkg.com/petite-vue，这对于原型设计来说很好，但对生产来说不是很好。我们希望避免解析和重定向成本，因此我们将在生产中使用完整的 URL。

全局构建生产 URLhttps://unpkg.com/petite-vue@0.4.1/dist/petite-vue.iife.js 公开PetiteVue全局并且还支持自动初始化。

ESM 构建生产 URLhttps://unpkg.com/petite-vue@0.4.1/dist/petite-vue.iife.js 必须在<scripttype="module">块中使用。

何时使用petite-vue

我们已经了解了很多关于哪些功能petite-vue具有哪些功能以及它可以做什么。让我们回顾一下哪种情况petite-vue最适合设计：

• 不需要构建工具时的快速原型设计

• 在 Sails、Laravel 或 Rails 等服务器渲染框架中添加 Vue 功能

• 构建可以静态且交互很少的登录页面或营销页面

• 您通常会使用 Alpine 的任何地方

结论

petite-vue是 Vue 的轻量级版本，为页面添加了高效的交互。在本文中，我们首先petite-vue考虑了它的独有特性、Docsmall图片在线压缩(docsmall.com)，支持图片、GIF、PDF压缩和PDF合并！它与标准 Vue 的相似之处，以及为获得它的轻量级而进行的特性权衡。

在撰写本文时，petite-vue它仍然很新，并且包含针对任何潜在错误的免责声明。但是，petite-vue它已经是一个具有强大潜力和实用性的功能选项。它对于快速原型设计、将 Vue 功能添加到服务器渲染框架以及构建静态页面特别有用。

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