首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

啥,Vue又出新单曲?

啥,Vue 又出新单曲?

码生笔谈

关注

发布于: 2021 年 07 月 03 日

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

这是个啥东西

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

直接来个例子看吧

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

代码语言:javascript
复制
<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 模板,上面绑定了buttonclick事件,每次点击的时候,count++

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

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

手动初始化

上面在 script 标签上使用init属性后,petite-vue 会自动初始化,然后我们也可以通过全局暴露的PetiteVue属性进行手动初始化:

代码语言:javascript
复制
<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中:

代码语言:javascript
复制
PetiteVue.createApp({  count: 0}).mount()

复制代码

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

面向模板的声明式编程

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

代码语言:javascript
复制
<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 非常相似:

代码语言:javascript
复制
<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画美国

  • 发表于:
  • 本文为 InfoQ 中文站特供稿件
  • 首发地址https://www.infoq.cn/article/5fb8c53812170d2b7812b8746
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券