动画搞懂petite-vue

「本文已参与好文召集令活动，点击查看：后端、大前端双赛道投稿，2万元奖池等你挑战！」javascript

最近Vue家族再添新丁，petite-vue。先纠正读音html

幸好找到了合适的英语要否则继vue和vite后下一个法语框架诞生了。前端

特色

打包后只有5.7k超小超轻。相比竞争对手Alpine.js精简一半。vue

主要用于服务器端渲染页面的点缀性功能。java

什么叫服务器端渲染点缀功能

目前主流的mvvm框架好比vue和react都是发力在SPA领域。广泛会基于工程化、组件化方式编写。可是这种技术若是只是想在一个服务器端渲染的页面中实现一点功能就显的即为笨拙。好比你要实现一个最简单的counter计数器。写法大概是react

<script crossorigin="anonymous" src="https://lib.baomitu.com/vue/3.1.4/vue.global.js" ></script>
<div id="counter">
  Counter: {{ counter }}
  <button @click="counter++">inc</button>
</div>

<script> const Counter = { data() { return { counter: 0, }; }, }; Vue.createApp(Counter).mount("#counter"); </script>

复制代码

复合API也并无简单多少。jquery

<script crossorigin="anonymous" src="https://lib.baomitu.com/vue/3.1.4/vue.global.js" ></script>
<div id="counter">
  Counter: {{ counter }}
  <button @click="counter++">inc</button>
</div>

<script> const Counter = { data() { return { counter: 0, }; }, }; Vue.createApp(Counter).mount("#counter"); </script>

复制代码

建立实例，建立组件，设置响应式数据一个都不能少。后端

假设只想作一点件但逻辑真不如jquery香呢？服务器

好下面轮到pretite出厂了markdown

<script src="https://unpkg.com/petite-vue" defer init></script>
<div v-scope="{ count: 0 }">  
  {{ count }}
  <button @click="count++">inc</button>
</div>
复制代码

在代码中引入了

首先引用代码的时候

这里解释一下defer和init

defer是用来让下载脚本的过程不去阻塞DOM的渲染和其余资源的加载。同时保证Dom解析后才去执行脚本。这部分对后面的init很是关关键

init是为了让你petitevue进行自动实例化固然你也能够手动实例化。若是只是简单的点缀代码固然是越简单越好了，因此这里面就直接init就能够了。

根做用域这样一个东西在里面能够直接声明你的响应式数据模型

而后就能够在这个代码段内直接绑定数据模型中的数据而且经过经过@click指令操纵数据。

怎么样是否是很方便的。

他特别适合在服务器渲染的代码中增长一些简单的前端互动功能。这个也就是所谓的点缀的意思。

全家桶怎么弄？

全家桶是vue在进行规模化应用的时候的必备。

主要分为

统一状态管理
路由功能

首先若是你的使用场景是用于简单的页面，路由这种复杂视图切换其实没有什么太大必要。

可是对于多个做用域间共享数据是须要的。

下面咱们就用一个例子来讲明一下，

其实在vue3时代直接利用reactive建立的响应式数据自己就能够达到视图随数据变化响应的要求。因此咱们只须要将须要共享的数据声明在全局就能够了。

下面看实例；

<script type="module"> import { createApp, reactive } from 'https://unpkg.com/petite-vue?module' const store = reactive({ count: 0, increment() { this.count++; }, }); console.log('store',store) // 将count加1 setInterval(() => store.increment() , 100) store.increment(); createApp({ store, }).mount(); </script>
<div v-scope style="border: 3px solid">
  <!-- 输出1 -->
  <span style="font-size: 50px;">{{ store.count }}</span>
</div>
<br />
<br />
<br />
<div v-scope="{c2 : 10}" style="border: 3px solid">
  <!-- 输出1 -->
  <span style="font-size: 50px">{{ store.count }}: {{c2}}</span>
</div>
<br />
<br />
<br />
<div v-scope style="border: 3px solid">
  <button @click="store.increment">inc</button>
</div>
复制代码

哪些特性不支持了，影响大吗？

为了体积小巧，Petite抛弃了不少没必要要的功能。可是这些功能对于简单的vue应用影响不是很大。

为了更轻量小巧，petite-vue 不支持如下特性：

ref()、computed

实际上ref和computed这两个属性，只有在规模化应用中才会出现并且，也可使用reactivy替代，因此这部分影响不大
render函数，由于petite-vue 没有虚拟DOM

简单应用无需考虑性能问题
不支持Map、Set等响应类型

简单应用问题不大。
Transition, KeepAlive, Teleport, Suspense

须要这些的时候仍是SPA吧

【Vue3官方教程】🎄万字笔记 | 同步导学视频

这个库完善吗，如今能够在生产中使用吗？

先说结论，不晚上可是能够进行生产使用。

首先这个库并非很完善，感受是尤大神在很短期内写完了，甚至咱们在这个库中没有看到一行测试用例。

可是若是只是用于简单的服务器端渲染点缀由于功能简单，功能几乎一目了然，因此无需担忧有什么隐藏的大坑，收获的确实慢慢的简洁高效。因此我以为立刻用起来是没有问题的。

尤大神为何能够闪电般开发出PetiteVue

首先是基于尤大神对于mvvm深厚的理解。废话这个95%都是人家本身写的并且写了三遍(Vue,Vue二、Vue3)如今是第四遍了。

其次来说尤大神践行了，本身在vueconf2021中提出的Vue3 + Vite的现代前端开发模式。

Vue3 + Vite = Modern by Default

工程化交给Vite -- 安心使用TS + Esmodule

此次Petite能够说彻底开发从开发，编译，发布、Demo所有使用Vite，能够说是给Vite的是实用性作了一次实实在在的背书和范例。

固然编译和调试在底层是由由esbuild和rollup完成的。

「esbuild」来实现对 .ts、jsx、.js 代码的转化

这样几乎无需过多工程化搭建过程就获得了一个完整的ts开发环境。
基于优秀的vue3代码工程化 -- 无需重复造轮子

vue3代码中使用monorepo风格将reactivity响应式，render，compile进行了有效模块化分割。每一个部分能够分开使用。此次petiteVue就是使用vue3核心的reactivity这个包来实现响应式，无需重复造轮子固然事半功倍。

固然优于petite中采用【就地编译】和无虚拟Dom渲染方式没办法复用vue3。

正式优于以上三点，深厚的理解加上好用的构建工具以及能够重复使用的轮子使得尤大神高效的研发除了这个实用的工具。

往期文章

【Vue3官方教程】🎄万字笔记 | 同步导学视频

[Vue官方教程笔记]- 尤雨溪手写mini-vue

如何参加开源项目-如何给Vue3.0提PR

作了一晚上动画，让你们十分钟搞懂Webpack