组件的创建与挂载

帅帅在睡觉2026-01-03 11:20

#创建顺序（以el-form表单为例）

复制代码

// 你的模板
<el-form ref="formRef" :model="form" :rules="rules">
  <el-form-item label="用户名" prop="username">
    <el-input v-model="form.username" />
  </el-form-item>
  <el-form-item label="密码" prop="password">
    <el-input v-model="form.password" type="password" />
  </el-form-item>
</el-form>

// 对应的虚拟 DOM 树
{
  type: 'el-form',
  props: { model: form, rules: rules },
  children: [
    {
      type: 'el-form-item',
      props: { label: '用户名', prop: 'username' },
      children: [{ type: 'el-input', props: { modelValue: form.username } }]
    },
    {
      type: 'el-form-item', 
      props: { label: '密码', prop: 'password' },
      children: [{ type: 'el-input', props: { modelValue: form.password, type: 'password' } }]
    }
  ]
}

// 组件创建顺序（从父到子）：

created (form) → created (form-item) → created (input)

#挂载顺序

复制代码

一次性转换为真实DOM                                  
│    <form class="el-form"> (真实)                        
│    ├── <div class="el-form-item"> (真实)                
│    │   └── <div class="el-input"> (真实)                
│    └── <div class="el-form-item"> (真实)                
│        └── <div class="el-input"> (真实)

mounted (input) → mounted (form-item) → mounted (form)

// 注意：子组件先 mounted，父组件后 mounted