Movechip
0%

vue3 原理分析之 vue3 组件挂载与更新过程

发表于 分类于 ，

vue3 组件挂载与更新过程

vue 版本：3.0.2

patch

patch 根据 vnode 的 type 与 shapeFlag 调用相应的 processXXX 方法，static、teleport、suspence 类型的除外。

上图使用组件挂载，所以调用了 processComponent 方法。

  • type 使用 Symbol 标识，有以下几种类型：
    • Symbol(Text)
    • Symbol(Comment)
    • Symbol(Static)，调用 mountStaticNode 方法
    • Symbol(Fragment)
  • shapeFlag 使用数字标识，有以下几种类型：
    • ELEMENT
    • COMPONENT
    • TELEPORT， 调用该类型组件的 process 方法
    • SUSPENSE， 调用该类型组件的 process 方法

processComponent

processComponent 的第一个、第二个参数为旧节点、新节点。
如果旧节点不存在，说明为首次挂载，则会调用 mountComponent 方法，否则调用 updateComponent 方法。

setup

setup 中是用户编写的一些状态逻辑，这里可以对数据进行响应式处理。