Angular 是一款流行的前端框架，相较于其他框架，Angular 有着比较好的性能表现。其中，数据绑定是 Angular 最重要的特性之一，也是开发者最常使用的功能之一。本文将详细介绍 Angular 中如何实现高性能的数据绑定，对于想要深入学习 Angular 数据绑定的开发者有着较大的指导意义。
Angular 数据绑定原理
Angular 中的数据绑定是通过 Zone.js 库的 Zone 类实现的。每一个 Angular 应用都会绑定一个根 Zone，而每一个子组件会绑定到它的父组件的 Zone 上。每个 Zone 都有一个虚拟的任务队列，每个任务都是一个任务函数，这些任务函数会在 Zone 自动监听的事件（比如浏览器事件、定时器事件、 XMLHttpRequest 事件等）触发后执行。
在 Angular 数据绑定中，每当绑定的数据发生变化时，Angular 会把这个变化封装成一个任务函数，并放入当前组件所在的 Zone 中。当 Angular 开始运行变化检测时，它会依次执行 Zone 中的任务队列，将其中的任务函数执行完毕，从而更新用户界面上绑定的数据。
如何实现高性能的数据绑定
使用 ChangeDetectionStrategy.OnPush
Angular 提供了多种变化检测策略，其中，在组件上添加 changeDetection: ChangeDetectionStrategy.OnPush 可以有效优化数据绑定性能。ChangeDetectionStrategy.OnPush 策略会将组件的变化检测与某个输入属性（可能是一个复杂对象）的引用对比，只有当该引用发生变化时才会触发变化检测。当没有引用变化时，绑定的 DOM 元素不会重新渲染，从而提高了性能。
示例代码如下：
-- -------------------- ---- -------
------ - ---------- ----------------------- - ---- ----------------
------------
--------- --------------------
--------- -
------------------------
------- ------------------------------------
--
---------------- ------------------------------ -- -- ------ ------
--
------ ----- ---------------- -
---- - - ----- ---- --
------------ -
-------------- - ----- -- -----------------
-
-不要在模板中使用函数和复杂表达式
在 Angular 的模板中使用函数和复杂表达式会引起多次的执行，降低性能。因此在模板中，尽量避免使用函数和复杂表达式，特别是带有循环的表达式。如果需要在模板中处理某些逻辑，可以在组件中编写对应的方法，然后在模板中绑定该方法。
示例代码如下：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- --------------------
--------- -
---- ----------- ---- -- --------------------------------------
-
--
------ ----- ---------------- -
----- - -
- ----- --- ------ --
- ----- --- ------ --
- ----- --- ------ -
--
---------------- ----- -
------ ---------------------------------------- - ----------------------
-
-使用 OnPush + Immutable
在 ChangeDetectionStrategy.OnPush 变化检测策略下，当修改的是对象的属性时，即使对象引用不变，Angular 也会重新渲染绑定的 DOM 元素。这是因为 Angular 会通过比较对象引用和对象属性的值来判断是否需要重新渲染。为了解决这个问题，可以使用 Immutable.js 库来创建不可变对象。
示例代码如下：
-- -------------------- ---- -------
------ - ---------- ----------------------- - ---- ----------------
------ - ---- - ---- ------------
------------
--------- --------------------
--------- -
---- ----------- ---- -- ---------------------------------
------- -------------------------------------
--
---------------- ------------------------------
--
------ ----- ---------------- -
----- - ------- ----- ---- -- - ----- ---- -- - ----- ---- ----
------------- -
----- ----- - ------------------------ - ---
----- -------- - --------------------- - ----- ---- --- -- -- --- -------------
---------- - ---------
-
-总结
本文介绍了 Angular 数据绑定原理及如何优化 Angular 数据绑定性能，在实际开发中可结合具体场景进行应用。在使用 OnPush 变化检测策略时，需要注意对象引用的变化，可以使用 Immutable.js 库来创建不可变对象。避免在模板中使用函数和复杂表达式，可以有效提高性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649d67c248841e9894a2b7e6