面试题-angular
angular数据绑定原理
- 从数据源到视图-- 插值/属性绑定
- 从视图到数据源--事件绑定
- 双向，从视图到数据源再到视图
angular的数据绑定有单向绑定和双向绑定
单向绑定包括属性绑定，差值绑定，事件绑定
双向绑定将属性绑定与事件绑定结合在一起
属性绑定设置特定的元素属性，事件绑定侦听元素更改事件
双向绑定使视图与数据模型同步修改
数据绑定处理的是dom元素property属性和元素事件
angular拓展了html也就是模板，可以使用angular的诸多语法。
当组件类的属性发生更改(数据模型更改)，angular会自动更新已渲染的dom。这部分操作dom的工作由框架负责。
当用户操作触发事件，如按键，鼠标事件(视图更改)，angular为目标事件配置事件处理函数，将事件对象$event传给处理事件的方法，通过这个事件对象更改组件类的属性
这样就完成了视图与数据模型的同步修改
例如：
双向绑定也为应用中的组件提供了一种共享数据的方式。
使用双向绑定绑定来侦听事件并在父组件和子组件之间同步更新值。
在子组件中设置输入@input输出@output，当子组件数据发生更改时，通过eventemitter发送出去。使用双向绑定的话，值就同步更新了，就不需要再写事件绑定去接受子组件传过来的值了
表单元素使用angular formModule提供的ngModel轻松实现双向绑定
视图与数据模型同步修改--编写数据绑定时，你只是在处理 DOM Property 和目标对象的事件
<input [value]="name" (input)="name = $event.target.value" />
- 该代码绑定到 <input> 元素的 input 事件，该事件允许代码监听这些更改。
- 当用户做出更改时，该组件会引发 input 事件。
- 这个绑定会在一个上下文中执行该语句，此上下文中包含 DOM 事件对象 $event。
- Angular 会通过调用input 事件来获取更改后的文本，并用它更新 name 属性
单向绑定
属性（property）绑定：在单一方向上将值从组件的属性送到目标元素的属性。
<img [src]="itemImageUrl"> Property 绑定 (src是property）
<tr><td [colSpan]="1 + 1">Three-Four</td></tr> Property 绑定(推荐)
<tr><td [attr.colspan]="1 + 1">One-Two</td></tr>
<button [attr.aria-label]="actionName">{{actionName}} with Aria</button> Attribute 绑定（没有可绑定的元素 Property时，如ARIA和SVG）
插值和 Property 绑定只能设置 Property，不能设置 Attribute
插值绑定：将在相应的组件模板中显示变量的值。
通过插值，你可以动态更改应用视图中显示的内容，使用双花括号{{}}作为定界符
<h3>Currentcustomer:{{currentCustomer}}</h3>
事件绑定：用户操作触发ＤＯＭ事件，可以侦听并响应用户操作，例如按键、鼠标移动、点击和触摸
<button(click)="onSave()">Save</button>
在事件绑定中，Angular 会为目标事件配置事件处理函数。
当组件或指令引发事件时，处理程序就会执行模板语句。模板语句会执行一个动作来响应这个事件。
处理事件的常见方法之一是把事件对象 $event 传给处理该事件的方法。$event 对象通常包含该方法所需的信息
双向绑定（属性绑定+事件绑定）
双向绑定为应用中的组件提供了一种共享数据的方式。
使用双向绑定绑定来侦听事件并在父组件和子组件之间同步更新值。
Angular的双向绑定语法是方括号和圆括号的组合，[]进行属性绑定，()进行事件绑定
forRoot()方法是什么？
angular服务
angular变更检测
为什么需要变更检测？
在还是 jQuery 的时代，当在 js 中改变了某个变量的数据，而这个变量是需要在 Html 中显示出来的。
我们的做法是通过 DOM 先获取到显示该变量的视图元素，然后借助 DOM API 来更新这个视图元素，这是原始的方式。
三大框架最终其实也都还是要通过操纵 DOM API 来更新视图元素
与原始方式的区别就是，这部分操纵 DOM 的工作，由框架来负责
实现的关键点就在于，如何知道，我们对数据进行了更新？---就需要变更检测了
更改任何模型时, Angular会检测到更改并立即更新视图。这是Angular中的更改检测。该机制的目的是确保基础视图始终与其对应的模型保持同步。
怎么实现？
angular的变更检测机制是由zone.js 来实现的，Angular 使用NgZone获取变化的通知，然后进行全面的变化检测，进而更新Dom
- Events：click，mouseover，mouseout，keyup，keydown 等所有的浏览器事件
- Timer：setTimeout，setInterval
- XHR：异步请求
angular实现了2个变更检测策略
ChangeDetectionStrategy.Default)，父组件的变更检测发生时，子组件也会触发变更检测。脏检查的过程
Angular的数据流是自顶而下，从父组件到子组件单项流动，单项数据流保证了高效可预测的变化检测。尽管检查了父组件之后，子组件可能会改变父组件的数据使得父组件需要再次被检查，这是不被推荐的数据处理方式。在开发模式下Angular会进行二次检查，如果出现上述情况，二次检查就会报错：Expression Changed After It Has Been Checked Error。而在生产环境中，脏检查只会执行一次。
检测顺序 Detection Sequence
更新所有子组件的绑定属性
调用所有子组件的 OnChanges，OnInit，DoCheck，AfterContentInit 生命周期钩子
更新当前组件的 DOM
子组件触发变更检测
调用所有子组件的的 AfterViewInit 的生命周期钩子
Angular 性能优化
知名的 Angular 开源组件库 ng-zorro 就使用了大量的 OnPush 策略
angular与react对比
框架与库
React 是一个用于构建用户界面的 JavaScript 库
React不是一个真正的框架，它是一个库。依赖第三方库
比如 客户端-服务器通信 要使用其他库Axios ,是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。
比如 react-redus-状态管理
Angular 是一个应用设计框架与开发平台，用于创建高效、复杂、精致的单页面应用。
-
一个基于 TypeScript 的框架，
-
一组完美集成的库，涵盖各种功能，包括路由、表单管理、客户端-服务器通信，rxjs等
-
一套开发工具，可帮助你开发、构建、测试和更新代码
基于组件的体系结构：使用这两种工具的可重用和可维护组件
这两个框架都有基于组件的体系结构，比其他体系结构更容易维护
TypeScript与JavaScript和JSX的比较
Angular使用TypeScript语言。适合大型项目的。有类型检查
React使用JavaScriptES6+和JSX脚本。（需要设置一下才能使用ts）
JSX（增强的html)是JavaScript的语法扩展，用于简化UI编码，使JavaScript代码看起来像HTML。
DOM：真实与虚拟
React使用虚拟DOM，而Angular操作真实DOM，并使用更改检测来查找哪些组件需要更新。
单向数据流与双向数据绑定
angular使用双向数据绑定，视图与数据模型是同步更改的（andular变更检测）
react是单项数据流，从父组件流向子组件，使用虚拟dom （react更新视图的思想是：只要state变化就重新渲染视图）
