萬字長文！總結 Vue 性能優化方式及原理

前言

我們在使用 Vue 或其他框架的日常開發中，或多或少的都會遇到一些性能問題，儘管 Vue 內部已經幫助我們做了許多優化，但是還是有些問題是需要我們主動去避免的。我在我的日常開中，以及網上各種大佬的文章中總結了一些容易產生性能問題的場景以及針對這些問題優化的技巧，這篇文章就來探討下，希望對你有所幫助。

使用`v-slot:slotName`，而不是`slot="slotName"`

v-slot是 2.6 新增的語法，具體可查看: Vue2.6，2.6 發佈已經是快兩年前的事情了，但是現在仍然有不少人仍然在使用slot="slotName"這個語法。雖然這兩個語法都能達到相同的效果，但是內部的邏輯確實不一樣的，下面來看下這兩種方式有什麼不同之處。

我們先來看下這兩種語法分別會被編譯成什麼：

使用新的寫法，對於父組件中的以下模板：

<child>
  <template v-slot:name>{{name}}</template>
</child>

會被編譯成：

function render() {
  with (this) {
    return _c('child', {
      scopedSlots: _u([
        {
          key: 'name',
          fn: function () {
            return [_v(_s(name))]
          },
          proxy: true
        }
      ])
    })
  }
}

使用舊的寫法，對於以下模板：

<child>
  <template slot="name">{{name}}</template>
</child>

會被編譯成：

function render() {
  with (this) {
    return _c(
      'child',
      [
        _c(
          'template',
          {
            slot: 'name'
          },
          [_v(_s(name))]
        )
      ],
    )
  }
}

通過編譯後的代碼可以發現，舊的寫法是將插槽內容作爲 children 渲染的，會在父組件的渲染函數中創建，插槽內容的依賴會被父組件收集（name 的 dep 收集到父組件的渲染 watcher），而新的寫法將插槽內容放在了 scopedSlots 中，會在子組件的渲染函數中調用，插槽內容的依賴會被子組件收集（name 的 dep 收集到子組件的渲染 watcher），最終導致的結果就是：當我們修改 name 這個屬性時，舊的寫法是調用父組件的更新（調用父組件的渲染 watcher），然後在父組件更新過程中調用子組件更新（prePatch => updateChildComponent），而新的寫法則是直接調用子組件的更新（調用子組件的渲染 watcher）。

這樣一來，舊的寫法在更新時就多了一個父組件更新的過程，而新的寫法由於直接更新子組件，就會更加高效，性能更好，所以推薦始終使用v-slot:slotName語法。

使用計算屬性

這一點已經被提及很多次了，計算屬性最大的一個特點就是它是可以被緩存的，這個緩存指的是隻要它的依賴的不發生改變，它就不會被重新求值，再次訪問時會直接拿到緩存的值，在做一些複雜的計算時，可以極大提升性能。可以看以下代碼：

<template>
  <div>{{superCount}}</div>
</template>
<script>
  export default {
    data() {
      return {
        count: 1
      }
    },
    computed: {
      superCount() {
        let superCount = this.count
        // 假設這裏有個複雜的計算
        for (let i = 0; i < 10000; i++) {
          superCount++
        }
        return superCount
      }
    }
  }
</script>

這個例子中，在 created、mounted 以及模板中都訪問了 superCount 屬性，這三次訪問中，實際上只有第一次即created時纔會對 superCount 求值，由於 count 屬性並未改變，其餘兩次都是直接返回緩存的 value，對於計算屬性更加詳細的介紹可以看我之前寫的文章：Vue computed 是如何實現的？。

使用函數式組件

對於某些組件，如果我們只是用來顯示一些數據，不需要管理狀態，監聽數據等，那麼就可以用函數式組件。函數式組件是無狀態的，無實例的，在初始化時不需要初始化狀態，不需要創建實例，也不需要去處理生命週期等，相比有狀態組件，會更加輕量，同時性能也更好。具體的函數式組件使用方式可參考官方文檔：函數式組件

我們可以寫一個簡單的 demo 來驗證下這個優化：

// UserProfile.vue
<template>
  <div class="user-profile">{{ name }}</div>
</template>

<script>
  export default {
    props: ['name'],
    data() {
      return {}
    },
    methods: {}
  }
</script>
<style scoped></style>

// App.vue
<template>
  <div id="app">
    <UserProfile v-for="item in list" :key="item" : />
  </div>
</template>

<script>
  import UserProfile from './components/UserProfile'

  export default {
    name: 'App',
    components: { UserProfile },
    data() {
      return {
        list: Array(500)
          .fill(null)
          .map((_, idx) => 'Test' + idx)
      }
    },
    beforeMount() {
      this.start = Date.now()
    },
    mounted() {
      console.log('用時:', Date.now() - this.start)
    }
  }
</script>

<style></style>

UserProfile 這個組件只渲染了 props 的 name，然後在 App.vue 中調用 500 次，統計從 beforeMount 到 mounted 的耗時，即爲 500 個子組件（UserProfile）初始化的耗時。

經過我多次嘗試後，發現耗時一直在 30ms 左右，那麼現在我們再把改成 UserProfile 改成函數式組件：

<template functional>
  <div class="user-profile">{{ props.name }}</div>
</template>

此時再經過多次嘗試後，初始化的耗時一直在 10-15ms，這些足以說明函數式組件比有狀態組件有着更好的性能。

結合場景使用 v-show 和 v-if

以下是兩個使用 v-show 和 v-if 的模板

<template>
  <div>
    <UserProfile :user="user1" v-if="visible" />
    <button @click="visible = !visible">toggle</button>
  </div>
</template>

<template>
  <div>
    <UserProfile :user="user1" v-show="visible" />
    <button @click="visible = !visible">toggle</button>
  </div>
</template>

這兩者的作用都是用來控制某些組件或 DOM 的顯示 / 隱藏，在討論它們的性能差異之前，先來分析下這兩者有何不同。其中，v-if 的模板會被編譯成：

function render() {
  with (this) {
    return _c(
      'div',
      [
        visible
          ? _c('UserProfile', {
              attrs: {
                user: user1
              }
            })
          : _e(),
        _c(
          'button',
          {
            on: {
              click: function ($event) {
                visible = !visible
              }
            }
          },
          [_v('toggle')]
        )
      ],
    )
  }
}

可以看到，v-if 的部分被轉換成了一個三元表達式，visible 爲 true 時，創建一個 UserProfile 的 vnode，否則創建一個空 vnode，在 patch 的時候，新舊節點不一樣，就會移除舊的節點或創建新的節點，這樣的話UserProfile也會跟着創建 / 銷燬。如果UserProfile組件裏有很多 DOM，或者要執行很多初始化 / 銷燬邏輯，那麼隨着 visible 的切換，勢必會浪費掉很多性能。這個時候就可以用 v-show 進行優化，我們來看下 v-show 編譯後的代碼：

function render() {
  with (this) {
    return _c(
      'div',
      [
        _c('UserProfile', {
          directives: [
            {
              name: 'show',
              rawName: 'v-show',
              value: visible,
              expression: 'visible'
            }
          ],
          attrs: {
            user: user1
          }
        }),
        _c(
          'button',
          {
            on: {
              click: function ($event) {
                visible = !visible
              }
            }
          },
          [_v('toggle')]
        )
      ],
    )
  }
}

v-show被編譯成了directives，實際上，v-show 是一個 Vue 內部的指令，在這個指令的代碼中，主要執行了以下邏輯：

el.style.display = value ? el.__vOriginalDisplay : 'none'

它其實是通過切換元素的 display 屬性來控制的，和 v-if 相比，不需要在 patch 階段創建 / 移除節點，只是根據v-show上綁定的值來控制 DOM 元素的style.display屬性，在頻繁切換的場景下就可以節省很多性能。

但是並不是說v-show可以在任何情況下都替換v-if，如果初始值是false時，v-if並不會創建隱藏的節點，但是v-show會創建，並通過設置style.display='none'來隱藏，雖然外表看上去這個 DOM 都是被隱藏的，但是v-show已經完整的走了一遍創建的流程，造成了性能的浪費。

所以，v-if的優勢體現在初始化時，v-show體現在更新時，當然並不是要求你絕對按照這個方式來，比如某些組件初始化時會請求數據，而你想先隱藏組件，然後在顯示時能立刻看到數據，這時候就可以用v-show，又或者你想每次顯示這個組件時都是最新的數據，那麼你就可以用v-if，所以我們要結合具體業務場景去選一個合適的方式。

使用 keep-alive

在動態組件的場景下：

<template>
  <div>
    <component :is="currentComponent" />
  </div>
</template>

這個時候有多個組件來回切換，currentComponent每變一次，相關的組件就會銷燬 / 創建一次，如果這些組件比較複雜的話，就會造成一定的性能壓力，其實我們可以使用 keep-alive 將這些組件緩存起來：

<template>
  <div>
    <keep-alive>
      <component :is="currentComponent" />
    </keep-alive>
  </div>
</template>

keep-alive的作用就是將它包裹的組件在第一次渲染後就緩存起來，下次需要時就直接從緩存裏面取，避免了不必要的性能浪費，在討論上個問題時，說的是v-show初始時性能壓力大，因爲它要創建所有的組件，其實可以用keep-alive優化下：

<template>
  <div>
    <keep-alive>
      <UserProfileA v-if="visible" />
      <UserProfileB v-else />
    </keep-alive>
  </div>
</template>

這樣的話，初始化時不會渲染UserProfileB組件，當切換visible時，纔會渲染UserProfileB組件，同時被keep-alive緩存下來，頻繁切換時，由於是直接從緩存中取，所以會節省很多性能，所以這種方式在初始化和更新時都有較好的性能。

但是keep-alive並不是沒有缺點，組件被緩存時會佔用內存，屬於空間和時間上的取捨，在實際開發中要根據場景選擇合適的方式。

避免 v-for 和 v-if 同時使用

這一點是 Vue 官方的風格指南中明確指出的一點：Vue 風格指南

如以下模板：

<ul>
  <li v-for="user in users" v-if="user.isActive" :key="user.id">
    {{ user.name }}
  </li>
</ul>

會被編譯成：

// 簡化版
function render() {
  return _c(
    'ul',
    this.users.map((user) => {
      return user.isActive
        ? _c(
            'li',
            {
              key: user.id
            },
            [_v(_s(user.name))]
          )
        : _e()
    }),
  )
}

可以看到，這裏是先遍歷（v-for），再判斷（v-if），這裏有個問題就是：如果你有一萬條數據，其中只有 100 條是isActive狀態的，你只希望顯示這 100 條，但是實際在渲染時，每一次渲染，這一萬條數據都會被遍歷一遍。比如你在這個組件內的其他地方改變了某個響應式數據時，會觸發重新渲染，調用渲染函數，調用渲染函數時，就會執行到上面的代碼，從而將這一萬條數據遍歷一遍，即使你的users沒有發生任何改變。

爲了避免這個問題，在此場景下你可以用計算屬性代替：

<template>
  <div>
    <ul>
      <li v-for="user in activeUsers" :key="user.id">{{ user.name }}</li>
    </ul>
  </div>
</template>

<script>
  export default {
    // ...
    computed: {
      activeUsers() {
        return this.users.filter((user) => user.isActive)
      }
    }
  }
</script>

這樣只會在users發生改變時纔會執行這段遍歷的邏輯，和之前相比，避免了不必要的性能浪費。

始終爲 v-for 添加 key，並且不要將 index 作爲的 key

這一點是 Vue 風格指南中明確指出的一點，同時也是面試時常問的一點，很多人都習慣的將 index 作爲 key，這樣其實是不太好的，index 作爲 key 時，將會讓 diff 算法產生錯誤的判斷，從而帶來一些性能問題，你可以看下 ssh 大佬的文章，深入分析下，爲什麼 Vue 中不要用 index 作爲 key。在這裏我也通過一個例子來簡單說明下當 index 作爲 key 時是如何影響性能的。

看下這個例子：

const Item = {
  name: 'Item',
  props: ['message', 'color'],
  render(h) {
    debugger
    console.log('執行了Item的render')
    return h('div', { style: { color: this.color } }, [this.message])
  }
}

new Vue({
  name: 'Parent',
  template: `
  <div @click="reverse" class="list">
    <Item
      v-for="(item,index) in list"
      :key="item.id"
      :message="item.message"
      :color="item.color"
    />
  </div>`,
  components: { Item },
  data() {
    return {
      list: [
        { id: 'a', color: '#f00', message: 'a' },
        { id: 'b', color: '#0f0', message: 'b' }
      ]
    }
  },
  methods: {
    reverse() {
      this.list.reverse()
    }
  }
}).$mount('#app')

這裏有一個 list，會渲染出來a b，點擊後會執行reverse方法將這個 list 顛倒下順序，你可以將這個例子複製下來，在自己的電腦上看下效果。

我們先來分析用id作爲 key 時，點擊時會發生什麼，

由於 list 發生了改變，會觸發Parent組件的重新渲染，拿到新的vnode，和舊的vnode去執行patch，我們主要關心的就是patch過程中的updateChildren邏輯，updateChildren就是對新舊兩個children執行diff算法，使盡可能地對節點進行復用，對於我們這個例子而言，此時舊的children是：

;[
  {
    tag: 'Item',
    key: 'a',
    propsData: {
      color: '#f00',
      message: '紅色'
    }
  },
  {
    tag: 'Item',
    key: 'b',
    propsData: {
      color: '#0f0',
      message: '綠色'
    }
  }
]

執行reverse後的新的children是：

;[
  {
    tag: 'Item',
    key: 'b',
    propsData: {
      color: '#0f0',
      message: '綠色'
    }
  },
  {
    tag: 'Item',
    key: 'a',
    propsData: {
      color: '#f00',
      message: '紅色'
    }
  }
]

此時執行updateChildren，updateChildren會對新舊兩組 children 節點的循環進行對比：

while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
  if (isUndef(oldStartVnode)) {
    oldStartVnode = oldCh[++oldStartIdx] // Vnode has been moved left
  } else if (isUndef(oldEndVnode)) {
    oldEndVnode = oldCh[--oldEndIdx]
  } else if (sameVnode(oldStartVnode, newStartVnode)) {
    // 對新舊節點執行patchVnode
    // 移動指針
  } else if (sameVnode(oldEndVnode, newEndVnode)) {
    // 對新舊節點執行patchVnode
    // 移動指針
  } else if (sameVnode(oldStartVnode, newEndVnode)) {
    // 對新舊節點執行patchVnode
    // 移動oldStartVnode節點
    // 移動指針
  } else if (sameVnode(oldEndVnode, newStartVnode)) {
    // 對新舊節點執行patchVnode
    // 移動oldEndVnode節點
    // 移動指針
  } else {
    //...
  }
}

通過sameVnode判斷兩個節點是相同節點的話，就會執行相應的邏輯：

function sameVnode(a, b) {
  return (
    a.key === b.key &&
    ((a.tag === b.tag &&
      a.isComment === b.isComment &&
      isDef(a.data) === isDef(b.data) &&
      sameInputType(a, b)) ||
      (isTrue(a.isAsyncPlaceholder) &&
        a.asyncFactory === b.asyncFactory &&
        isUndef(b.asyncFactory.error)))
  )
}

sameVnode主要就是通過 key 去判斷，由於我們顛倒了 list 的順序，所以第一輪對比中：sameVnode(oldStartVnode, newEndVnode)成立，即舊的首節點和新的尾節點是同一個節點，此時會執行patchVnode邏輯，patchVnode中會執行prePatch，prePatch中會更新 props，此時我們的兩個節點的propsData是相同的，都爲{color: '#0f0',message: '綠色'}，這樣的話Item組件的 props 就不會更新，Item也不會重新渲染。再回到updateChildren中，會繼續執行"移動oldStartVnode節點"的操作，將 DOM 元素。移動到正確位置，其他節點對比也是同樣的流程。

可以發現，在整個流程中，只是移動了節點，並沒有觸發 Item 組件的重新渲染，這樣實現了節點的複用。

我們再來看下使用index作爲 key 的情況，使用index時，舊的children是：

;[
  {
    tag: 'Item',
    key: 0,
    propsData: {
      color: '#f00',
      message: '紅色'
    }
  },
  {
    tag: 'Item',
    key: 1,
    propsData: {
      color: '#0f0',
      message: '綠色'
    }
  }
]

執行reverse後的新的children是：

;[
  {
    tag: 'Item',
    key: 0,
    propsData: {
      color: '#0f0',
      message: '綠色'
    }
  },
  {
    tag: 'Item',
    key: 1,
    propsData: {
      color: '#f00',
      message: '紅色'
    }
  }
]

這裏和id作爲 key 時的節點就有所不同了，雖然我們把 list 順序顛倒了，但是 key 的順序卻沒變，在updateChildren時sameVnode(oldStartVnode, newStartVnode)將會成立，即舊的首節點和新的首節點相同，此時執行patchVnode -> prePatch -> 更新props，這個時候舊的 propsData 是{color: '#f00',message: '紅色'}，新的 propsData 是{color: '#0f0',message: '綠色'}，更新過後，Item 的 props 將會發生改變，會觸發 Item 組件的重新渲染。

這就是 index 作爲 key 和 id 作爲 key 時的區別，id 作爲 key 時，僅僅是移動了節點，並沒有觸發 Item 的重新渲染。index 作爲 key 時，觸發了 Item 的重新渲染，可想而知，當 Item 是一個複雜的組件時，必然會引起性能問題。

上面的流程比較複雜，涉及的也比較多，可以拆開寫好幾篇文章，有些地方我只是簡略的說了一下，如果你不是很明白的話，你可以把上面的例子複製下來，在自己的電腦上調式，我在 Item 的渲染函數中加了打印日誌和 debugger，你可以分別用 id 和 index 作爲 key 嘗試下，你會發現 id 作爲 key 時，Item 的渲染函數沒有執行，但是 index 作爲 key 時，Item 的渲染函數執行了，這就是這兩種方式的區別。

延遲渲染

延遲渲染就是分批渲染，假設我們某個頁面裏有一些組件在初始化時需要執行復雜的邏輯：

<template>
  <div>
    <!-- Heavy組件初始化時需要執行很複雜的邏輯，執行大量計算 -->
    <Heavy1 />
    <Heavy2 />
    <Heavy3 />
    <Heavy4 />
  </div>
</template>

這將會佔用很長時間，導致幀數下降、卡頓，其實可以使用分批渲染的方式來進行優化，就是先渲染一部分，再渲染另一部分：

參考黃軼老師揭祕 Vue.js 九個性能優化技巧中的代碼：

<template>
  <div>
    <Heavy v-if="defer(1)" />
    <Heavy v-if="defer(2)" />
    <Heavy v-if="defer(3)" />
    <Heavy v-if="defer(4)" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      displayPriority: 0
    }
  },
  mounted() {
    this.runDisplayPriority()
  },
  methods: {
    runDisplayPriority() {
      const step = () => {
        requestAnimationFrame(() => {
          this.displayPriority++
          if (this.displayPriority < 10) {
            step()
          }
        })
      }
      step()
    },
    defer(priority) {
      return this.displayPriority >= priority
    }
  }
}
</script>

其實原理很簡單，主要是維護displayPriority變量，通過requestAnimationFrame在每一幀渲染時自增，然後我們就可以在組件上通過v-if="defer(n)"使displayPriority增加到某一值時再渲染，這樣就可以避免 js 執行時間過長導致的卡頓問題了。

使用非響應式數據

在 Vue 組件初始化數據時，會遞歸遍歷在 data 中定義的每一條數據，通過Object.defineProperty將數據改成響應式，這就意味着如果 data 中的數據量很大的話，在初始化時將會使用很長的時間去執行Object.defineProperty, 也就會帶來性能問題，這個時候我們可以強制使數據變爲非響應式，從而節省時間，看下這個例子：

<template>
  <div>
    <ul>
      <li v-for="item in heavyData" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
// 一萬條數據
const heavyData = Array(10000)
  .fill(null)
  .map((_, idx) => ({ name: 'test', message: 'test', id: idx }))

export default {
  data() {
    return {
      heavyData: heavyData
    }
  },
  beforeCreate() {
    this.start = Date.now()
  },
  created() {
    console.log(Date.now() - this.start)
  }
}
</script>

heavyData中有一萬條數據，這裏統計了下從beforeCreate到created經歷的時間，對於這個例子而言，這個時間基本上就是初始化數據的時間。

我在我個人的電腦上多次測試，這個時間一直在40-50ms，然後我們通過Object.freeze()方法，將heavyData變爲非響應式的再試下：

//...
data() {
  return {
    heavyData: Object.freeze(heavyData)
  }
}
//...

改完之後再試下，初始化數據的時間變成了0-1ms，快了有40ms，這40ms都是遞歸遍歷heavyData執行Object.defineProperty的時間。

那麼，爲什麼Object.freeze()會有這樣的效果呢？對某一對象使用Object.freeze()後，將不能向這個對象添加新的屬性，不能刪除已有屬性，不能修改該對象已有屬性的可枚舉性、可配置性、可寫性，以及不能修改已有屬性的值。

而 Vue 在將數據改造成響應式之前有個判斷：

export function observe(value, asRootData) {
  // ...省略其他邏輯
  if (
    shouldObserve &&
    !isServerRendering() &&
    (Array.isArray(value) || isPlainObject(value)) &&
    Object.isExtensible(value) &&
    !value._isVue
  ) {
    ob = new Observer(value)
  }
  // ...省略其他邏輯
}

這個判斷條件中有一個Object.isExtensible(value)，這個方法是判斷一個對象是否是可擴展的，由於我們使用了Object.freeze()，這裏肯定就返回了false，所以就跳過了下面的過程，自然就省了很多時間。

實際上，不止初始化數據時有影響，你可以用上面的例子統計下從created到mounted所用的時間，在我的電腦上不使用Object.freeze()時，這個時間是60-70ms，使用Object.freeze()後降到了40-50ms，這是因爲在渲染函數中讀取heavyData中的數據時，會執行到通過Object.defineProperty定義的getter方法，Vue 在這裏做了一些收集依賴的處理，肯定就會佔用一些時間，由於使用了Object.freeze()後的數據是非響應式的，沒有了收集依賴的過程，自然也就節省了性能。

由於訪問響應式數據會走到自定義 getter 中並收集依賴，所以平時使用時要避免頻繁訪問響應式數據，比如在遍歷之前先將這個數據存在局部變量中，尤其是在計算屬性、渲染函數中使用，關於這一點更具體的說明，你可以看黃奕老師的這篇文章：Local variables

但是這樣做也不是沒有任何問題的，這樣會導致heavyData下的數據都不是響應式數據，你對這些數據使用computed、watch等都不會產生效果，不過通常來說這種大量的數據都是展示用的，如果你有特殊的需求，你可以只對這種數據的某一層使用Object.freeze()，同時配合使用上文中的延遲渲染、函數式組件等，可以極大提升性能。

模板編譯和渲染函數、JSX 的性能差異

Vue 項目不僅可以使用 SFC 的方式開發，也可以使用渲染函數或 JSX 開發，很多人認爲僅僅是隻是開發方式不同，卻不知這些開發方式之間也有性能差異，甚至差異很大，這一節我就找些例子來說明下，希望你以後在選擇開發方式時有更多衡量的標準。

其實 Vue2 模板編譯中的性能優化不多，Vue3 中有很多，Vue3 通過編譯和運行時結合的方式提升了很大的性能，但是由於本篇文章講的是 Vue2 的性能優化，並且 Vue2 現在還是有很多人在使用，所以我就挑 Vue2 模板編譯中的一點來說下。

靜態節點

下面這個模板：

<div>你好！ <span>Hello</span></div>

會被編譯成：

function render() {
  with (this) {
    return _m(0)
  }
}

可以看到和普通的渲染函數是有些不一樣的，下面我們來看下爲什麼會編譯成這樣的代碼。

Vue 的編譯會經過optimize過程，這個過程中會標記靜態節點，具體內容可以看黃奕老師寫的這個文檔：Vue2 編譯 - optimize 標記靜態節點。

在codegen階段判斷到靜態節點的標記會走到genStatic的分支：

function genStatic(el, state) {
  el.staticProcessed = true
  const originalPreState = state.pre
  if (el.pre) {
    state.pre = el.pre
  }
  state.staticRenderFns.push(`with(this){return ${genElement(el, state)}}`)
  state.pre = originalPreState
  return `_m(${state.staticRenderFns.length - 1}${
    el.staticInFor ? ',true' : ''
  })`
}

這裏就是生成代碼的關鍵邏輯，這裏會把渲染函數保存在staticRenderFns裏，然後拿到當前值的下標生成_m函數，這就是爲什麼我們會得到_m(0)。

這個_m其實是renderStatic的縮寫：

export function renderStatic(index, isInFor) {
  const cached = this._staticTrees || (this._staticTrees = [])
  let tree = cached[index]
  if (tree && !isInFor) {
    return tree
  }
  tree = cached[index] = this.$options.staticRenderFns[index].call(
    this._renderProxy,
    null,
    this
  )
  markStatic(tree, `__static__${index}`, false)
  return tree
}

function markStatic(tree, key) {
  if (Array.isArray(tree)) {
    for (let i = 0; i < tree.length; i++) {
      if (tree[i] && typeof tree[i] !== 'string') {
        markStaticNode(tree[i], `${key}_${i}`, isOnce)
      }
    }
  } else {
    markStaticNode(tree, key, isOnce)
  }
}

function markStaticNode(node, key, isOnce) {
  node.isStatic = true
  node.key = key
  node.isOnce = isOnce
}

renderStatic的內部實現比較簡單，先是獲取到組件實例的_staticTrees，如果沒有就創建一個，然後嘗試從_staticTrees上獲取之前緩存的節點，獲取到的話就直接返回，否則就從staticRenderFns上獲取到對應的渲染函數執行並將結果緩存到_staticTrees上，這樣下次再進入這個函數時就會直接從緩存上返回結果。

拿到節點後還會通過markStatic將節點打上isStatic等標記，標記爲isStatic的節點會直接跳過patchVnode階段，因爲靜態節點是不會變的，所以也沒必要 patch，跳過 patch 可以節省性能。

通過編譯和運行時結合的方式，可以幫助我們很好的提升應用性能，這是渲染函數 / JSX 很難達到的，當然不是說不能用 JSX，相比於模板，JSX 更加靈活，兩者有各自的使用場景。在這裏寫這些是希望能給你提供一些技術選型的標準。

Vue2 的編譯優化除了靜態節點，還有插槽，createElement 等。

Vue3 的模板編譯優化

相比於 Vue2，Vue3 中的模板編譯優化更加突出，性能提升的更多，由於涉及的比較多，本篇文章寫不下，如果你感興趣的話你可以看看這些文章：Vue3 Compiler 優化細節，如何手寫高性能渲染函數，聊聊 Vue.js 3.0 的模板編譯優化，以及尤雨溪的解讀視頻：Vue 之父尤雨溪深度解讀 Vue3.0 的開發思路，以後我也會單獨寫一些文章分析 Vue3 的模板編譯優化。

總結

希望你能通過這篇文章瞭解一些常見的 Vue 性能優化方式並理解其背後的原理，在日常開發中不僅要能寫出代碼，還要能知道這樣寫的好處 / 壞處是什麼，避免寫出容易產生性能問題的代碼。

這篇文章的內容並不是全部的優化方式。除了文章涉及的這些，還有打包優化、異步加載，懶加載等等。性能優化並不是一下子就完成的，需要你結合項目分析出性能瓶頸，找到問題並解決，在這個過程中，你肯定能發掘出更多優化方式。

最後，這篇文章寫了很長時間，花費了很多精力，如果你覺得對你有幫助的話，麻煩點個贊⭐，支持下，感謝！

前言

使用v-slot:slotName，而不是slot="slotName"

使用計算屬性

使用函數式組件

結合場景使用 v-show 和 v-if

使用 keep-alive

避免 v-for 和 v-if 同時使用

始終爲 v-for 添加 key，並且不要將 index 作爲的 key

延遲渲染

使用非響應式數據

模板編譯和渲染函數、JSX 的性能差異

靜態節點

Vue3 的模板編譯優化

總結

相關推薦

猜你喜歡

使用`v-slot:slotName`，而不是`slot="slotName"`