如今这个世道,作为一个有几年工作经验的前端,不学点框架源码都感觉要被抛弃了,react或vue要能吹吹牛吧,最好能造个轮子,听说vue3源码好学点,那么学学vue3,但是学起来还是那么费劲,感觉快放弃了,就在这个时候出现了petite-vue,害,这家伙比vue简单啊,拿它来重拾学习源码的信心岂不更好,能自己写一个petite-vue再学习vue3岂不是事半功倍。说了这么多,今天就开始迈出第一步吧。注意,本文是学习petite-vue源码系列的第一篇文章,先打个广告,github项目地址,欢迎点个星星喔,现在进入正题吧。
petite-vue还算是比较新的一个框架,尤雨溪2021年6月30号才初始化项目,经过几天密集的代码提交后,有二十多天已经没有更新了,看得出已经比较稳定了,本文不打算详细介绍petite-vue是干嘛的,有啥优势,关于这些可以查看官方介绍,首先来看看怎么跑一个hello world吧。
<div v-scope>{
{msg}}</div>
<script src="https://unpkg.com/petite-vue"></script>
<script>
PetiteVue.createApp({ msg: 'hello world!' }).mount()
</script>
如果你熟悉vue,那么对petite-vue的用法就很熟悉了,毕竟师出同门,当然还有一些个性化的语法,如上面的v-scope;对petite-vue有了简单的认识后,我们就模仿上面的示例,来实现一个看起来一样的代码吧,其中我们要实现如下几个关键部分:
PetiteVue
PetiteVue是一个全局对象,包含createApp这个重要的API,因此可以像下面这样声明:
const PetiteVue = {
createApp(scope) {
...
}
};
createApp
createApp是一个函数,入参可以接收一个表示组件数据值的对象,同时需要返回一个包含mount函数的对象,我们在上一步的基础上接着丰富createApp函数吧:
const PetiteVue = {
createApp(scope) {
const appContent = {
scope: scope,
};
const app &#