petite-vue 的亮点不仅在于体积小，还在于它能够使用针对渐进增强的最优实现，后者是它与标准 Vue 的主要区别，也是其主要优势。petite-vue 与 Vue 1 的工作原理类似，但实现细节更优：petite-vue 遍历实际 dom，并利用 @vue/reactivity 连接 (attach) 细粒度 reactive effects，因此其更新可精确抵达各个binding。它提供了与标准 Vue 相同的模板语法和响应式模型：

• 大小只有5.8kb

• Vue 兼容模版语法

• 基于DOM，就地转换

• 响应式驱动

如何使用？

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 项目页面。

链接: https://fly63.com/nav/3386