526互联

Angular 复习与进阶系列 – Change Detection

发布时间 2023-04-15 13:37:45作者: 兴杰

前言

Angular 是 MVVM 框架, MVVM 主张让我们不要直接操作 DOM, 应该把操作 DOM 的具体实现交给框架.

我们定义 model, view, 以及它们的 binding 关系就好. 每当 model changes 框架负责去操作 DOM.

 

Angular 中 Model, View, Render

在 Angular 中,

model / view model / state 就是组件对象,

view 就是组件 template html

model view 的关系就是 template binding syntax

render 被 Angular 封装了, 我们感知不到.

 

Detect Model Changes 的难题

在 JavaScript, 我们要想监听到 value change 是挺难的一件事.

let value = 'default value';

value.onChange(([oldValue, newValue]) => {
  console.log('value changed', [oldValue, newValue]); // ['default value', 'new value']
});

value = 'new value';