{{name}}

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

  {{name}}

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

// UserProfile.vue

 


 
// App.vue

 

 

  {{ props.name }}

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

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')]
        )
      ],
    )
  }
}

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

  
    {{ user.name }}
  

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

 

復(fù)制代碼

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

這里有一個 list，會渲染出來a b，點擊后會執(zhí)行reverse方法將這個 list 顛倒下順序，你可以將這個例子復(fù)制下來，在自己的電腦上看下效果。

我們先來分析用id作為 key 時，點擊時會發(fā)生什么，

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

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

執(zhí)行reverse后的新的children是：

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

此時執(zhí)行updateChildren，updateChildren會對新舊兩組 children 節(jié)點的循環(huán)進行對比：

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)) {
    // 對新舊節(jié)點執(zhí)行patchVnode
    // 移動指針
  } else if (sameVnode(oldEndVnode, newEndVnode)) {
    // 對新舊節(jié)點執(zhí)行patchVnode
    // 移動指針
  } else if (sameVnode(oldStartVnode, newEndVnode)) {
    // 對新舊節(jié)點執(zhí)行patchVnode
    // 移動oldStartVnode節(jié)點
    // 移動指針
  } else if (sameVnode(oldEndVnode, newStartVnode)) {
    // 對新舊節(jié)點執(zhí)行patchVnode
    // 移動oldEndVnode節(jié)點
    // 移動指針
  } else {
    //...
  }
}

通過sameVnode判斷兩個節(jié)點是相同節(jié)點的話，就會執(zhí)行相應(yīng)的邏輯：

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)成立，即舊的首節(jié)點和新的尾節(jié)點是同一個節(jié)點，此時會執(zhí)行patchVnode邏輯，patchVnode中會執(zhí)行prePatch，prePatch中會更新 props，此時我們的兩個節(jié)點的propsData是相同的，都為{color: '#0f0',message: '綠色'}，這樣的話Item組件的 props 就不會更新，Item也不會重新渲染。再回到updateChildren中，會繼續(xù)執(zhí)行"移動oldStartVnode節(jié)點"的操作，將 DOM 元素。移動到正確位置，其他節(jié)點對比也是同樣的流程。

可以發(fā)現(xiàn)，在整個流程中，只是移動了節(jié)點，并沒有觸發(fā) Item 組件的重新渲染，這樣實現(xiàn)了節(jié)點的復(fù)用。

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

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

執(zhí)行reverse后的新的children是：

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

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

這就是 index 作為 key 和 id 作為 key 時的區(qū)別，id 作為 key 時，僅僅是移動了節(jié)點，并沒有觸發(fā) Item 的重新渲染。index 作為 key 時，觸發(fā)了 Item 的重新渲染，可想而知，當 Item 是一個復(fù)雜的組件時，必然會引起性能問題。

上面的流程比較復(fù)雜，涉及的也比較多，可以拆開寫好幾篇文章，有些地方我只是簡略的說了一下，如果你不是很明白的話，你可以把上面的例子復(fù)制下來，在自己的電腦上調(diào)式，我在 Item 的渲染函數(shù)中加了打印日志和 debugger，你可以分別用 id 和 index 作為 key 嘗試下，你會發(fā)現(xiàn) id 作為 key 時，Item 的渲染函數(shù)沒有執(zhí)行，但是 index 作為 key 時，Item 的渲染函數(shù)執(zhí)行了，這就是這兩種方式的區(qū)別。

延遲渲染

延遲渲染就是分批渲染，假設(shè)我們某個頁面里有一些組件在初始化時需要執(zhí)行復(fù)雜的邏輯：

這將會占用很長時間，導(dǎo)致幀數(shù)下降、卡頓，其實可以使用分批渲染的方式來進行優(yōu)化，就是先渲染一部分，再渲染另一部分：

參考黃軼老師揭秘 Vue.js 九個性能優(yōu)化技巧中的代碼：

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

使用非響應(yīng)式數(shù)據(jù)

在 Vue 組件初始化數(shù)據(jù)時，會遞歸遍歷在 data 中定義的每一條數(shù)據(jù)，通過Object.defineProperty將數(shù)據(jù)改成響應(yīng)式，這就意味著如果 data 中的數(shù)據(jù)量很大的話，在初始化時將會使用很長的時間去執(zhí)行Object.defineProperty, 也就會帶來性能問題，這個時候我們可以強制使數(shù)據(jù)變?yōu)榉琼憫?yīng)式，從而節(jié)省時間，看下這個例子：

heavyData中有一萬條數(shù)據(jù)，這里統(tǒng)計了下從beforeCreate到created經(jīng)歷的時間，對于這個例子而言，這個時間基本上就是初始化數(shù)據(jù)的時間。

我在我個人的電腦上多次測試，這個時間一直在40-50ms，然后我們通過Object.freeze()方法，將heavyData變?yōu)榉琼憫?yīng)式的再試下：

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

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

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

而 Vue 在將數(shù)據(jù)改造成響應(yīng)式之前有個判斷：

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，所以就跳過了下面的過程，自然就省了很多時間。

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

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

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

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

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

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

靜態(tài)節(jié)點

下面這個模板：

你好！ Hello

會被編譯成：

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

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

Vue 的編譯會經(jīng)過optimize過程，這個過程中會標記靜態(tài)節(jié)點，具體內(nèi)容可以看黃奕老師寫的這個文檔：Vue2 編譯 - optimize 標記靜態(tài)節(jié)點。

在codegen階段判斷到靜態(tài)節(jié)點的標記會走到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' : ''
  })`
}

這里就是生成代碼的關(guān)鍵邏輯，這里會把渲染函數(shù)保存在staticRenderFns里，然后拿到當前值的下標生成_m函數(shù)，這就是為什么我們會得到_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的內(nèi)部實現(xiàn)比較簡單，先是獲取到組件實例的_staticTrees，如果沒有就創(chuàng)建一個，然后嘗試從_staticTrees上獲取之前緩存的節(jié)點，獲取到的話就直接返回，否則就從staticRenderFns上獲取到對應(yīng)的渲染函數(shù)執(zhí)行并將結(jié)果緩存到_staticTrees上，這樣下次再進入這個函數(shù)時就會直接從緩存上返回結(jié)果。

拿到節(jié)點后還會通過markStatic將節(jié)點打上isStatic等標記，標記為isStatic的節(jié)點會直接跳過patchVnode階段，因為靜態(tài)節(jié)點是不會變的，所以也沒必要 patch，跳過 patch 可以節(jié)省性能。

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

Vue2 的編譯優(yōu)化除了靜態(tài)節(jié)點，還有插槽，createElement 等。

上述就是小編為大家分享的vue的性能優(yōu)化方法有什么了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。