您的当前位置:首页>全部文章>文章详情

Vue又出新品——petite-vue

发表于:2021-07-11 11:15:06浏览:1270次TAG: #Vue #petitevue

相信前端程序员对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

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