【发布时间】:2016-04-03 18:27:29
【问题描述】:
标题几乎是不言自明的。我想知道 AngularJS 如何“知道”模型中的某些内容发生了变化以更新视图。
为了实现这一目标,它正在做什么。不影响整体性能吗?
【问题讨论】:
标签: javascript html angularjs mvvm
标题几乎是不言自明的。我想知道 AngularJS 如何“知道”模型中的某些内容发生了变化以更新视图。
为了实现这一目标,它正在做什么。不影响整体性能吗?
【问题讨论】:
标签: javascript html angularjs mvvm
AngularJS 应用程序的生命周期分为三个阶段 每次在浏览器中加载网页时都会发生这种情况。下列 部分描述了 AngularJS 应用程序的这些阶段。
引导阶段
AngularJS 生命周期的第一个阶段是引导阶段, 当 AngularJS JavaScript 库下载到 浏览器。 AngularJS 初始化它自己的必要组件并 然后初始化 ng-app 指令指向的模块。 模块被加载,任何依赖都被注入到你的 模块并可供模块内的代码使用。
编译阶段
AngularJS 生命周期的第二阶段是 HTML 编译 阶段。最初加载网页时,DOM 的静态形式 在浏览器中加载。在编译阶段,静态 DOM 替换为代表 AngularJS 视图的动态 DOM。
这个阶段包括两个部分:遍历静态 DOM 和 收集所有指令,然后将指令链接到 AngularJS 内置库中的适当 JavaScript 功能 或自定义指令代码。这些指令与范围相结合 生成动态或实时视图。
运行时数据绑定阶段
AngularJS 应用程序的最后阶段是运行时阶段, 它一直存在,直到用户重新加载或离开网页。 此时,范围中的任何更改都会反映在视图中,并且 视图中的任何更改都会直接在范围内更新,从而使 限定视图的单一数据源。
AngularJS 的行为不同于传统的绑定方法 数据。传统方法将模板与从接收的数据相结合 引擎,然后在每次数据更改时操作 DOM。 AngularJS 只编译一次 DOM,然后链接编译的 模板根据需要,使其比传统的更有效 方法。
无耻地从布拉德·戴利 (Brad Dayley) 的 Learning AngularJS 书中摘抄。
Angular 网站的Scope Life Cycle 部分详细介绍了此过程。 请向下滚动到“范围生命周期”部分。
【讨论】:
William Moss 去年就 Angular 的 $watch 流程及其对性能的影响发表了精彩的演讲。强烈推荐!看这里的谈话:https://www.youtube.com/watch?v=wbcJfg-d5nI
【讨论】: