前言

區(qū)別

生命周期的變化

// vue3
<script setup>     
import { onMounted } from 'vue'

onMounted(() => {
  ...
})
// 可將不同的邏輯拆開成多個onMounted，依然按順序執(zhí)行，不被覆蓋
onMounted(() => {
  ...
})
</script>

// vue2
<script>     
   export default {         
      mounted() {             
        ...         
      },           
   }
</script> 

復制代碼

多根節(jié)點

<template>
  <div>
    <header>...</header>
    <main>...</main>
    <footer>...</footer>
  </div>
</template>
復制代碼

<template>
  <header>...</header>
  <main>...</main>
  <footer>...</footer>
</template>
復制代碼

異步組件

<tempalte>
   <suspense>
     <template #default>
       <todo-list />
     </template>
     <template #fallback>
       <div>
         Loading...
       </div>
     </template>
   </suspense>
</template>
復制代碼

Teleport

<button @click="dialogVisible = true">點擊</button>
<teleport to="body">
   <div class="dialog" v-if="dialogVisible">
   </div>
</teleport>
復制代碼

組合式API

// main.vue
<template>
  <span>mouse position {{x}} {{y}}</span>
</template>

<script setup>
import { ref } from 'vue'
import useMousePosition from './useMousePosition'

const {x, y} = useMousePosition()

}
</script>
復制代碼

// useMousePosition.js
import { ref, onMounted, onUnmounted } from 'vue'

function useMousePosition() {
  let x = ref(0)
  let y = ref(0)
  
  function update(e) {
    x.value = e.pageX
    y.value = e.pageY
  }
  
  onMounted(() => {
    window.addEventListener('mousemove', update)
  })
  
  onUnmounted(() => {
    window.removeEventListener('mousemove', update)
  })
  
  return {
    x,
    y
  }
}
</script>
復制代碼

響應式原理

Object.defineProperty

let obj = {}
let name = '瑾行'
Object.defineProperty(obj, 'name', {
  enumerable: true, // 可枚舉（是否可通過for...in 或 Object.keys()進行訪問）
  configurable: true, // 可配置（是否可使用delete刪除，是否可再次設置屬性）
  // value: '', // 任意類型的值，默認undefined
  // writable: true, // 可重寫
  get: function() {
    return name
  },
  set: function(value) {
    name = value
  }
})
復制代碼

function defineReactive(obj, key, val) {
  // 一 key 一個 dep
  const dep = new Dep()
  
  // 獲取 key 的屬性描述符，發(fā)現(xiàn)它是不可配置對象的話直接 return
  const property = Object.getOwnPropertyDescriptor(obj, key)
  if (property && property.configurable === false) { return }
  
  // 獲取 getter 和 setter，并獲取 val 值
  const getter = property && property.get
  const setter = property && property.set
  if((!getter || setter) && arguments.length === 2) { val = obj[key] }
  
  // 遞歸處理，保證對象中所有 key 被觀察
  let childOb = observe(val)
  
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    // get 劫持 obj[key] 的 進行依賴收集
    get: function reactiveGetter() {
      const value = getter ? getter.call(obj) : val
      if(Dep.target) {
        // 依賴收集
        dep.depend()
        if(childOb) {
          // 針對嵌套對象，依賴收集
          childOb.dep.depend()
          // 觸發(fā)數(shù)組響應式
          if(Array.isArray(value)) {
            dependArray(value)
          }
        }
      }
    }
    return value
  })
  // set 派發(fā)更新 obj[key]
  set: function reactiveSetter(newVal) {
    ...
    if(setter) {
      setter.call(obj, newVal)
    } else {
      val = newVal
    }
    // 新值設置響應式
    childOb = observe(val)
    // 依賴通知更新
    dep.notify()
  }
}
復制代碼

Proxy

1. 對象/數(shù)組的新增、刪除。
2. 監(jiān)測.length修改。
3. Map、Set、WeakMap、WeakSet的支持。

const handler = {
  get: function(obj, prop) {
    return prop in obj ? obj[prop] : ''
  },
  set: function() {},
  ...
}
復制代碼

function createReactiveObject(target, isReadOnly, baseHandlers, collectionHandlers, proxyMap) {
  ...
  // collectionHandlers: 處理Map、Set、WeakMap、WeakSet
  // baseHandlers: 處理數(shù)組、對象
  const proxy = new Proxy(
    target,
    targetType === TargetType.COLLECTION ? collectionHandlers : baseHandlers
  )
  proxyMap.set(target, proxy)
  return proxy
}
復制代碼

// 依賴收集
function createGetter(isReadonly = false, shallow = false) {
  return function get(target: Target, key: string | symbol, receiver: object) {
    ...
    // 數(shù)組類型
    const targetIsArray = isArray(target)
    if (!isReadonly && targetIsArray && hasOwn(arrayInstrumentations, key)) {
      return Reflect.get(arrayInstrumentations, key, receiver)
    }
    // 非數(shù)組類型
    const res = Reflect.get(target, key, receiver);
    
    // 對象遞歸調用
    if (isObject(res)) {
      return isReadonly ? readonly(res) : reactive(res)
    }

    return res
  }
}
// 派發(fā)更新
function createSetter() {
  return function set(target: Target, key: string | symbol, value: unknown, receiver: Object) {
    value = toRaw(value)
    oldValue = target[key]
    // 因 ref 數(shù)據在 set value 時就已 trigger 依賴了，所以直接賦值 return 即可
    if (!isArray(target) && isRef(oldValue) && !isRef(value)) {
      oldValue.value = value
      return true
    }

    // 對象是否有 key 有 key set，無 key add
    const hadKey = hasOwn(target, key)
    const result = Reflect.set(target, key, value, receiver)
    
    if (target === toRaw(receiver)) {
      if (!hadKey) {
        trigger(target, TriggerOpTypes.ADD, key, value)
      } else if (hasChanged(value, oldValue)) {
        trigger(target, TriggerOpTypes.SET, key, value, oldValue)
      }
    }
    return result
  }
}
復制代碼

虛擬DOM

<div id="app">
  <h1>技術摸魚</h1>
  <p>今天天氣真不錯</p>
  <div>{{name}}</div>
</div>
復制代碼

import { createElementVNode as _createElementVNode, toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue"

const _withScopeId = n => (_pushScopeId("scope-id"),n=n(),_popScopeId(),n)
const _hoisted_1 = { id: "app" }
const _hoisted_2 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode("h1", null, "技術摸魚", -1 /* HOISTED */))
const _hoisted_3 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode("p", null, "今天天氣真不錯", -1 /* HOISTED */))

export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createElementBlock("div", _hoisted_1, [
    _hoisted_2,
    _hoisted_3,
    _createElementVNode("div", null, _toDisplayString(_ctx.name), 1 /* TEXT */)
  ]))
}
復制代碼

export const enum PatchFlags { 
  TEXT = 1, // 動態(tài)文本內容
  CLASS = 1 << 1, // 動態(tài)類名
  STYLE = 1 << 2, // 動態(tài)樣式
  PROPS = 1 << 3, // 動態(tài)屬性，不包含類名和樣式
  FULL_PROPS = 1 << 4, // 具有動態(tài) key 屬性，當 key 改變，需要進行完整的 diff 比較
  HYDRATE_EVENTS = 1 << 5, // 帶有監(jiān)聽事件的節(jié)點
  STABLE_FRAGMENT = 1 << 6, // 不會改變子節(jié)點順序的 fragment
  KEYED_FRAGMENT = 1 << 7, // 帶有 key 屬性的 fragment 或部分子節(jié)點
  UNKEYED_FRAGMENT = 1 << 8,  // 子節(jié)點沒有 key 的fragment
  NEED_PATCH = 1 << 9, // 只會進行非 props 的比較
  DYNAMIC_SLOTS = 1 << 10, // 動態(tài)的插槽
  HOISTED = -1,  // 靜態(tài)節(jié)點，diff階段忽略其子節(jié)點
  BAIL = -2 // 代表 diff 應該結束
}
復制代碼

事件緩存

<div id="app">
  <h1>技術摸魚</h1>
  <p>今天天氣真不錯</p>
  <div>{{name}}</div>
  <span onCLick="() => {}"><span>
</div>
復制代碼

import { createElementVNode as _createElementVNode, toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue"

const _withScopeId = n => (_pushScopeId("scope-id"),n=n(),_popScopeId(),n)
const _hoisted_1 = { id: "app" }
const _hoisted_2 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode("h1", null, "技術摸魚", -1 /* HOISTED */))
const _hoisted_3 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode("p", null, "今天天氣真不錯", -1 /* HOISTED */))
const _hoisted_4 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode("span", { onCLick: "() => {}" }, [
  /*#__PURE__*/_createElementVNode("span")
], -1 /* HOISTED */))

export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createElementBlock("div", _hoisted_1, [
    _hoisted_2,
    _hoisted_3,
    _createElementVNode("div", null, _toDisplayString(_ctx.name), 1 /* TEXT */),
    _hoisted_4
  ]))
}
復制代碼

Diff 優(yōu)化

function patchChildren(n1, n2, container, parentAnchor, parentComponent, parentSuspense, isSVG, optimized) {
  // 獲取新老孩子節(jié)點
  const c1 = n1 && n1.children
  const c2 = n2.children
  const prevShapeFlag = n1 ? n1.shapeFlag : 0
  const { patchFlag, shapeFlag } = n2
  
  // 處理 patchFlag 大于 0 
  if(patchFlag > 0) {
    if(patchFlag && PatchFlags.KEYED_FRAGMENT) {
      // 存在 key
      patchKeyedChildren()
      return
    } els if(patchFlag && PatchFlags.UNKEYED_FRAGMENT) {
      // 不存在 key
      patchUnkeyedChildren()
      return
    }
  }
  
  // 匹配是文本節(jié)點（靜態(tài)）：移除老節(jié)點，設置文本節(jié)點
  if(shapeFlag && ShapeFlags.TEXT_CHILDREN) {
    if (prevShapeFlag & ShapeFlags.ARRAY_CHILDREN) {
      unmountChildren(c1 as VNode[], parentComponent, parentSuspense)
    }
    if (c2 !== c1) {
      hostSetElementText(container, c2 as string)
    }
  } else {
    // 匹配新老 Vnode 是數(shù)組，則全量比較；否則移除當前所有的節(jié)點
    if (prevShapeFlag & ShapeFlags.ARRAY_CHILDREN) {
      if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
        patchKeyedChildren(c1, c2, container, anchor, parentComponent, parentSuspense,...)
      } else {
        unmountChildren(c1 as VNode[], parentComponent, parentSuspense, true)
      }
    } else {
      
      if(prevShapeFlag & ShapeFlags.TEXT_CHILDREN) {
        hostSetElementText(container, '')
      } 
      if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
        mountChildren(c2 as VNodeArrayChildren, container,anchor,parentComponent,...)
      }
    }
  }
}
復制代碼

function patchUnkeyedChildren(c1, c2, container, parentAnchor, parentComponent, parentSuspense, isSVG, optimized) {
  c1 = c1 || EMPTY_ARR
  c2 = c2 || EMPTY_ARR
  const oldLength = c1.length
  const newLength = c2.length
  const commonLength = Math.min(oldLength, newLength)
  let i
  for(i = 0; i < commonLength; i++) {
    // 如果新 Vnode 已經掛載，則直接 clone 一份，否則新建一個節(jié)點
    const nextChild = (c2[i] = optimized ? cloneIfMounted(c2[i] as Vnode)) : normalizeVnode(c2[i])
    patch()
  }
  if(oldLength > newLength) {
    // 移除多余的節(jié)點
    unmountedChildren()
  } else {
    // 創(chuàng)建新的節(jié)點
    mountChildren()
  }
  
}
復制代碼

function patchKeyedChildren(c1, c2, container, parentAnchor, parentComponent, parentSuspense, isSVG, optimized) {
  let i = 0;
  const e1 = c1.length - 1
  const e2 = c2.length - 1
  const l2 = c2.length
  
  // 從頭開始遍歷，若新老節(jié)點是同一節(jié)點，執(zhí)行 patch 更新差異；否則，跳出循環(huán) 
  while(i <= e1 && i <= e2) {
    const n1 = c1[i]
    const n2 = c2[i]
    
    if(isSameVnodeType) {
      patch(n1, n2, container, parentAnchor, parentComponent, parentSuspense, isSvg, optimized)
    } else {
      break
    }
    i++
  }
  
  // 從尾開始遍歷，若新老節(jié)點是同一節(jié)點，執(zhí)行 patch 更新差異；否則，跳出循環(huán) 
  while(i <= e1 && i <= e2) {
    const n1 = c1[e1]
    const n2 = c2[e2]
    if(isSameVnodeType) {
      patch(n1, n2, container, parentAnchor, parentComponent, parentSuspense, isSvg, optimized)
    } else {
      break
    }
    e1--
    e2--
  }
  
  // 僅存在需要新增的節(jié)點
  if(i > e1) {    
    if(i <= e2) {
      const nextPos = e2 + 1
      const anchor = nextPos < l2 ? c2[nextPos] : parentAnchor
      while(i <= e2) {
        patch(null, c2[i], container, parentAnchor, parentComponent, parentSuspense, isSvg, optimized)
      }
    }
  }
  
  // 僅存在需要刪除的節(jié)點
  else if(i > e2) {
    while(i <= e1) {
      unmount(c1[i], parentComponent, parentSuspense, true)    
    }
  }
  
  // 新舊節(jié)點均未遍歷完
  // [i ... e1 + 1]: a b [c d e] f g
  // [i ... e2 + 1]: a b [e d c h] f g
  // i = 2, e1 = 4, e2 = 5
  else {
    const s1 = i
    const s2 = i
    // 緩存新 Vnode 剩余節(jié)點 上例即{e: 2, d: 3, c: 4, h: 5}
    const keyToNewIndexMap = new Map()
    for (i = s2; i <= e2; i++) {
      const nextChild = (c2[i] = optimized
          ? cloneIfMounted(c2[i] as VNode)
          : normalizeVNode(c2[i]))
      
      if (nextChild.key != null) {
        if (__DEV__ && keyToNewIndexMap.has(nextChild.key)) {
          warn(
            `Duplicate keys found during update:`,
             JSON.stringify(nextChild.key),
            `Make sure keys are unique.`
          )
        }
        keyToNewIndexMap.set(nextChild.key, i)
      }
    }
  }
  
  let j = 0
  // 記錄即將 patch 的 新 Vnode 數(shù)量
  let patched = 0
  // 新 Vnode 剩余節(jié)點長度
  const toBePatched = e2 - s2 + 1
  // 是否移動標識
  let moved = false
  let maxNewindexSoFar = 0
  
  // 初始化 新老節(jié)點的對應關系（用于后續(xù)最大遞增序列算法）
  const newIndexToOldIndexMap = new Array(toBePatched)
  for (i = 0; i < toBePatched; i++) newIndexToOldIndexMap[i] = 0
  
  // 遍歷老 Vnode 剩余節(jié)點
  for (i = s1; i <= e1; i++) {
    const prevChild = c1[i]
    
    // 代表當前新 Vnode 都已patch，剩余舊 Vnode 移除即可
    if (patched >= toBePatched) {
      unmount(prevChild, parentComponent, parentSuspense, true)
      continue
    }
    
    let newIndex
    // 舊 Vnode 存在 key，則從 keyToNewIndexMap 獲取
    if (prevChild.key != null) {
      newIndex = keyToNewIndexMap.get(prevChild.key)
    // 舊 Vnode 不存在 key，則遍歷新 Vnode 獲取
    } else {
      for (j = s2; j <= e2; j++) {
        if (newIndexToOldIndexMap[j - s2] === 0 && isSameVNodeType(prevChild, c2[j] as VNode)){
           newIndex = j
           break
        }
      }           
   }
   
   // 刪除、更新節(jié)點
   // 新 Vnode 沒有 當前節(jié)點，移除
   if (newIndex === undefined) {
     unmount(prevChild, parentComponent, parentSuspense, true)
   } else {
     // 舊 Vnode 的下標位置 + 1，存儲到對應 新 Vnode 的 Map 中
     // + 1 處理是為了防止數(shù)組首位下標是 0 的情況，因為這里的 0 代表需創(chuàng)建新節(jié)點
     newIndexToOldIndexMap[newIndex - s2] = i + 1
     
     // 若不是連續(xù)遞增，則代表需要移動
     if (newIndex >= maxNewIndexSoFar) {
       maxNewIndexSoFar = newIndex
     } else {
       moved = true
     }
     
     patch(prevChild,c2[newIndex],...)
     patched++
   }
  }
  
  // 遍歷結束，newIndexToOldIndexMap = {0:5, 1:4, 2:3, 3:0}
  // 新建、移動節(jié)點
  const increasingNewIndexSequence = moved
  // 獲取最長遞增序列
  ? getSequence(newIndexToOldIndexMap)
  : EMPTY_ARR
  
  j = increasingNewIndexSequence.length - 1

  for (i = toBePatched - 1; i >= 0; i--) {
    const nextIndex = s2 + i
    const nextChild = c2[nextIndex] as VNode
    const anchor = extIndex + 1 < l2 ? (c2[nextIndex + 1] as VNode).el : parentAnchor
    // 0 新建 Vnode
    if (newIndexToOldIndexMap[i] === 0) {
      patch(null,nextChild,...)
    } else if (moved) {
      // 移動節(jié)點
      if (j < 0 || i !== increasingNewIndexSequence[j]) {
        move(nextChild, container, anchor, MoveType.REORDER)
      } else {
        j--
      }
    }
  }
}
復制代碼

打包優(yōu)化

tree-shaking：模塊打包webpack、rollup等中的概念。移除 JavaScript 上下文中未引用的代碼。主要依賴于import和export語句，用來檢測代碼模塊是否被導出、導入，且被 JavaScript 文件使用。

import Vue from 'vue'

Vue.nextTick(() => {
  // 一些和DOM有關的東西
})
復制代碼

import { nextTick } from 'vue'

nextTick(() => {
  // 一些和DOM有關的東西
})
復制代碼

• Vue.nextTick
• Vue.observable （用 Vue.reactive 替換）
• Vue.version
• Vue.compile （僅全構建）
• Vue.set （僅兼容構建）
• Vue.delete （僅兼容構建）

自定義渲染API

// 自定義runtime-render函數(shù)
import { createApp } from './runtime-render'
import App from './src/App'

createApp(App).mount('#app')
復制代碼

TypeScript 支持

• Vue2 Option API中 option 是個簡單對象，而TS是一種類型系統(tǒng)，面向對象的語法，不是特別匹配。
• Vue2 需要vue-class-component強化vue原生組件，也需要vue-property-decorator增加更多結合Vue特性的裝飾器，寫法比較繁瑣。

周邊

• vue-cli 4.5.0
• Vue Router 4.0
• Vuex 4.0
• Element plus
• Vite

參考

參考資料

逆鋒起筆專注于程序員圈子，你不但可以學習到java、python等主流技術干貨，還可以第一時間獲悉最新技術動態(tài)、內測資格、BAT大佬的經驗、精品視頻教程、副業(yè)賺錢經驗，微信搜索readdot關注！