Angular 脏值检测

Angular变更检测的周期

1. 开发人员更新数据模型，例如通过更新组件绑定
2. angular 检测变化
3. 变更检测从上到下检查组件树中的每个组件，以查看相应的模型是否已更改
4. 如果有新值，它将更新组件的视图（DOM）

我们分步骤来讲：

Angular使用Zone.js跟踪拦截异步任务。当发生任何用户事件，计时器，XHR，promise等， 回调会触发检测。

变更检测策略

Angular提供了两种策略来运行更改检测：

• Default（从上到下检查组件树中的每个组件）
• OnPush （当输入属性已更改/该组件或其子组件触发事件处理/通过异步管道链接到模板的可观察对象发出新值， 如 data | async/手动触发时触发检测。 当settimeout, setInterval, Promise.resolve().then(),this.http.get('..').subscribe()不会触发变更检测）

手动触发检测的方法

• ChangeDetectorRef的detectChanges() 通过牢记更改检测策略在此视图及其子级上运行更改检测。它可以与detach() 结合使用以实现本地更改检测检查。(说明： detach()停用变更检测)
• ApplicationRef.tick() 通过遵守组件的更改检测策略来触发整个应用程序的更改检测
• ChangeDetectorRef上的markForCheck() 不会触发更改检测，但会将所有OnPush祖先标记为要检查一次，作为当前或下一个更改检测周期的一部分。即使已标记的组件使用OnPush策略，它也将运行更改检测。

Vue 数据劫持

Vue 的响应式，是使用观察者模式实现的。Vue 会遍历 data 数据对象，使用 Object.defineProperty() 将每个属性都转换为 getter/setter。(Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因)
每个 Vue 组件实例都有一个 watcher 实例，在组件初次渲染（render）时，会记录组件用到了（调用 getter）哪些数据。当数据发生改变时，会触发 setter 方法，并通知所有依赖这个数据的 watcher 实例，然后 watcher 实例调用对应组件的 render 方法，生成一颗新的 vdom 树，Vue 会将新生成的 vdom 树与上一次生成的 vdom 树进行比较（diff），来决定具体要更新哪些 dom。

Vue.set(vm.someObject, 'b', 2)

Vue.set(vm.items, indexOfItem, newValue); // Vue.set, vm.$set


vm.items.splice(indexOfItem, 1, newValue); // splice

参考官网介绍 vuejs reactivity

React 虚拟DOM

React 的响应式，是使用 diff 算法实现的。React 在 state 或 props 改变时，会调用 render() 方法，生成一个虚拟 DOM 树，React 会将这棵树与上一次生成的树进行比较，找出其中的差异，并更新差异的部分。

这个过程是递归的，React 会以当前组件为根，递归比较所以子节点。为了优化性能，React 提供了 shouldComponentUpdate 生命周期方法，如果这个方法返回 false，React 就跳过这个组件，不做 VDOM 比较，也不更新组件。

在 React 的世界里，术语 “Virtual DOM” 通常与 React 元素关联在一起，因为它们都是代表了用户界面的对象。而 React 也使用一个名为 “fibers” 的内部对象来存放组件树的附加信息。上述二者也被认为是 React 中 “Virtual DOM” 实现的一部分。