尤雨溪的5KB petite-vue源码解析

写在开头

• 近期尤雨溪发布了5kb的petite-vue,好奇的我,clone了他的源码，给大家解析一波。

• 最近由于工作事情多，所以放缓了原创的脚步！大家谅解

• 想看我往期手写源码+各种源码解析的可以关注我公众号看我的GitHub,基本上前端的框架源码都有解析过

正式开始

• petite-vue是只有5kb的vue,我们先找到仓库，克隆下来

https://github.com/vuejs/petite-vue

• 克隆下来后发现，用的是vite + petite-vue + 多页面形式启动的

• 启动命令：

git clone https://github.com/vuejs/petite-vue
cd /petite-vue
npm i 
npm run dev

• 然后打开http://localhost:3000/即可看到页面:

---

保姆式教学

• 项目已经启动了，接下来我们先解析下项目入口,由于使用的构建工具是vite,从根目录下的index.html人口找起：

<h2>Examples</h2>
<ul>
  <li><a href="/examples/todomvc.html">TodoMVC</a></li>
  <li><a href="/examples/commits.html">Commits</a></li>
  <li><a href="/examples/grid.html">Grid</a></li>
  <li><a href="/examples/markdown.html">Markdown</a></li>
  <li><a href="/examples/svg.html">SVG</a></li>
  <li><a href="/examples/tree.html">Tree</a></li>
</ul>

<h2>Tests</h2>
<ul>
  <li><a href="/tests/scope.html">v-scope</a></li>
  <li><a href="/tests/effect.html">v-effect</a></li>
  <li><a href="/tests/bind.html">v-bind</a></li>
  <li><a href="/tests/on.html">v-on</a></li>
  <li><a href="/tests/if.html">v-if</a></li>
  <li><a href="/tests/for.html">v-for</a></li>
  <li><a href="/tests/model.html">v-model</a></li>
  <li><a href="/tests/once.html">v-once</a></li>
  <li><a href="/tests/multi-mount.html">Multi mount</a></li>
</ul>

<style>
  a {
    font-size: 18px;
  }
</style>

• 这就是多页面模式+vue+vite的一个演示项目，我们找到一个简单的演示页commits:

<script type="module">
  import { createApp, reactive } from '../src'

  const API_URL = `https://api.github.com/repos/vuejs/vue-next/commits?per_page=3&sha=`

  createApp({
    branches: ['master', 'v2-compat'],
    currentBranch: 'master',
    commits: null,

    truncate(v) {
      const newline = v.indexOf('\n')
      return newline > 0 ? v.slice(0, newline) : v
    },

    formatDate(v) {
      return v.replace(/T|Z/g, ' ')
    },

    fetchData() {
      fetch(`${API_URL}${this.currentBranch}`)
        .then((res) => res.json())
        .then((data) => {
          this.commits = data
        })
    }
  }).mount()
</script>

<div v-scope v-effect="fetchData()">
  <h1>Latest Vue.js Commits</h1>
  <template v-for="branch in branches">
    <input
      type="radio"
      :id=