【问题标题】:How does AngularJS "listen" to changes in the model? [duplicate]AngularJS 如何“监听”模型的变化? [复制]
【发布时间】:2016-04-03 18:27:29
【问题描述】:

标题几乎是不言自明的。我想知道 AngularJS 如何“知道”模型中的某些内容发生了变化以更新视图。

为了实现这一目标,它正在做什么。不影响整体性能吗?

【问题讨论】:

标签: javascript html angularjs mvvm


【解决方案1】:

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 部分详细介绍了此过程。 请向下滚动到“范围生命周期”部分。

【讨论】:

    【解决方案2】:

    William Moss 去年就 Angular 的 $watch 流程及其对性能的影响发表了精彩的演讲。强烈推荐!看这里的谈话:https://www.youtube.com/watch?v=wbcJfg-d5nI

    【讨论】:

      猜你喜欢
      • 2012-08-21
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2023-03-20
      • 1970-01-01
      • 2021-09-21
      相关资源
      最近更新 更多