Angular表单的演进与最佳实践 on 雪狼的书斋

1.Angular表单“变形记”：从“模板驱动”到“响应式”的华丽转身！

Mon, 01 Jan 0001 00:00:00 +0000

嘿，朋友们！我是「雪狼」，一个在前端江湖摸爬滚打多年的老兵。今天，我想和大家聊聊 Angular 表单的「变形记」。在前端开发这场「造物」之旅中，表单（Form）无疑是我们与用户进行信息「握手」的最核心、最频繁的场景。为了能让我们优雅地处理这每一次「握手」，Angular 为我们提供了两套风格迥异、各有所长的「武功秘籍」：模板驱动表单 (Template-driven Forms) 和 响应式表单 (Reactive Forms)。

这两者，并非简单的「新旧」之别，而是一场关于「控制权」和「思想」的「变形记」。理解这场「变形」的意义，是精通 Angular 表单开发的第一步。

模板驱动表单：「所见即所得」的快餐哲学#

想象一下，你要组装一台最基础的「代步车」。最快的方式，是直接买一个现成的底盘，然后在上面加装方向盘、座椅等少数几个零件。

模板驱动表单，就是这种「快餐哲学」的体现。它的核心思想是： 「真理之源」在模板（HTML）中。

你通过在模板中添加 ngModel、ngForm 等指令，以一种声明式的方式，告诉 Angular：「嘿，这里有一个输入框，你帮我管起来。」 Angular 会在背后「发现」这些指令，并为你自动创建好表单控件的实例。

快餐店点餐（代码示例）：

<form #loginForm="ngForm" (ngSubmit)="login(loginForm.value)">
  <input name="username" [(ngModel)]="model.username" required>
  <input name="password" [(ngModel)]="model.password" type="password" required>
  <button type="submit" [disabled]="loginForm.invalid">登录</button>
</form>

// component.ts
export class LoginComponent {
  model = { username: '', password: '' };
  login(formValue: any) {
    console.log(formValue);
  }
}

优点：

对于非常简单的表单（如登录、订阅），代码非常简洁，几乎都在 HTML 中完成。
上手快，心智负担小，真正做到了「所见即所得」。

缺点：

当表单逻辑变复杂时（如动态增删、跨字段校验），模板会变得臃肿不堪，逻辑分散，难以维护。
由于表单模型是 Angular 在背后隐式创建的，进行单元测试变得非常困难。

响应式表单：「运筹帷幄」的工程师艺术#

现在，你不再满足于「代步车」，你想要打造一辆拥有复杂仪表盘、可随时改装引擎的「高性能赛车」。这时，你就需要「响应式」这套「工程师的艺术」了。

它的核心思想恰恰相反： 「真理之源」在组件类（TypeScript）中。

你不再依赖模板，而是在组件类中，通过 FormBuilder, FormGroup, FormControl 等「精密零件」，以编程的方式，主动、明确地构建出整个表单的数据模型和校验规则。模板，仅仅是这个强大模型的「可视化界面」。

赛车改装间（代码示例）：

// component.ts
export class LoginComponent {
  private fb = inject(FormBuilder);
  loginForm = this.fb.group({
    username: ['', [Validators.required, Validators.minLength(3)]],
    password: ['', Validators.required],
  });
  login() {
    console.log(this.loginForm.value);
  }
}

<form [formGroup]="loginForm" (ngSubmit)="login()">
  <input formControlName="username">
  <input formControlName="password" type="password">
  <button type="submit" [disabled]="loginForm.invalid">登录</button>
</form>

优点：

2.Reactive Forms：Angular中“掌控一切”的表单艺术

Mon, 01 Jan 0001 00:00:00 +0000

如果说模板驱动表单是一位随性的「街头艺人」，能快速地为你画出一幅生动的「简笔画」；那么，响应式表单（Reactive Forms）就是一位严谨的「古典主义画家」，他手握精密的工具，在画室中运筹帷幄，最终创作出一幅结构复杂、层次丰富、光影分明的「油画巨作」。

模板驱动追求的是「便捷」，而响应式表单追求的，是「掌控」。这是一种将用户输入这一最不可预测的「混沌」，完全纳入你代码掌控之下的艺术。

「三位一体」：响应式表单的「原子」构造#

要理解响应式表单，首先要认识构成它的三个「基本粒子」：

FormControl：「原子」

它代表一个单独的、最基础的输入单元，比如一个 input、一个 textarea 或一个 select。它独自追踪着自己的值（value）、校验状态（valid/invalid）以及用户交互状态（touched/dirty）。
FormGroup：「分子」

它是一个「容器」，将多个 FormControl 或其他 FormGroup 组织在一起，形成一个有结构的数据对象。一个注册表单，就是一个包含了 username, password, email 等多个 FormControl 的 FormGroup。它会自动聚合其所有子控件的值和状态。
FormArray：「链条」

它是一个「动态数组」，用于管理一个长度可变的控件列表。当你需要用户「添加另一个…」时（比如添加多项技能、多个收货地址），FormArray 就是你的不二之选。

`FormBuilder`：艺术家的「调色盘」#

虽然你可以通过 new FormGroup({ ... }) 的方式来手动创建表单模型，但 Angular 提供了一个更便捷的「艺术家调色盘」 —— FormBuilder 服务。它能让你用更简洁的语法来「调制」你的表单。

未使用 FormBuilder:

loginForm = new FormGroup({
  username: new FormControl(''),
  address: new FormGroup({
    street: new FormControl(''),
    city: new FormControl('')
  })
});

使用 FormBuilder:

import { inject, FormBuilder, Validators } from '@angular/forms';
// ...
private fb = inject(FormBuilder);
loginForm = this.fb.group({
  // 数组语法：[默认值, 同步校验器, 异步校验器]
  username: ['', Validators.required],
  address: this.fb.group({
    street: [''],
    city: ['']
  })
});

「第六感」：通过 `valueChanges` 和 `statusChanges` 响应变化#

这才是「响应式」三个字的精髓所在。每一个表单控件（FormControl, FormGroup, FormArray），都自带两个强大的 Observable 属性，让你能像拥有「第六感」一样，实时感知表单的任何风吹草动。

3.Template-driven Forms：Angular中“所见即所得”的表单哲学

Mon, 01 Jan 0001 00:00:00 +0000

在上一篇，我们领略了响应式表单那「掌控一切」的工程师艺术。它精密、强大、可测试，是打造「高性能赛车」的不二之选。但，我们是否每次出行，都需要一辆 F1赛车呢？

有时候，你只是想去街角的便利店买瓶酱油。此时，一辆轻便、灵活的「小摩托」，或许比那台需要预热、操作复杂的赛车，来得更惬意、更高效。

模板驱动表单（Template-driven Forms），就是 Angular 为我们准备的这辆「小摩托」。它不追求极致的控制，而是信奉一种简单、直观的「所见即所得」（WYSIWYG）哲学。

哲学的核心：「真理」在模板#

与响应式表单截然相反，模板驱动表单的「真理之源」，存在于 HTML 模板之中。

你无需在组件类中去构建任何 FormGroup 或 FormControl。你只需像写普通 HTML 一样，在模板中放置你的表单元素，然后通过添加一些特殊的「魔法指令」，Angular 就会在幕后，默默地为你「发现」并构建起一整套表单模型。

「魔法」的来源：`ngForm`, `ngModel` 与 `[(ngModel)]`#

这套魔法，由几位关键的「魔术师」（指令）共同完成。

ngForm：当你将这个指令应用在一个 <form> 标签上时，它会自动地、隐式地为你创建一个 FormGroup 实例来包裹整个表单。你可以通过一个模板引用变量（如 #myForm="ngForm"）来获取这个实例的引用，从而在模板中访问表单的整体状态（如 myForm.valid, myForm.value）。
ngModel：当你在一个带有 name 属性的表单元素（如 <input>）上使用 ngModel 指令时，它会自动为这个元素创建一个 FormControl 实例，并将其注册到父级的 ngForm 所创建的 FormGroup 中。
[(ngModel)]：「香蕉套盒子」语法，这是双向绑定的精髓。它实际上是两个指令的语法糖：
- [ngModel]：属性绑定。将组件类中的属性值，单向地传递给表单元素。
- (ngModelChange)：事件绑定。当表单元素的值发生变化时，将新值发射出去，更新到组件类的属性上。
[(ngModel)] 将这两者合二为一，实现了视图与模型之间的自动同步。

「小摩托」实战：一个简单的订阅表单#

让我们用模板驱动的方式，来构建一个邮件订阅表单。

模板代码 (.html):

<form #signupForm="ngForm" (ngSubmit)="subscribe()">
  <h3>订阅我们的资讯！</h3>
  <input 
    type="email" 
    name="email" 
    placeholder="请输入您的邮箱"
    [(ngModel)]="emailAddress"
    #emailInput="ngModel"
    required
    email>
  @if (emailInput.invalid && (emailInput.dirty || emailInput.touched)) {
    <div class="error-feedback">
      @if (emailInput.errors?.['required']) {
        <span>邮箱不能为空。</span>
      }
      @if (emailInput.errors?.['email']) {
        <span>请输入一个有效的邮箱地址。</span>
      }
    </div>
  }
  <button type="submit" [disabled]="signupForm.invalid">订阅</button>
</form>

组件代码 (.ts):

4.表单验证：Angular中让你的数据“滴水不漏”的秘密武器

Mon, 01 Jan 0001 00:00:00 +0000

一个没有验证的表单，就像一座不设防的城池，任何人、任何「数据」都可以长驱直入。其结果，轻则让你的应用状态陷入混乱，重则导致脏数据入库，引发更深层次的灾难。

表单验证，就是你应用数据的「护城河」与「城墙」。它是你作为一名严谨的工程师，为保障数据质量、提升用户体验而必须掌握的「秘密武器」。幸运的是，Angular 为我们提供了 arsenal（一整套）强大而灵活的验证「兵器谱」。

两大阵营：不同的「练兵」方式#

在 Angular 中，应用验证规则的方式，根据你选择的表单类型而有所不同：

响应式表单：验证器是函数。你在组件的 TS 文件中，将这些函数直接传递给 FormControl 的构造器。逻辑与模型在代码中紧密结合。
模板驱动表单：验证器是指令。你将 required, minLength 等指令直接应用在模板的 HTML 元素上。逻辑体现在视图中。

虽然应用方式不同，但验证器本身的核心（无论是内置的还是自定义的）是可以通用的。

「兵器谱」之：内置验证器#

@angular/forms 中的 Validators 类，为我们提供了最常用的一批「制式兵器」，开箱即用。

Validators.required：必填项。
Validators.minLength(number)：最小长度。
Validators.maxLength(number)：最大长度。
Validators.pattern(regex)：必须匹配正则表达式。
Validators.email：必须是合法的邮件格式。
Validators.min(number)：最小值（用于数字）。
Validators.max(number)：最大值（用于数字）。

如何使用？

响应式表单中：

import { Validators } from '@angular/forms';
this.form = this.fb.group({
  // 将校验器函数数组作为第二个参数传入
  username: ['', [Validators.required, Validators.minLength(3)]],
  email: ['', [Validators.required, Validators.email]]
});

模板驱动表单中：

<input type="text" name="username" ngModel required minlength="3">
<input type="email" name="email" ngModel required email>

「锻造神兵」之一：自定义同步验证器#

当内置兵器不称手时，我们就需要自己「锻造」一柄。比如，我们需要一个不允许输入特殊字符的验证器。

规则：一个同步验证器，就是一个接收 AbstractControl 作为参数，并在验证失败时返回一个错误对象 ValidationErrors、验证成功时返回 null 的函数。

// no-special-chars.validator.ts
import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';
export function noSpecialCharsValidator(): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    const hasSpecialChars = /[!@#$%^&*(),.?":{}|<>]/.test(control.value);
    // 如果包含特殊字符，返回一个错误对象，键名代表错误类型
    return hasSpecialChars ? { hasSpecialChars: true } : null;
  };
}

在响应式表单中使用：

5.动态表单：Angular中“千变万化”的表单魔法

Mon, 01 Jan 0001 00:00:00 +0000

你已经掌握了响应式表单的「基本功」，能用 FormGroup 和 FormControl 搭建出结构固定的表单。但如果，你的表单不是「固定」的呢？

如果用户需要自己「添加多个」联系电话？
如果整个表单的结构，需要根据从服务器拉取的一份 JSON 配置来动态生成？

此时，你就需要学习响应式表单的「禁咒」级魔法 —— 动态表单。这是一种「无中生有」、「千变万化」的至高艺术，能让你从容应对任何复杂的表单需求。

魔法咒语：`FormArray`, `addControl`, `removeControl`#

要施展动态表单的魔法，你需要先认识几句关键「咒语」：

FormArray：这是你的「魔法口袋」，一个可以容纳动态数量控件的特殊数组。它是实现「动态增删」的基础。
addControl() / removeControl()：在 FormGroup 上施放的「咒语」，允许你在运行时，向一个已存在的表单组中添加或移除一个控件。
push() / removeAt()：在 FormArray 上施放的「咒语」，用于在表单数组的末尾添加一个新控件，或移除指定位置的控件。

场景一：「多重影分身之术」 —— 动态增删 `FormArray`#

这是动态表单最常见的应用场景。让我们再次请出「简历技能」这个经典例子。

组件代码：

// resume.component.ts
export class ResumeComponent {
    private fb = inject(FormBuilder);
    resumeForm = this.fb.group({
        name: [''],
        // 1. 初始化一个空的 FormArray
        skills: this.fb.array([])
    });
    // 2. 为了方便在模板中使用，创建一个 getter
    get skills() {
        return this.resumeForm.get('skills') as FormArray;
    }
    // 3. 施法：添加一个新技能
    addSkill() {
        // push 一个新的 FormControl 到数组中
        this.skills.push(this.fb.control('', Validators.required));
    }
    // 4. 施法：移除一个技能
    removeSkill(index: number) {
        this.skills.removeAt(index);
    }
}

模板代码：

6.自定义表单控件：Angular中“独家定制”你的输入体验

Mon, 01 Jan 0001 00:00:00 +0000

我们已经习惯了使用 <input>, <select> 等标准的表单控件。但如果，你的产品经理提出了一个「天马行空」的需求呢？

「我想要一个可以拖拽打分的星级评分控件！」
「这里需要一个能拾取颜色的调色盘！」

这时，你会发现，Angular 的内置控件已经不够用了。你需要的，是创造一个属于你自己的、能与 Angular 表单体系（无论是模板驱动还是响应式）无缝协作的自定义表单控件。

实现这一「独家定制」魔法的「秘密契约」，就是 ControlValueAccessor。

「翻译官」的使命：`ControlValueAccessor` 是什么？#

ControlValueAccessor (简称 CVA) 是一个接口。任何一个组件，只要实现了这个接口，就等于在告诉 Angular：「嘿，我虽然外表特立独行，但我懂得你们表单世界的『官方语言』！你可以像对待普通 <input> 一样对待我。」

比喻一下：FormControl 是一个标准的「PS5游戏手柄」，而你的「星级评分组件」是一个你亲手打造的、独一無二的「高达模型」。ControlValueAccessor 就是那个「万能转换器」，它负责将手柄的通用信号（「设置值」、「禁用」），翻译成高达能听懂的指令；同时，当用户手动掰动高达的机械臂时（用户交互），它又负责将这个动作，翻译成手柄能理解的「值已改变」的信号，并报告回去。

「万能转换器」的四个接口#

要实现这个「转换器」，你需要实现 ControlValueAccessor 接口中最多四个关键方法。

writeValue(obj: any): void
- 方向：FormControl -> 你的组件
- 作用：当表单模型从外部被修改时（比如调用了 form.patchValue()），Angular 会调用此方法，并将新值 obj 传给你。你的任务，就是接收这个值，并用它来更新你组件的内部 UI。
- 翻译：「手柄说：目标值是 5。」
registerOnChange(fn: any): void
- 方向：你的组件 -> FormControl
- 作用：在初始化时，Angular 会传给你一个回调函数 fn（我们通常叫它 onChange）。你必须把它保存起来。当你的组件内部因为用户交互而导致值发生变化时，你必须调用这个保存好的 onChange(newValue) 函数，把新值报告给 FormControl。
- 翻译：「手柄说：这是我的『报告专线』，有情况随时打给我。」
registerOnTouched(fn: any): void
- 方向：你的组件 -> FormControl
- 作用：与 registerOnChange 类似，Angular 会传给你另一个回调函数 fn（我们通常叫它 onTouched）。你应该在你的组件被视为「已接触」（通常是在 blur 事件或首次交互后）时，调用一次这个 onTouched() 函数。

7.Angular表单的“痛点”与“疗法”：告别冗余，拥抱简洁

Mon, 01 Jan 0001 00:00:00 +0000

Angular 的响应式表单功能强大，它为我们提供了「掌控一切」的工具。但在实际开发中，你是否也曾感到一些「痛点」？

每个输入框都要写一大段重复的校验信息显示逻辑，模板显得臃肿不堪。
复杂的嵌套表单，访问深层控件需要写长长的 .get().get()...。
希望所有校验错误只在点击「提交」后才显示，而不是用户一离开输入框就立即跳出来。

这些「症状」让你的表单代码显得冗余、复杂，甚至让你觉得有点「不那么 Angular」。别担心，雪狼今天就化身你的「表单疗法师」，为你诊断这些痛点，并提供有效的「疗法」，帮助你的 Angular 表单告别冗余，拥抱简洁与优雅。

痛点一：重复的校验信息显示#

症状：你的模板中充斥着这样的代码，只为显示一个输入框的错误信息。

<!-- login.component.html -->
<input formControlName="username">
@if (form.get('username')?.invalid && (form.get('username')?.dirty || form.get('username')?.touched)) {
<div class="error-message">
    @if (form.get('username')?.errors?.['required']) {
    <span>用户名不能为空。</span>
    }
    @if (form.get('username')?.errors?.['minlength']) {
    <span>用户名至少需要{{ form.get('username')?.errors?.['minlength'].requiredLength }}个字符。</span>
    }
</div>
}

这段代码每重复一次，你的心中就多一份焦虑。

疗法：可复用的错误信息组件

将这部分逻辑封装成一个独立的、可复用的组件，是解决冗余的「特效药」。

// app-form-error.component.ts
import {Component, input, Input} from '@angular/core';
import {AbstractControl} from '@angular/forms';
import {CommonModule} from '@angular/common'; // 或者独立组件中直接用 @if
@Component({
    selector: 'app-form-error',
    standalone: true,
    imports: [CommonModule], // if using ngIf/ngFor
    template: `
    @if (control && control.invalid && (control.dirty || control.touched)) {
      <div class="error-message">
        @if (control.errors?.['required']) { <span>此项必填。</span> }
        @if (control.errors?.['email']) { <span>邮箱格式不正确。</span> }
        @if (control.errors?.['minlength']) { <span>至少需要{{ control.errors?.['minlength'].requiredLength }}个字符。</span> }
        <!-- 根据需要添加更多错误类型 -->
        @if (control.errors?.['customError']) { <span>{{ control.errors?.['customError'] }}</span> }
        <!-- 如果是异步校验的 pending 状态 -->
        @if (control.pending) { <span class="pending-message">正在验证...</span> }
      </div>
    }
  `,
    styles: [`...`]
})
export class AppFormErrorComponent {
    // 使用 signal input
    control = input.required<AbstractControl>();
}

现在，你的主表单模板变得无比清爽：

8.表单的“禅意”：Angular中构建用户友好的极致体验

Mon, 01 Jan 0001 00:00:00 +0000

我们已经深入探讨了 Angular 表单的「术」（如何构建、验证、动态化、定制化）。然而，技术的终极目的，并非仅仅是实现功能。对于用户体验至上的前端应用而言，表单的终极追求，是一种「禅意」：让用户在使用时感到「无感」，甚至「愉悦」。

好的表单，就像一阵清风，不着痕迹，却润物无声。用户完成操作后，甚至不会意识到自己刚刚填过一个表单。这才是表单设计的最高境界。

禅意一：清晰性 —— 「一目了然」#

痛点：模糊的标签，隐藏的必填项，令人费解的错误信息。用户需要猜测、思考，甚至放弃。

禅道：让表单的意图，像山间的清泉，一目了然。

标签与输入框：为每个输入框提供清晰、简洁的 <label>，并且永远不要用 placeholder 来替代 label。placeholder 应该作为提示信息而存在。
必填指示：明确标示必填项（如 * 号），让用户在输入前就有所预期。
错误反馈：
- 错误信息应显示在相关输入框附近，而不是在表单顶部。
- 错误信息应具体，告诉用户哪里错了，以及如何修正（如「密码至少需要8位，包含大小写字母和数字」）。
- 在用户输入时进行实时校验，并在用户「离开」输入框 (blur) 时显示错误，而不是等到用户点击提交后才全部爆发。

禅意二：高效性 —— 「大道至简」#

痛点：过多的字段，不必要的步骤，重复的输入。用户感到冗长、繁琐。

禅道：让用户以最少的思考、最少的操作，最快地完成任务。

极简原则：只询问真正必要的信息。每一个额外的字段，都是对用户耐心的一种挑战。
智能默认值：根据用户历史、地理位置等信息，预填充最可能的值，减少用户输入。
自动补全与建议：为地址、姓名等字段提供自动补全功能。
键盘友好：确保所有表单元素都可以通过 Tab 键轻松导航，Enter 键能够触发提交。
多步表单的进度指示：对于复杂的多步表单，清晰的进度条能有效缓解用户焦虑。

禅意三：韧性 —— 「容错之道」#

痛点：用户不小心犯错后，得到的是生硬的报错，甚至所有输入都被清空。

禅道：表单应该像一位宽厚的导师，引导用户改正错误，而不是惩罚他们。

非破坏性验证：在显示错误时，不要清除用户已输入的数据。
提供修正建议：当用户输入错误时，除了报错，更要告诉他们「怎么办」。
自动保存/草稿：对于冗长的表单，提供自动保存功能，防止用户意外丢失辛苦输入的内容。
撤销操作：如果可能，为某些操作提供撤销功能。
清晰的行动召唤：提交、取消等按钮的文案应清晰，位置明确，避免歧义。

禅意四：可访问性 (Accessibility) —— 「兼爱非攻」#

痛点：表单对残障用户不友好，屏幕阅读器无法正确朗读，键盘用户无法操作。

禅道：让你的表单，能够被所有人无障碍地使用。

语义化 HTML：使用正确的 HTML 标签（<label>, <input>, <button>），而不是滥用 div。Angular 的 FormControl 默认会为你添加许多必要的 ARIA 属性。
键盘导航：确保 Tab 键的焦点顺序逻辑正确。
屏幕阅读器优化：为自定义控件提供 aria-label, aria-describedby 等属性。

Angular表单的演进与最佳实践 on 雪狼的书斋

1.Angular表单“变形记”：从“模板驱动”到“响应式”的华丽转身！

模板驱动表单：「所见即所得」的快餐哲学#

响应式表单：「运筹帷幄」的工程师艺术#

2.Reactive Forms：Angular中“掌控一切”的表单艺术

「三位一体」：响应式表单的「原子」构造#

FormBuilder：艺术家的「调色盘」#

「第六感」：通过 valueChanges 和 statusChanges 响应变化#

3.Template-driven Forms：Angular中“所见即所得”的表单哲学

哲学的核心：「真理」在模板#

「魔法」的来源：ngForm, ngModel 与 [(ngModel)]#

「小摩托」实战：一个简单的订阅表单#

4.表单验证：Angular中让你的数据“滴水不漏”的秘密武器

两大阵营：不同的「练兵」方式#

「兵器谱」之：内置验证器#

「锻造神兵」之一：自定义同步验证器#

5.动态表单：Angular中“千变万化”的表单魔法

魔法咒语：FormArray, addControl, removeControl#

场景一：「多重影分身之术」 —— 动态增删 FormArray#

6.自定义表单控件：Angular中“独家定制”你的输入体验

「翻译官」的使命：ControlValueAccessor 是什么？#

「万能转换器」的四个接口#

7.Angular表单的“痛点”与“疗法”：告别冗余，拥抱简洁

痛点一：重复的校验信息显示#

8.表单的“禅意”：Angular中构建用户友好的极致体验

禅意一：清晰性 —— 「一目了然」#

禅意二：高效性 —— 「大道至简」#

禅意三：韧性 —— 「容错之道」#

禅意四：可访问性 (Accessibility) —— 「兼爱非攻」#

`FormBuilder`：艺术家的「调色盘」#

「第六感」：通过 `valueChanges` 和 `statusChanges` 响应变化#

「魔法」的来源：`ngForm`, `ngModel` 与 `[(ngModel)]`#

魔法咒语：`FormArray`, `addControl`, `removeControl`#

场景一：「多重影分身之术」 —— 动态增删 `FormArray`#

「翻译官」的使命：`ControlValueAccessor` 是什么？#