开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

数据更新后未调用Angular同级ngInit方法

是因为Angular的变更检测机制导致的。Angular使用了Zone.js来实现变更检测，它会监测组件中的属性变化，并在变化发生时自动触发相应的变更检测机制。

在Angular中，ngInit是一个生命周期钩子函数，它会在组件初始化时被调用一次。当数据更新后，Angular会自动检测到变化，并触发相应的变更检测机制，但不会再次调用ngInit方法。

如果你希望在数据更新后执行一些逻辑操作，可以考虑使用其他生命周期钩子函数，如ngOnChanges或ngDoCheck。ngOnChanges会在组件的输入属性发生变化时被调用，而ngDoCheck会在每次变更检测周期中被调用。

另外，如果你需要手动触发变更检测，可以使用ChangeDetectorRef服务的detectChanges方法。通过注入ChangeDetectorRef服务，并在数据更新后调用detectChanges方法，可以强制触发变更检测机制。

关于Angular的生命周期钩子函数和变更检测机制的更详细信息，你可以参考腾讯云的Angular开发文档：Angular开发文档

相关搜索:更新到Angular 12后未调用CanActivate Angular 9 chartJs在数据更新后未更新视图如何在angular 2中调用特定的同级方法 http请求后，Angular模板未更新 Angular 2: http服务更新后模板未更新 Angular *ngIf未使用组件方法更新未调用MatDialog的Angular方法afterClosed 更新数据后，Angular不更新视图调用api后，Angular CLI对象不更新对象项在从fetch调用内部更新后未更新 Angular2变量在更改后未更新 Angular 2在文件浏览后调用方法异步调用后，Angular UI未更新ngFor 处理http请求后未调用postHandle方法使用新数据调用Ajax控制器后，网页未更新颤动块:更新后未调用BlocBuilder，ListView仍显示旧数据更新状态后未重新呈现组件(调用mapStateToProps)更新RemoteViewsFactory后未调用AppWidget上的onDataSetChanged()更新@ UIViewControllerRepresentable.updateUIViewController后未调用SwiftUI状态导航后角度数据未更新

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

实战 | Change Detection And Batch Update

作者｜YanYang Yu 原文｜http://yuyang041060120.github.io/2016/09/22/change-detection-and-batch-update/ 前言在传统的WEB开发中，当与用户或服务器发生交互时，需要我们手动获取数据并更新DOM，这个过程是繁琐的、易错的。特别是当页面功能过于复杂时，我们既要关注数据的变化，又要维护DOM的更新，这样写出来的代码是很难维护的。新一代的框架或库，例如Angular、React、Vue等等让我们的关注点只在数据上，当数据更新

02

【Appetite】ionic3实录（七）次页实现及分析解决问题【下】

一般一些js插件，是依托dom的。我们观察initSwiper方法，第一个参数'.wheel .swiper-container'其实是个选择器，所以它也是依托dom操作的，此外，由于我们使用了数据绑定，this.vm.dessertSlides的值更新会影响到dom，所以应该在数据更新从而使得dom更新完成后再调用initSwiper方法。 angular的脏检测机制是基于一定条件和时间的，在给this.vm.dessertSlides赋值，dom还没更新完成就调用initSwiper方法不一定会获得想要结果的，所以在此之前调用手动检测方法this.cd.detectChanges()强制检测并刷新dom。

02

干货 | 前端模板引擎知多少

“ 前端框架日新月异，而其中的数据绑定已经作为一个框架最基础的功能。我们常常使用的单向绑定、双向绑定、事件绑定、样式绑定等，里面具体怎么实现，而当我们数据变动的时候又会触发怎样的底部流程呢？ ” 模板数据绑定数据绑定的过程其实不复杂： 1. 解析语法生成AST。 2. 根据AST结果生成DOM。 3. 将数据绑定更新至模板。解析语法生成AST 抽象语法树（Abstract Syntax Tree）也称为AST语法树，指的是源代码语法所对应的树状结构。也就是说，对于一种具体编程语言下的源代码，通过构

03

Change Detection And Batch Update

在传统的WEB开发中，当与用户或服务器发生交互时，需要我们手动获取数据并更新DOM，这个过程是繁琐的、易错的。特别是当页面功能过于复杂时，我们既要关注数据的变化，又要维护DOM的更新，这样写出来的代码是很难维护的。新一代的框架或库，例如Angular、React、Vue等等让我们的关注点只在数据上，当数据更新时，这些框架/库会帮我们更新DOM。那么这里就有两个很重要的问题了：当数据变化时，这些框架/库是如何感知到的？当我们连续更新数据时，这些框架/库如何避免连续更新DOM，而是进行批量更新？带着这两个问题，我将简要分析一下React、Angular1、Angular2及Vue的实现机制。

04

Change Detection And Batch Update

本文作者：IMWeb 吴浩麟原文出处：IMWeb社区未经同意，禁止转载前言在传统的WEB开发中，当与用户或服务器发生交互时，需要我们手动获取数据并更新DOM，这个过程是繁琐的、易错的

07

Angular（06）- 为什么数据变化，绑定的视图就会自动更新了？

这里提一点，前端三大框架（Angular，React，Vue）的数据驱动来更新视图的原理，即 MVVM 的实现。为什么数据发生变化，绑定的视图就会刷新了呢？

01

前端三大框架vue，angular，react大杂烩

摘要：从angular的诞生独步天下，到现在三大框架平分天下，基本形势已经趋于稳定。每一个框架从诞生到受欢迎，都有其特定的原因和背景。不同的开发者选择时，也是依据于其特定情景下的原因和背景。一、为什么前端会被vue,angular,react瓜分？不知道大家有没有发现，这三个框架除了都是前端框架之外，还大有搞基的成分存在。注意他们三个的名字，分别以v，a，r 开头，我这么一说，你是不是忽然间就想到了什么。哈哈，正是如此，将他们组合起来不就是javascript中无处不在的鬼东西么？var

06

前端三大框架vue，angular，react大杂烩

摘要：从angular的诞生独步天下，到现在三大框架平分天下，基本形势已经趋于稳定。每一个框架从诞生到受欢迎，都有其特定的原因和背景。不同的开发者选择时，也是依据于其特定情景下的原因和背景。一、为什么前端会被vue,angular,react瓜分？不知道大家有没有发现，这三个框架除了都是前端框架之外，还大有搞基的成分存在。注意他们三个的名字，分别以v，a，r 开头，我这么一说，你是不是忽然间就想到了什么。哈哈，正是如此，将他们组合起来不就是javascript中无处不在的鬼东西么？var

09

基于 qiankun 的微前端最佳实践（万字长文） - 从 0 到 1 篇

本文是基于 qiankun 的微前端最佳实践系列文章之从 0 到 1 篇，本文将分享如何使用 qiankun 如何搭建主应用基座，然后接入不同技术栈的微应用，完成微前端架构的从 0 到 1。

04

进阶 | 重新认识Angular

| 导语本文跟随着Angular的变迁聊聊这个框架，分享一些基础的介绍，以及个人的理解。也用过其他框架，像React和Vue。但与Angular结识较深，或许也是缘分吧。谈谈Angular ---- 内容概要数据绑定 (updated) 模块化组织 (new) 依赖注入路由和lazyload (new) Rxjs (new) 预编译AOT (new) 拥抱变化，迎接未来 updated: 原有特性，有更新 new: 新增特性 ---- 数据绑定 ---- 常用模版绑定常用模版引擎 1. S

01

前端三大框架大杂烩

摘要：从angular的诞生独步天下，到现在三大框架平分天下，基本形势已经趋于稳定。每一个框架从诞生到受欢迎，都有其特定的原因和背景。不同的开发者选择时，也是依据于其特定情景下的原因和背景。一、为什么前端会被vue,angular,react瓜分？不知道大家有没有发现，这三个框架除了都是前端框架之外，还大有搞基的成分存在。注意他们三个的名字，分别以v，a，r 开头，我这么一说，你是不是忽然间就想到了什么。哈哈，正是如此，将他们组合起来不就是javascript中无处不在的鬼东西么？var(当然纯属于

05

【技巧】ionic3善用数据变更检查

利用Cordova插件加载本地图片显示在html中，有时等很久才显示，以为是插件的问题，但是调试的时候，发现图像数据很快就返回了，那猜想是显示的问题，同时发现，当页面切换到其它页面再切换回来时，图片很快就显示了，所以，认为是ts的绑定数据更新了，但是视图页面却没有更新，这个时候，ChangeDetectorRef就派上用场了。

05

国庆节前端技术栈充实计划（8）：我使用 AngularJS 和 ReactJS 的经验

在过去的几年里，网站进化成了复杂的网页应用。曾经的互联网只涉及到简单的商业信息展现，而如今，看看 Facebook、Slack、Spotify 以及 Netflix，互联网正在改变你的社交和生活方式。随着互联网的发展，前端开发这个行业达到了全新的高度，并得到了前所未有的重视。

03

【前端架构】从 JQuery 到 React、Vue、Angular——前端框架的演变及其差异

这是前端面试中必然会问到的问题前端开发多年来一直在不断改进。从简单的静态页面到现在复杂的单页面应用程序，我们的工具变得越来越强大。现在，三大前端框架统治着前端开发，那么你知道这三个框架的区别吗？为什么一直保持着三足鼎立的局面，而不是某种框架来统一其他人？让我们在本文中讨论这些问题。前端开发的演变 PHP && JSP 早些年，网页的动态内容是在服务器端渲染的，主要使用PHP、JSP等技术。此时，服务器通过模板引擎填充数据，然后生成HTML，并将HTML返回给浏览器进行渲染。 <!DOCTYPE

02

基于 LeanCloud 的无后端评论库 Nexment，于任何 Web 应用或前端项目使用

本站建立时便未使用 WordPress 自带评论系统，原因主要是在有比较多的功能需求需要适配和实现的情况下，二次开发比较耗时费劲。所以一直采用的是 Artalk (https://github.com/qwqcode/Artalk)，功能非常完善；支持 Markdown、评论折叠、管理员等贴心功能。但是美中不足的其一是有后端部署的要求；其二是与博客的引用出于某些不清楚还没深究的原因效果不佳。最后的妥协是通过 iFrame 引用然后通过强制同源在父页面获取子页面窗口高度来实现评论区高度匹配。同时，这样的部署有几个影响用户体验的问题：

02

angularjs 控制器、作用域、广播详解

一、控制器首先列出几种我们平常使用控制器时的几种误区：我们知道angualrJs中一个控制器时可以对应不同的视图模板的，但这种实现方式存在的问题是：如果视图1和视图2根本没有任何逻辑关系，这样“

05

【Vue 响应式数据原理】数据双向绑定原理

Vue 数据双向绑定时通过数据劫持结合订阅者-发布者模式来实现的（观察者模式）。

02

Angular、React 和 Vue 三大框架，Web 开发该如何选择？

本文最初发布于 Northell 博客，经原作者授权由 InfoQ 中文站翻译并分享。

03

能不能手写Vue响应式？前端面试进阶

Vue 的视图更新原理主要涉及的是响应式相关API Object.defineProperty 的使用，它的作用是为对象的某个属性对外提供 get、set 方法，从而实现外部对该属性的读和写操作时能够被内部监听，实现后续的同步视图更新功能

02

能不能手写Vue响应式？前端面试进阶_2023-02-27

Vue 的视图更新原理主要涉及的是响应式相关API Object.defineProperty 的使用，它的作用是为对象的某个属性对外提供 get、set 方法，从而实现外部对该属性的读和写操作时能够被内部监听，实现后续的同步视图更新功能

03

能不能手写Vue响应式？前端面试进阶

Vue 的视图更新原理主要涉及的是响应式相关API Object.defineProperty 的使用，它的作用是为对象的某个属性对外提供 get、set 方法，从而实现外部对该属性的读和写操作时能够被内部监听，实现后续的同步视图更新功能

01

angular面试题及答案_angular面试

ngAfterContentInit:当把内容投影进组件之后调用，第一次调用ngDocheck()之后调用，只调用一次，只适用于组件

干货 | 前端阶段性总结之「框架相关」那些事

其实本人接触框架里面，可能是Angular最多吧，之前项目都是Angular1，现在项目在用Angular2。

02

[译]Top JavaScript Frameworks & Topics to Learn in 2017

作者: Eric Elliott 译：Adamhe 原文: 《Top JavaScript Frameworks & Topics to Learn in 2017》 JavaScript 的普及导致

00

【17】进大厂必须掌握的面试题-50个Angular面试

Angular是一个开放源代码的前端Web框架。它是最流行的JavaScript框架之一，主要由Google维护。它提供了一个轻松开发基于Web的应用程序的平台，并使前端开发人员能够管理跨平台应用程序。它集成了强大的功能，例如声明性模板，端到端工具，依赖项注入以及各种其他使开发路径更流畅的最佳实践。

05

移除 View Engine 转用 Ivy，盘点Angular 12的重要更新

Angular 12 版本的最大亮点就是淘汰掉了旧的 View Engine 编译与渲染管道，转而采用更为现代的 Ivy 技术。谷歌将 Ivy 描述为下一代编译与渲染管道，能够显著提升 AOT（ahead of time）编译速度。Angular 团队提到，View Engine 将在后续版本中被彻底移除。目前使用 View Engine 的库仍可与 Ivy 应用配合使用，但开发团队建议各位库作者提早向 Ivy 过渡。

01

选择大于努力，你必须了解web1.0到web2.0三段历史

1993年，大学生的 Marc Andreessen 在他的 Mosaic 浏览器加入标记，从此可以在Web页面上浏览图片

01

前端面试题：vue响应式原理 Vdom diff

现在最流行的框架非vue，react莫属，他们流行起来的原因，离不开响应式，因为它在做一些数据更新的时候，会去更新相应的视图，把我们从操作DOM中释放出来，让我们不再去自己操作dom，这也就是所说的数据驱动吧。

04

前端框架这么多，该何去何从？｜洞见

作为一个软件开发者，最大的挑战就是在不断涌现的新技术中进行取舍，持续学习是从事这一行业的必备技能。在这个领域里，技术更新最快地又非前端莫属了。各种框架的出现、版本的更新此起彼伏，呈现出一派欣欣向荣之景

04

IntelliJ IDEA 2022.2.2汉化版免登陆账号「win/mac」

IntelliJ IDEA是Mac端最好用的Java开发工具！IntelliJ IDEA分析您的代码，在所有项目文件和语言中查找符号之间的连接。利用这些信息，它提供了深入的编码协助，快速导航，巧妙的错误分析，当然还有重构，功能强大！

03

再谈angularJS数据绑定机制及背后原理—angularJS常见问题总结

ng-bind 单向数据绑定（$scope -> view），用于数据显示，简写形式是 {{}}。

04

Angular 从入坑到挖坑 - 表单控件概览

angular 入坑记录的笔记第三篇，介绍 angular 中表单控件的相关概念，了解如何在 angular 中创建一个表单，以及如何针对表单控件进行数据校验。

02

React中diff算法的理解

diff算法用来计算出Virtual DOM中改变的部分，然后针对该部分进行DOM操作，而不用重新渲染整个页面，渲染整个DOM结构的过程中开销是很大的，需要浏览器对DOM结构进行重绘与回流，而diff算法能够使得操作过程中只更新修改的那部分DOM结构而不更新整个DOM，这样能够最小化操作DOM结构，能够最大程度上减少浏览器重绘与回流的规模。

02

服务端渲染 vs 客户端渲染

概念服务端渲染（吐）服务端在返回 html 之前，在特定的区域，符号里用数据填充，再给客户端，客户端只负责解析 HTML 。也被称为 fat-server, thin-client 模式客户端

06

服务端渲染 vs 客户端渲染

服务端渲染也被称为 fat-server, thin-client 模式

02

化身面试官出 30+ Vue 面试题，超级干货（附答案）

点击上方蓝字关注网罗开发，更多技术干货等你之前一直没有总结 Vue 相关的知识，看了挺多别人总结的，其实也能快速知道一些，但是遇到真正的面试，发现自己的知识都还是是碎片化的，觉得不行，得总结一下了。

01

vue双向数据绑定原理

目前几种主流的mvc(vm)框架都实现了单向数据绑定，而我所理解的双向数据绑定无非就是在单向绑定的基础上给可输入元素（input、textare等）添加了change(input)事件，来动态修改model和 view，并没有多高深。所以无需太过介怀是实现的单向或双向绑定。实现数据绑定的做法有大致如下几种：

02

Angular 接入 NGRX 状态管理

生成 app/store/index.ts 并更新了 app.module.ts：

01

浅谈HTML5单页面架构（二）——backbone + requirejs + zepto + underscore

上一篇《浅谈HTML5单页面架构（一）——requirejs + angular + angular-route》探讨了angular+requirejs的一个简单架构，这一篇继续来看看backbon

04

Vue面试经常会被问到的

MVVM 是 Model-View-ViewModel 的缩写。 Model代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。 View 代表UI 组件，它负责将数据模型转化成UI 展现出来。 ViewModel 监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步View 和 Model的对象，连接Model和View。在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的，因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。 ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

05

微信小程序组件化编程和实践（下）

现在我们已经可以做到了两个组件之间的数据传递，那么如何在多个组件间传递数据呢？

08

Vue 面试题

看看面试题，只是为了查漏补缺，看看自己那些方面还不懂。切记不要以为背了面试题，就万事大吉了，最好是理解背后的原理，这样面试的时候才能侃侃而谈。不然，稍微有水平的面试官一看就能看出，是否有真才实学还是刚好背中了这道面试题（有空再把例子中代码补上）。

04

前端面试题angular_Vue前端面试题

1，ng-if 跟 ng-show/hide 的区别有哪些？第一点区别是，ng-if 在后面表达式为 true 的时候才创建这个 dom 节点，ng-show 是初始时就创建了，用 display:block 和 display:none 来控制显示和不显示。第二点区别是，ng-if 会（隐式地）产生新作用域，ng-switch 、 ng-include 等会动态创建一块界面的也是如此。这样会导致，在 ng-if 中用基本变量绑定 ng-model，并在外层 div 中把此 model 绑定给另一个显示区域，内层改变时，外层不会同步改变，因为此时已经是两个变量了。

02

前端相关片段整理——持续更新

在不同的接口请求数据然后拼合成自己所需的数据，通常这些接口之间没有关联（例如不需要前一个接口的数据作为后一个接口的参数）

01

AngularDart4.0 英雄之旅-教程-08HTTP 顶

你离开的地方在前一页中，您学会了在仪表板和固定英雄列表之间导航，沿途编辑选定的英雄。这是这个页面的起点。

03

Vue中$nextTick的理解

Vue中$nextTick方法将回调延迟到下次DOM更新循环之后执行，也就是在下次DOM更新循环结束之后执行延迟回调，在修改数据之后立即使用这个方法，能够获取更新后的DOM。简单来说就是当数据更新时，在DOM中渲染完成后，执行回调函数。

02

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭