vue3组件的挂载更新流程详解

更新时间：2024年02月07日 08:32:56 作者：总之就是非常可爱

这篇文章主要介绍了vue3组件的挂载更新流程，文中通过代码示例给大家介绍的非常详细，对大家的学习或工作有一定的帮助,需要的朋友可以参考下

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>`
  )
})

挂载流程

在断点调试的过程中，发现首先会进行挂载组件mountComponent，因为这是第一次渲染，在进入setupComponent函数，用于处理props和slots和一些初始化工作，比如当setup函数的返回值是一个对象的时候，代理setup的返回值(proxyRefs(setupResult))，但是当前的测试用例并不会走这一步，因为当前返回的是一个渲染函数，

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
}

当初始化子组件时，因为在父组件传入了props,{ value: innerNumber.value }，注意这是一个数字，而不是一个ref，所以在initProps中，会把父组件传递的props转换成一个shallowReactive响应式的数据，注意用户在子组件里面不应该修改props，并且修改props拦截操作就在上文提到的setupStatefulComponent中实现(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)
  }
}

接下来对渲染函数使用setupRenderEffect进行依赖收集，并且进行渲染

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

更新流程

当修改了number.value = 3，由于依赖收集首先会重新执行App组件的render，然后在进行patch，当patch到子组件时，由于props发生了变化，则子组件实例会重新更新副作用函数

const updateComponent = (n1: VNode, n2: VNode, optimized: boolean) => {
  const instance = (n2.component = n1.component)!
  if (shouldUpdateComponent(n1, n2, optimized)) {
    ...
    // 由于props发生了变化，则子组件实例会重新更新副作用函数
    instance.effect.dirty = true
    instance.update()
  }
  ...
}

当重新执行子组件更新时，就会更新Props和Slots，并重新执行子组件render获取最新的vnode，并执行patch更新操作，然后子组件就更新完成了

// 子组件的更新 instance.update()
const componentUpdateFn = ()=>{
  ...
  updateComponentPreRender(instance, next, optimized)
  ...
  // 更新完成重新得到子组件的vnode，即会重新执行子组件的render
  const nextTree = renderComponentRoot(instance)
  // 执行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

因为除了渲染函数，其他副作用也会使用props，如computed等，如果props不使用响应式对象，那么只有渲染函数会重新执行，其他的副作用函数，就不会重新执行了，这是一个很严重的bug，所以props必须是响应式对象，并且也只能是浅的，因为子组件只关心props.x变化了，不关心props.x.a变化了，但是有些情况下，会有如下这种代码，直接传递一个对象，这种其实props.value并没有更新，相当于innerNumber 又依赖收集了子组件的渲染函数，并且官方文档不推荐这种写法

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组件的挂载更新流程详解的详细内容，更多关于vue3组件更新流程的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

Vue实现读取本地图片的示例代码
这篇文章主要为大家详细介绍了如何利用Vue实现读取本地图片的功能，文中的示例代码讲解详细，具有一定的参考价值，需要的小伙伴可以学习一下
2023-07-07
Vue关闭当前弹窗页面的两种方式
这篇文章主要给大家介绍了关于Vue关闭当前弹窗页面的两种方式,这是最近项目中遇到的一个需求,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-07-07
Vue3+TypeScript报错:无法找到模块xx的声明文件问题
这篇文章主要介绍了Vue3+TypeScript报错:无法找到模块xx的声明文件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-11-11
vue 使用 sortable 实现 el-table 拖拽排序功能
这篇文章主要介绍了vue 使用 sortable 实现 el-table 拖拽排序功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-12-12
Vue-cli搭建spa项目的项目实践
本文主要介绍了Vue-cli搭建spa项目的项目实践,首先,你需要安装Vue CLI,然后通过它创建新项目,接着,选择和配置适当的插件和依赖项,以完善你的SPA项目,感兴趣的可以了解一下
2023-09-09
在vue项目实现一个ctrl+f的搜索功能
刚刚接到领导通知，需要实现搜索功能，因为项目是vue的而且是手机端，对我来说有点小难度。经过小编的一番思索最终还是解决了，今天小编把实现过程分享到脚本之家平台，需要的朋友参考下
2020-02-02
JavaScript的MVVM库Vue.js入门学习笔记
这篇文章主要介绍了JavaScript的MVVM库Vue.js入门学习笔记,Vue.js是一个新兴的js库,主要用于实现响应的数据绑定和组合的视图组件,需要的朋友可以参考下
2016-05-05
Vue使用echarts可视化组件的方法
这篇文章主要介绍了Vue使用echarts可视化组件的方法,本文通过实例代码案例给大家详细介绍，需要的朋友可以参考下
2021-07-07
基于vue-cli3创建libs库的实现方法
这篇文章主要介绍了基于vue-cli3创建libs库的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-12-12
vue中防抖和节流的使用方法
防抖和节流是我们在开发过程中常用优化性能的方式,可以减少不必要的计算,不浪费资源,只在适合的时候再进行触发计算,这篇文章主要给大家介绍了关于vue中防抖和节流使用的相关资料,需要的朋友可以参考下
2021-08-08