快捷導(dǎo)航

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

更新時(shí)間：2024年02月07日 08:32:56 作者：總之就是非常可愛

這篇文章主要介紹了vue3組件的掛載更新流程，文中通過代碼示例給大家介紹的非常詳細(xì)，對(duì)大家的學(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ǎn)調(diào)試的過程中，發(fā)現(xiàn)首先會(huì)進(jìn)行掛載組件mountComponent，因?yàn)檫@是第一次渲染，在進(jìn)入setupComponent函數(shù)，用于處理props和slots和一些初始化工作，比如當(dāng)setup函數(shù)的返回值是一個(gè)對(duì)象的時(shí)候，代理setup的返回值(proxyRefs(setupResult))，但是當(dāng)前的測(cè)試用例并不會(huì)走這一步，因?yàn)楫?dāng)前返回的是一個(gè)渲染函數(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)初始化子組件時(shí)，因?yàn)樵诟附M件傳入了props,{ value: innerNumber.value }，注意這是一個(gè)數(shù)字，而不是一個(gè)ref，所以在initProps中，會(huì)把父組件傳遞的props轉(zhuǎn)換成一個(gè)shallowReactive響應(yīng)式的數(shù)據(jù)，注意用戶在子組件里面不應(yīng)該修改props，并且修改props攔截操作就在上文提到的setupStatefulComponent中實(shí)現(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？，下文會(huì)進(jìn)行解釋
    instance.props = isSSR ? props : shallowReactive(props)
  }
}

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

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

更新流程

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

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

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

// 子組件的更新 instance.update()
const componentUpdateFn = ()=>{
  ...
  updateComponentPreRender(instance, next, optimized)
  ...
  // 更新完成重新得到子組件的vnode，即會(huì)重新執(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

因?yàn)槌虽秩竞瘮?shù)，其他副作用也會(huì)使用props，如computed等，如果props不使用響應(yīng)式對(duì)象，那么只有渲染函數(shù)會(huì)重新執(zhí)行，其他的副作用函數(shù)，就不會(huì)重新執(zhí)行了，這是一個(gè)很嚴(yán)重的bug，所以props必須是響應(yīng)式對(duì)象，并且也只能是淺的，因?yàn)?code>子組件只關(guān)心props.x變化了，不關(guān)心props.x.a變化了，但是有些情況下，會(huì)有如下這種代碼，直接傳遞一個(gè)對(duì)象，這種其實(shí)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組件更新流程的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: