Angular React Vue 比较 – 指令篇之结构型指令

结构型指令是 Angular 指令的窄化，它主要负责 HTML 布局。它们塑造或重塑 DOM 的结构，通常是通过添加、移除和操纵它们所附着的宿主元素来实现的。。在Vue中并没有结构型指令这一说法，为了更好的做对比，我们按照Angular的说法来把Vue中的一部分内置指令也称之为结构型指令。

Angular

常用的指令	详情
NgIf	根据条件从模板中创建或销毁子视图。
NgFor	为列表中的每个条目重复一个节点。
NgSwitch	一组在备用视图之间切换的指令。

Angular常见的内置结构型指令

NgIf

通过将 NgIf 指令应用于宿主元素来添加或移除元素。

当 NgIf 为 false 时，Angular 会从 DOM 中移除元素及其后代。然后，Angular 会销毁它们的组件，从而释放内存和资源。

要添加或移除元素，请将 *ngIf 绑定到条件表达式，例如以下示例中的 isActive。src/app/app.component.htmlcheck

  <app-item-detail *ngIf="isActive" [item]="item"></app-item-detail>

当 isActive 表达式返回真值时，NgIf 会将 ItemDetailComponent 添加到 DOM 中。当表达式为假值时，NgIf 会从 DOM 中移除 ItemDetailComponent，并销毁该组件及其所有子组件。

NgFor

使用 NgFor 指令来呈现条目列表。它为集合中的每个条目渲染一个模板。该指令放在一个元素上，该元素将成为克隆模板的父元素。

ngForOf 指令通常在简写形式 *ngFor 中使用。在这种形式下，每次迭代要渲染的模板是包含该指令的锚元素的内容。

以下示例显示了带有某些选项的简写语法，包含在 <li> 元素中。

<li *ngFor="let item of items; index as i; trackBy: trackByFn">...</li>

简写形式会扩展为长形式，后者在 <ng-template> 元素上使用 ngForOf 选择器。 <ng-template> 元素的内容是包含简写形式指令的 <li> 元素。

这是简写形式示例的展开版本。

<ng-template ngFor let-item [ngForOf]="items" let-i="index" [ngForTrackBy]="trackByFn">  <li>...</li></ng-template>

Angular 在编译模板时会自动展开简写语法。每个嵌入式视图的上下文都根据其词法位置逻辑合并到当前组件上下文中。

当使用简写语法时，Angular 只允许一个结构型指令位于一个元素上。例如，如果要有条件地迭代，请将 *ngIf 放在包装 *ngFor 元素的容器元素上。

NgSwitch

就像 JavaScript 的 switch 语句一样，NgSwitch 根据 switch 条件从几个可能的元素中显示一个元素。 Angular 只将选定的元素放入 DOM 中。

NgSwitch 是一组三个指令：

`NgSwitch` 指令	详情
`NgSwitch`	一个属性型指令，用于更改其同伴指令的行为。
`NgSwitchCase`	当其绑定值等于 switch 值时，将元素添加到 DOM 的结构型指令；当其绑定值不等于 switch 值时，则移除其绑定值。
`NgSwitchDefault`	当没有选定的 `NgSwitchCase` 时，将其元素添加到 DOM 的结构型指令。

NgSwitch的三个指令

以下范例展示了如何使用多个 case 来显示同一个视图：

<container-element [ngSwitch]="switch_expression"> 
<!-- the same view can be shown in more than one case -->  
<some-element *ngSwitchCase="match_expression_1">...</some-element>  <some-element *ngSwitchCase="match_expression_2">...</some-element>  <some-other-element *ngSwitchCase="match_expression_3">...</some-other-element>  
<!--default case when there are no matches -->  
<some-element *ngSwitchDefault>...</some-element>
</container-element>

Vue

常用的指令	详情
v-if	基于表达式值的真假性，来条件性地渲染元素或者模板片段。
v-for	基于原始数据多次渲染元素或模板块。

Vue常见的内置结构型指令

v-if

当 v-if 元素被触发，元素及其所包含的指令/组件都会销毁和重构。如果初始条件是假，那么其内部的内容根本都不会被渲染。

可用于 <template> 表示仅包含文本或多个元素的条件块。

当条件改变时会触发过渡效果。

当同时使用时，v-if 比 v-for 优先级更高。我们并不推荐在一元素上同时使用这两个指令。

v-for

指令值必须使用特殊语法 alias in expression 为正在迭代的元素提供一个别名：

<div v-for="item in items">
  {{ item.text }}
</div>

或者，你也可以为索引指定别名 (如果用在对象，则是键值)：

<div v-for="(item, index) in items"></div>
<div v-for="(value, key) in object"></div>
<div v-for="(value, name, index) in object"></div>

v-for 的默认方式是尝试就地更新元素而不移动它们。要强制其重新排序元素，你需要用特殊 attribute key 来提供一个排序提示：

<div v-for="item in items" :key="item.id">
  {{ item.text }}
</div>

v-for 也可以用于 Iterable Protocol 的实现，包括原生 Map 和 Set。

React

React中并没有指令，在这里不再列出相关的实现方法。

小结

结构型指令仅是Angular指令的窄化，Vue与React并没有结构型指令这一概念。

本篇介绍的是Angular中的结构型指令，把Vue中的一部分内置指令称之为结构型指令是为了与Angular做比较，加深印象以便理解，React中并没有任何的指令。

文章参考链接：

比较编程网