Angular Ivy 作为 Angular 的最新渲染引擎，与我们看到的当今所有主流框架的引擎有根本的不同，因为 Angular Ivy 使用了 Incremental DOM（增量 DOM）。

# 什么是 Incremental DOM？它与 Virtual DOM 有何不同？

让我们对它们做下比较，看看为什么 Angular 要使用 Incremental DOM。

# Virtual DOM 的工作原理

React 是第一个使用 Virtual DOM 的主流框架，它的设计思想是：

每个组件在每次渲染是创建一个新的 Virtual DOM，React 把新的 Virtual DOM 树与现有的进行比较，找到变更的 DOM 节点进行局部更新。

# Virtual DOM 有两个主要优点

我们可以使用任何语言去实现组件渲染，所以我们不需要重新编译任何东西。React 开发者主要使用 JSX，但我们使用原生的 JavaScript 一样可以做到；
作为渲染组件的结果，我们得到一个值，它可以用来测试、debugger 等。

# Incremental DOM

Incremental DOM 被 Google 内部使用，它的主要设计思想为：

每个组件都被编译成一系列指令，这些指令创建 DOM 树并在数据更改时就地更新它们。

例如下面一个组件：

@Component({
  selector: 'todos-cmp',
  template: `
    <div *ngFor="let t of todos|async">
        {{t.description}}
    </div>
  `
})
class TodosComponent {
  todos: Observable<Todo[]> = this.store.pipe(select('todos'));
  constructor(private store: Store<AppState>) {}
}

会被编译成：

var TodosComponent = /** @class */ (function () {
  function TodosComponent(store) {
    this.store = store;
    this.todos = this.store.pipe(select('todos'));
  }

  TodosComponent.ngComponentDef = defineComponent({
    type: TodosComponent,
    selectors: [["todos-cmp"]],
    factory: function TodosComponent_Factory(t) {
      return new (t || TodosComponent)(directiveInject(Store));
    },
    consts: 2,
    vars: 3,
    template: function TodosComponent_Template(rf, ctx) {
      if (rf & 1) { // create dom
        pipe(1, "async");
        template(0, TodosComponent_div_Template_0, 2, 1, null, _c0);
      } if (rf & 2) { // update dom
        elementProperty(0, "ngForOf", bind(pipeBind1(1, 1, ctx.todos)));
      }
    },
    encapsulation: 2
  });

  return TodosComponent;
}());