快捷導(dǎo)航

vue3組件的掛載更新流程詳解

更新時間：2024年02月07日 08:32:56 作者：總之就是非?？蓯?

這篇文章主要介紹了vue3組件的掛載更新流程，文中通過代碼示例給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下

test('basic component', async () => {
  const number = ref(1)
  const App = {
    setup() {
      const innerNumber = number
      return () => {
        console.log('app render')
        return h('div', { id: 'test-id', class: 'test-class' }, [
          h(Comp, { value: innerNumber.value }),
        ])
      }
    },
  }
  const Comp = {
    props: ['value'],
    setup(props: any) {
      const x = computed(() => props.value)
      return () => {
        console.log('son render')
        return h('span', null, 'number ' + x.value)
      }
    },
  }

  const root = nodeOps.createElement('div')
  render(h(App, null), root)
  let innerStr = serializeInner(root)
  expect(innerStr).toBe(
    `<div id="test-id" class="test-class"><span>number 1</span></div>`
  )
  number.value = 3
  await nextTick()
  innerStr = serializeInner(root)
  expect(innerStr).toBe(
    `<div id="test-id" class="test-class"><span>number 3</span></div>`
  )
})

掛載流程

在斷點調(diào)試的過程中，發(fā)現(xiàn)首先會進行掛載組件mountComponent，因為這是第一次渲染，在進入setupComponent函數(shù)，用于處理props和slots和一些初始化工作，比如當(dāng)setup函數(shù)的返回值是一個對象的時候，代理setup的返回值(proxyRefs(setupResult))，但是當(dāng)前的測試用例并不會走這一步，因為當(dāng)前返回的是一個渲染函數(shù)，

export function setupComponent(
  instance: ComponentInternalInstance,
  isSSR = false
) {
  // ...
  const { props, children } = instance.vnode
  const isStateful = isStatefulComponent(instance)
  initProps(instance, props, isStateful, isSSR)
  initSlots(instance, children)

  const setupResult = isStateful
    ? setupStatefulComponent(instance, isSSR)
    : undefined

  isSSR && setInSSRSetupState(false)
  return setupResult
}

當(dāng)初始化子組件時，因為在父組件傳入了props,{ value: innerNumber.value }，注意這是一個數(shù)字，而不是一個ref，所以在initProps中，會把父組件傳遞的props轉(zhuǎn)換成一個shallowReactive響應(yīng)式的數(shù)據(jù)，注意用戶在子組件里面不應(yīng)該修改props，并且修改props攔截操作就在上文提到的setupStatefulComponent中實現(xiàn)(instance.proxy = markRaw(new Proxy(instance.ctx, PublicInstanceProxyHandlers)))

export function initProps(
  instance: ComponentInternalInstance,
  rawProps: Data | null,
  isStateful: number, // result of bitwise flag comparison
  isSSR = false
) {
  const props: Data = {}
  if (isStateful) {
    // stateful
    // 為什么要是用shallowReactive包裹props？，下文會進行解釋
    instance.props = isSSR ? props : shallowReactive(props)
  }
}

接下來對渲染函數(shù)使用setupRenderEffect進行依賴收集，并且進行渲染

expect(innerStr).toBe(
  `<div id="test-id" class="test-class"><span>number 1</span></div>`
)

更新流程

當(dāng)修改了number.value = 3，由于依賴收集首先會重新執(zhí)行App組件的render，然后在進行patch，當(dāng)patch到子組件時，由于props發(fā)生了變化，則子組件實例會重新更新副作用函數(shù)

const updateComponent = (n1: VNode, n2: VNode, optimized: boolean) => {
  const instance = (n2.component = n1.component)!
  if (shouldUpdateComponent(n1, n2, optimized)) {
    ...
    // 由于props發(fā)生了變化，則子組件實例會重新更新副作用函數(shù)
    instance.effect.dirty = true
    instance.update()
  }
  ...
}

當(dāng)重新執(zhí)行子組件更新時，就會更新Props和Slots，并重新執(zhí)行子組件render獲取最新的vnode，并執(zhí)行patch更新操作，然后子組件就更新完成了

// 子組件的更新 instance.update()
const componentUpdateFn = ()=>{
  ...
  updateComponentPreRender(instance, next, optimized)
  ...
  // 更新完成重新得到子組件的vnode，即會重新執(zhí)行子組件的render
  const nextTree = renderComponentRoot(instance)
  // 執(zhí)行patch更新操作
  patch(
    prevTree,
    nextTree,
    // parent may have changed if it's in a teleport
    hostParentNode(prevTree.el!)!,
    // anchor may have changed if it's in a fragment
    getNextHostNode(prevTree),
    instance,
    parentSuspense,
    namespace,
  )
}

const updateComponentPreRender = (
  instance: ComponentInternalInstance,
  nextVNode: VNode,
  optimized: boolean
) => {
  ...
  // 更新props
  updateProps(instance, nextVNode.props, prevProps, optimized)
  updateSlots(instance, nextVNode.children, optimized)
  ...
}

至于為什么要用shallowReactive包裹props

因為除了渲染函數(shù)，其他副作用也會使用props，如computed等，如果props不使用響應(yīng)式對象，那么只有渲染函數(shù)會重新執(zhí)行，其他的副作用函數(shù)，就不會重新執(zhí)行了，這是一個很嚴(yán)重的bug，所以props必須是響應(yīng)式對象，并且也只能是淺的，因為子組件只關(guān)心props.x變化了，不關(guān)心props.x.a變化了，但是有些情況下，會有如下這種代碼，直接傳遞一個對象，這種其實props.value并沒有更新，相當(dāng)于innerNumber 又依賴收集了子組件的渲染函數(shù)，并且官方文檔不推薦這種寫法

test('basic component', async () => {
  const App = {
    setup() {
      const innerNumber = reactive({ data: 1 })
      return () => {
        console.log('app render')
        return h('div', { id: 'test-id', class: 'test-class' }, [
          h(Comp, { value: innerNumber }),
        ])
      }
    },
  }
  const Comp = {
    props: ['value'],
    setup(props: any) {
      onMounted(async () => {
        props.value.data = 3
        await nextTick()
        innerStr = serializeInner(root)
        expect(innerStr).toBe(
          `<div id="test-id" class="test-class"><span>number 3</span></div>`
        )
      })
      return () => {
        console.log('son render')
        return h('span', null, 'number ' + props.value.data)
      }
    },
  }

  const root = nodeOps.createElement('div')
  render(h(App, null), root)
  let innerStr = serializeInner(root)
  expect(innerStr).toBe(
    `<div id="test-id" class="test-class"><span>number 1</span></div>`
  )
})

以上就是vue3組件的掛載更新流程詳解的詳細(xì)內(nèi)容，更多關(guān)于vue3組件更新流程的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: