关于javascript:petitevue源码剖析为什么要读源码

什么是 petite-vue？

依据官网解释，petite-vue 是专门为非前后端拆散的历史我的项目提供和 Vue 相近的响应式开发模式。与残缺的 Vue 相比最大的特点是，面对数据的变动 petite-vue 采取间接操作 DOM 的形式从新渲染。

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

示例 1 – 在线渲染

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

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

  createApp({
    $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

示例 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>{{count}}</span>
      <button @click="handleAdd">ADD</button>
    `,
    count: initialCount || 0
    handleAdd() {this.count += 1}
  })

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

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

petite-vue 尽管没有提供明确的组件构建形式，但通过 v-scope 属性咱们仍然能够采取组件化构建咱们的页面。但上述例子有显著的问题
采取全局组件注册机制，如例子中即便 Message 组件不须要还是能援用 Counter 组件，如果注册的不是 Counter 组件的构造函数，那么 Counter 的状态将会被意外批改。

createApp({Counter: Counter()
})

浏览源码的益处

1. 通过浏览源码理解解析、调度和渲染过程，针对渲染过程编码即可预防并解决示例 1 的问题；
2. 尽管 petite-vue 针对非前后端拆散的历史我的项目进行优化，但离理论能与 LayUI、MiniUI 等 DOM 操作框架合作还有一段距离，这就须要咱们相熟 petite-vue 的外部机制从而联合我的项目现有技术栈；
3. petite-vue 源码的确很少，联合 @vue/reactivity 源码食用，非常适宜入门 Vue 源码。

待续

后续咱们会以利用示例为入口，逐行浏览了解 petite-vue 和@vue/reactivity，并实现本人的 petite-vue 和响应式零碎，敬请期待:)