「本文已参与好文召集令活动，点击查看：后端、大前端双赛道投稿，2万元奖池等你挑战！」
最近Vue家族再添新丁，petite-vue。 先纠正读音
幸亏找到了合适的英语 要不然继vue和vite后下一个法语框架诞生了。
特点
打包后只有5.7k超小超轻。相比竞争对手Alpine.js精简一半。
主要用于服务器端渲染页面的点缀性功能。
什么叫服务器端渲染点缀功能
目前主流的mvvm框架比如vue和react都是发力在SPA领域。普遍会基于工程化、组件化方式编写。但是这种技术如果只是想在一个服务器端渲染的页面中实现一点功能就显的即为笨拙。比如你要实现一个最简单的counter计数器。写法大概是
<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也并没有简单多少。
<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出厂了
<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吧
这个库完善吗，现在可以在生产中使用吗？
先说结论，不晚上但是可以进行生产使用。
首先这个库并不是很完善，感觉是尤大神在很短时间内写完了，甚至我们在这个库中没有看到一行测试用例。
但是如果只是用于简单的服务器端渲染点缀因为功能简单，功能几乎一目了然，所以无需担心有什么隐藏的大坑，收获的确实慢慢的简洁高效。所以我觉得马上用起来是没有问题的。
尤大神为什么可以闪电般开发出PetiteVue
首先是基于尤大神对于mvvm深厚的理解。废话这个95%都是人家自己写的 而且写了三遍(Vue,Vue2、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。
正式优于以上三点，深厚的理解加上好用的构建工具以及可以重复使用的轮子使得尤大神高效的研发除了这个实用的工具。
