1. 为什么要读源码？

1.1. 什么是Petite-Vue？

根据官方解释，Petite-Vue是专门为非前后端分离的历史项目提供和Vue相近的响应式开发模式。 与完整的Vue相比最大的特点是，面对数据的变化Petite-Vue采取直接操作DOM的方式重新渲染。

具体的使用方式请参考GitHub，在这里我想展示两个示例:

1.1.1. 示例1 - 在线渲染

<style>
  [v-cloak] {
    display: none;
  }
</style>
<div v-scope="App"></div>

<script type="module">
  import { createApp } from 'https://unpkg.com/petite-vue?module'

  createApp({
    App: {
      $template: `
      <span v-cloak v-if="status === 'offline'"> OFFLINE </span>
      <span v-else> ONLINE </span>
      `,
    }
    status: 'online'
  }).mount('[v-scope]')
</script>

上述代码最终输出结果为 <div><span> ONLINE </span></div>，但渲染过程是直接在DOM Tree上进行(分为如下4个步骤)，当浏览器资源紧张时整个渲染过程将会被用户一览无余。

1. 生成模板

    <div>
      <span v-cloak v-if="status === 'offline'"> OFFLINE </span>
      <span v-else> ONLINE </span>
    </div>
   

2. 移除v-cloak属性

    <div>
      <span v-if="status === 'offline'"> OFFLINE </span>
      <span v-else> ONLINE </span>
    </div>
   

3. 解析v-if和v-else指令

    <div>
      <span v-if="status === 'offline'"> OFFLINE </span>
    </div>
   

    <div>
    </div>
   

4. 最终渲染

    <div>
      <span> ONLINE </span>
    </div>
   

那么用户很有可能会看到闪屏现象：ONLINE => OFFLINE ONLINE => OFFLINE => EMPTY => ONLINE

1.1.2. 示例2 - 组件化

<div v-scope="App"></div>

<script type="module">
  import { createApp } from 'https://unpkg.com/petite-vue?module'

  const App = {
    $template: `
      <div v-scope="Counter(1)"></div>
      <div v-scope="Message()"></div>
    `
  }

  const Counter = initialCount => ({
    $template: `
      <span></span>
      <button @click="handleAdd">ADD</button>
    `,
    count: initialCount || 0
    handleAdd() {
      this.count += 1
    }
  })

  const Message = () => {
    $template: `<div></div>`
  }

  createApp({
    App,
    Counter,
    Message,
  }).mount('[v-scope]')
</script>

Petite-Vue虽然没有提供明确的组件构建方式，但通过v-scope属性我们依然可以采取组件化构建我们的页面。但上述例子有明显的问题 采取全局组件注册机制，如例子中即使Message组件不需要还是能引用Counter组件，假如注册的不是Counter组件的构造函数，那么Counter的状态将会被意外修改。

createApp({
  Counter: Counter()
})

1.2. 阅读源码的好处

1. 通过阅读源码了解解析、调度和渲染过程，针对渲染过程编码即可预防并解决示例1的问题；
2. 虽然Petite-Vue针对非前后端分离的历史项目进行优化，但离实际能与LayUI、MiniUI等DOM操作框架协作还有一段距离，这就需要我们熟悉Petite-Vue的内部机制从而结合项目现有技术栈；
3. Petite-Vue源码确实很少，结合@vue/reactivity源码食用，十分适合入门Vue源码。