petite-vue原始碼剖析-為什麼要讀原始碼？

肥仔John發表於2022-03-03
Vue原始碼

什麼是petite-vue？

根據官方解釋，petite-vue是專門為非前後端分離的歷史專案提供和Vue相近的響應式開發模式。 與完整的Vue相比最大的特點是，面對資料的變化petite-vue採取直接操作DOM的方式重新渲染。

具體的使用方式請參考GitHub，在這裡我想展示兩個示例:

示例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

示例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和響應式系統，敬請期待:)

相關文章