petite-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-ifv-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和響應式系統,敬請期待:)

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章