学习vue3之前，先从petite-vue开始吧

如今这个世道，作为一个有几年工作经验的前端，不学点框架源码都感觉要被抛弃了，react或vue要能吹吹牛吧，最好能造个轮子，听说vue3源码好学点，那么学学vue3，但是学起来还是那么费劲，感觉快放弃了，就在这个时候出现了petite-vue，害，这家伙比vue简单啊，拿它来重拾学习源码的信心岂不更好，能自己写一个petite-vue再学习vue3岂不是事半功倍。说了这么多，今天就开始迈出第一步吧。

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 = {
            context: appContent,
            mount() {
                ...
            }
        };
        return app;
    }
};

mount

mount根据字面意思，就是挂载我们的组件了，这里我们只是简单的将msg渲染到页面上，要实现这一目标，我们要遍历div的DOM结构，找到{