首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Angular 8:为什么我的不可观察类型会在从其复制的数据被更新时被更新?

Angular是一种流行的前端开发框架,而Angular 8是Angular的一个版本。在Angular中,不可观察类型(Observable)是用于处理异步数据流的一种方式。当从不可观察类型复制数据时,如果数据被更新,复制的数据也会被更新。

这种行为是由于不可观察类型的特性所决定的。不可观察类型是基于观察者模式的,它允许组件订阅数据的变化,并在数据发生改变时接收通知。当你从一个不可观察类型复制数据时,实际上是将数据的引用复制给了新的变量,而不是将数据的值复制给新的变量。因此,当原始数据被更新时,新复制的数据也会跟随更新。

为了解决这个问题,可以使用深拷贝来复制不可观察类型中的数据,而不是简单的引用复制。深拷贝将复制数据的所有层级,而不仅仅是引用。这样,即使原始数据发生改变,复制的数据仍然会保持不变。

在Angular中,可以使用rxjs库提供的cloneDeep函数来进行深拷贝操作。例如,可以按照以下步骤进行深拷贝:

  1. 导入cloneDeep函数:import { cloneDeep } from 'rxjs/internal/operators/cloneDeep';
  2. 使用cloneDeep函数进行深拷贝:const copiedData = cloneDeep(originalData);

这样,copiedData将是原始数据的一个深拷贝,即使原始数据发生改变,copiedData也会保持不变。

关于Angular 8的更多信息,可以参考腾讯云的相关产品和文档:

  • 腾讯云服务器less云函数:提供基于事件驱动的无服务器云函数服务,可用于快速开发和部署Angular应用。了解更多信息,请访问腾讯云函数产品页面
  • 腾讯云对象存储COS:提供高可扩展的云端存储服务,可用于存储和管理Angular应用中的静态资源。了解更多信息,请访问腾讯云对象存储产品页面

请注意,上述提供的腾讯云产品仅作为示例,其他云计算品牌商可能提供类似的产品和服务。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Angular2 脏检查过程

这就是为什么变更检测路径是有向树而且不可以带有闭环原因。这种结构让检测系统极其高效。更重要是,它可以保证系统具备更强可预测性,并且更加方便debug。 有多快?...Immutable(不可变)对象 如果一个组件只依赖于它那些输入属性,而这些属性是不可类型,那么只有当其中一个输入属性发生变化时候这个组件才会发生改变。...此功能并没有绑定到任何一个特定库上面。把Angular切换到其它任何observable library都只需要修改几行代码而已。 可观察对象导致级联更新吗?...可观察对象名声比较差,因为它们可能导致级联更新。有使用过基于可观察模型框架来构建大型应用经验的人都知道在说什么。一个可观察对象发生更新可能导致一大堆可观察对象触发更新,然后就这样一直级联下去。...你可以只在应用里面的某个局部使用可观察对象(例如,在某个巨大table里面),然后那个部分就可以获得巨大性能提升。你甚至可以构建基于两种数据类型组件,从而可以同时获得它们所带来好处。

2.6K80

MobX 背后基础原理

像 Meteor、Knockout、Angular、Ember 和 Vue 这样框架都显露了与 MobX 类似的反应式行为,且都已经存在很久了。那为什么要建立 MobX 呢?...接受不可预测性存在,挺正常,对于 Flux 模式特别是 Redux 来说之所以流行最重要原因之一便是:它精确处理了规模变大可预测性问题,除此之外并无任何神奇之处。...modifiers 不是“尽快把这个弄好”意思,而是表示“只观察对象引用,将对象本身视为超出控制黑盒子”。 这种概念在处理不可数据类型时候也非常合适。...一个可行例子是,创建一个可观察消息 map,消息本身是不可数据结构。 第二个问题是自动可观察集合总是创建“克隆”,这并不总是可以接受。Proxy 总是产生一个新对象,并只以“一个方向”工作。...在 MobX 中不通知观察者就无法升级数据,也引入在应用中存在过期数据可能性,这就违背了 MobX 理念。人们有时希望有这种机制,但我还没遇到过概念上无法解决实际用例。

1.6K10
  • 从单向到双向数据绑定0.前言1.单向数据(代表:react)2.观察者模式3.双绑中间枢纽——Object.defineproperty(代表:vue)4. 脏值检测(代表:angular1)前面说

    这里除了单向数据绑定,当你改变$scope.data,p标签内容也是马上改变。...因为用了定时器,他异步地将数据反映上去。...2.观察者模式 首先,我们先订阅事件,比如事件‘a’,回调函数是function (){console.log(1)},订阅后,如果事件‘a’触发了,就调用回调函数。...我们例子其实不用观察者模式都可以实现双绑,但是在实际应用中肯定也不可以不用观察者模式,为了代码可读性和可维护性以及拓展性。...脏值检测(代表:angular1) 前面说定时器双绑是扯淡 前面特地埋了个坑,关于Angular脏检查,并不是一些人想象那样子用定时器周期性进行脏检测(前面写那个超级简单双绑就是人们传闻angular

    1.6K40

    哔哩哔哩面试官:你可以手写Vue2响应式原理吗?

    整体流程 作为一个前端MVVM框架,Vue基本思路和Angular、React并无二致,核心就在于: 当数据变化时,自动去刷新页面DOM,这使得我们能从繁琐DOM操作中解放出来,从而专心地去处理业务逻辑...因为大部分同学只是知道:Vue响应式原理是通过Object.defineProperty实现Object.defineProperty绑定过对象,变成「响应式」化。...一段话总结原理 上面说了那么多,下面总结一下Vue响应式核心设计思路: 当创建Vue实例,vue遍历data选项属性,利用Object.defineProperty为属性添加getter和setter...对数据读取进行劫持(getter用来依赖收集,setter用来派发更新),并且在内部追踪依赖,在属性访问和修改时通知变化。...每个组件实例会有相应watcher实例,会在组件渲染过程中记录依赖所有数据属性(进行依赖收集,还有computed watcher,user watcher实例),之后依赖项改动,setter

    39730

    一个Angular 5教程:一步一步指导实现你第一个Angular 5应用程序

    而言,最好使用更智能编辑器vim,因为它会为代码中任何错误提供额外补充,因为TypeScript是强类型。...我们很快讨论输入和组件通信,但现在,我们只需要记住,最好使用常量构造函数,比如实际上硬编码到组件ngOnInit中东西,以及依赖于外部所有东西数据。...我们在我们组件中订阅我们观察器。它们用在我们应用程序不同部分,所以它们可能一路销毁 - 例如,当我们在路由中使用组件作为页面(我们将在本指南后面讨论路由)。...为什么这样?我们正在从Firebase获得观察结果。但是,我们*ngFor在CardList组件中等待对象数组,不能观察这些数组。...让我们再往前走一步,并确保如果我们应用程序状态将包含多种类型数据,我们从每种类型单独孤立状态进行组合。

    42.6K10

    Vue全家桶

    MVVM 架构中,是不允许数据和视图直接通信,只能通过ViewModel 来通信,而 ViewModel 就是定义了一个Observer观察者- ViewModel 能够观察数据变化,并对视图下对应内容进行更新...Object.defineProperty 是 ES5 中一个无法 shim 特性,这也就是为什么 Vue 不支持 IE8 以及更低版本浏览器。...这些 getter/setter 对用户来说是不可,但是在内部它们让 Vue 追踪依赖,在属性访问和修改时通知变化。...这里需要注意问题是浏览器控制台在打印数据对象 getter/setter 格式化并不同,所以你可能需要安装 vue-devtools 来获取更加友好检查接口。...每个组件实例都有相应 watcher 实例对象,它会在组件渲染过程中把属性记录为依赖,之后当依赖项 setter 调用时,会通知 watcher 重新计算,从而致使它关联组件得以更新

    40020

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

    当 view 中有任何数据变化时,更新到 model ,当 model 中数据有变化时,view 也会同步更新,显然,这需要一个监控。 双向数据绑定原理?...当你写下表达式如{{ val }},AngularJS在幕后会为你在scope模型上设置一个watcher(表达式将被 Angular 编译成一个监视函数),它用来在数据发生变化时候更新view。...当浏览器接收到可以 angular context 处理事件,$digest 循环就会触发,遍历所有的 $watch,最后更新 dom。...在脏检测机制下,这个过程毫无压力,一次做完所有数据变更,然后整体应用到界面上。这时候,基于setter机制就惨了,除非它也是像Angular这样把批量操作延时到一次更新,否则性能更低。...ng-click中写表达式,能使用JS原生对象上方法,比如Math.max之类吗?为什么不可以。

    7.8K40

    React 教程:React 快速上手指南

    很不喜欢对库进行比较,特别是当我们被迫把梨和苹果放在一起进行比较。 因此,将尝试使用一系列简短问题和答案将 React 与 Angular 和 Vue 进行比较。...在这里更倾向于 Vue,但这只是个人意见。至于为什么?因为你不需要懂 JSX(它是可选),它基本上只是 HTML + CSS + JavaScript。...这种方法有自身优点,因为你可以增加原来不可东西(例如装饰器)来增强你应用,但它也可能是令人头疼问题,因为它需要花费更多时间去配置许多额外文件。...“‘s”})) setState([object / function like above], () => {}) —— 这个表单允许我们附加 callback,当 state 显示我们想要数据调用...总结 这是我们React教程第一部分。在后续文章中,我们设计更多高级主题,包括样式和类型检查,以及生产部署和性能优化。

    1.4K30

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

    摘要:从angular诞生独步天下,到现在三大框架平分天下,基本形势已经趋于稳定。每一个框架从诞生到受欢迎,都有特定原因和背景。不同开发者选择,也是依据于特定情景下原因和背景。...这似乎也是暗示了vue,angularjs,react这三个框架不可替代性啊,也不知道当时这三个框架作者起名想表达特殊含义是什么,但偏偏就刚好对上了。...$watch只为它传递了一个参数,无论作用域中什么东西发生了变化,这个函数都会被调用。在ng-model中,这个函数用来检查模型和视图有没有同步,如果没有同步,它将会使用新值来更新模型数据。...Vue.js 则根本没有这个问题,因为它使用基于依赖追踪观察系统并且异步列队更新,所有的数据变化都是独立地触发,除非它们之间有明确依赖关系。...Virtual DOM:    提供了函数式方法描述视图,它不使用数据观察机制,每次更新都会重新渲染整个应用,因此从定义上保证了视图与数据同步。

    3K90

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

    摘要:从angular诞生独步天下,到现在三大框架平分天下,基本形势已经趋于稳定。每一个框架从诞生到受欢迎,都有特定原因和背景。不同开发者选择,也是依据于特定情景下原因和背景。...这似乎也是暗示了vue,angularjs,react这三个框架不可替代性啊,也不知道当时这三个框架作者起名想表达特殊含义是什么,但偏偏就刚好对上了。...$watch只为它传递了一个参数,无论作用域中什么东西发生了变化,这个函数都会被调用。在ng-model中,这个函数用来检查模型和视图有没有同步,如果没有同步,它将会使用新值来更新模型数据。...Vue.js 则根本没有这个问题,因为它使用基于依赖追踪观察系统并且异步列队更新,所有的数据变化都是独立地触发,除非它们之间有明确依赖关系。...Virtual DOM:    提供了函数式方法描述视图,它不使用数据观察机制,每次更新都会重新渲染整个应用,因此从定义上保证了视图与数据同步。

    2.1K60

    React vs Angular,到底那个更好用

    它具有一种树形组织结构,使得脚本能够动态地与 Web 文档内容及结构进行交互,并对它们实现更新。 DOM 有两种类型:虚拟和真实。...Angular双向数据绑定类似于“模型 - 视图 - 控制器(Model-View-Controller,MVC)”体系结构, 由于其中模型和视图是同步,因此数据变更会影响到视图上,而视图更改也反过来触发数据相应变更...React 则使用单向或向下数据绑定。单向数据流不允许子元素在更新影响到父元素,因此保证了只有已获准组件才会发生更改。...总的说来,React 单向数据绑定更具备可预测性,代码更为稳定,调试也更加容易。而 Angular传统双向数据绑定,则易于使用。...开发人员在从 Web 应用处移植业务逻辑,并在其 UI 上使用相同操作技巧,该工具允许 iOS 和 Android 平台共享大约 90% 代码。

    5.7K60

    如何在 2022 年为 Web 应用程序选择技术堆栈

    为 Web 开发选择技术堆栈要考虑事项 正如我在介绍中解释那样,选择技术堆栈对于您正在从项目至关重要。所需时间和成本,以及最终产品整体质量,都直接受到您选择影响。...此外,请记住您应用程序演变。您网络应用程序将来肯定需要技术支持和更新。因此,在选择技术堆栈,请考虑您对应用程序未来开发计划:也许您想让它在其他设备上可用?或者想添加一些额外功能?...该框架非常适合复杂、高级 Web 应用程序。如果你想在 Angular 上构建一个 Web 应用程序,你需要在开发开始之前就对进行彻底规划。...JS 还支持复杂动画,这对创造出色用户体验有很大贡献。 JavaScript 非常流行,并且可能保持地位多年。超过 97% 网站是在客户端使用 JavaScript 构建。...它用于金融和科学项目,拥有强大 SQL 引擎,能够轻松处理大量数据。 mysql。它可以确保高性能和可扩展性,并且适用于大多数类型应用程序。 雷迪斯。当需要超快响应时间,这是一个不错选择。

    87230

    前端三大框架大杂烩

    摘要:从angular诞生独步天下,到现在三大框架平分天下,基本形势已经趋于稳定。每一个框架从诞生到受欢迎,都有特定原因和背景。不同开发者选择,也是依据于特定情景下原因和背景。...这似乎也是暗示了vue,angularjs,react这三个框架不可替代性啊,也不知道当时这三个框架作者起名想表达特殊含义是什么,但偏偏就刚好对上了。...在ng-model中,这个函数用来检查模型和视图有没有同步,如果没有同步,它将会使用新值来更新模型数据。...Vue.js 则根本没有这个问题,因为它使用基于依赖追踪观察系统并且异步列队更新,所有的数据变化都是独立地触发,除非它们之间有明确依赖关系。...Virtual DOM:   提供了函数式方法描述视图,它不使用数据观察机制,每次更新都会重新渲染整个应用,因此从定义上保证了视图与数据同步。

    2.6K50

    mysql数据库面试题目及答案_数据库面试常问问题

    Page Dictionary 类似于字典目录结构,根据主键大小,每隔 4-8 个纪录设置一个槽,用来纪录位置,当根据主键查找数据,首先一步到位找到数据所在槽,然后在槽中线性搜素。...它对数据库中数据改变是持久,即使数据库发生故障也不应该对有任何影响。 4、事务并发问题? 脏读、幻读和不可重复读。 ref 并发事务带来问题 5、什么是脏读、幻读和不可重复度?...更新锁:U 锁,用来预定要对资源施加 X 锁,允许其他事务读,但不允许再施加 U 锁或 X 锁。 当读取页将要被更新,则升级为 X 锁,U 锁一直到事务结束才能释放。...乐观锁(Optimistic Lock):顾名思义,从主观上认定资源是不会被修改,所以不加锁读取数据,仅当更新用版本号机制等确认资源是否修改。 乐观锁适用于多读应用类型,可以系统提高吞吐量。...主从同步目标就是把主数据 binlog 文件中 SQL 语句复制到从数据库,让在从数据 relaylog 文件中再执行一次这些 SQL 语句即可。

    39770

    Top JavaScript Frameworks & Topics to Learn in 2017

    在此阶段数据更新不能重新触发渲染,直到下一个绘图阶段。 事件处理阶段 - 在渲染 DOM 之后,React 侦听和事件,将事件委托给 DOM 树根(为了更好性能)单个事件侦听器。...这与双向数据绑定形成对比,其中对DOM改变可以直接更新数据(例如,如在Angular 1和 Knockout 情况下)。...React 没有规定数据管理系统,但推荐使用基于 Flux 方法。 React 单向数据流方法借鉴了函数式编程和不可数据结构思想,改变了我们对前端框架架构思考方式。...掌握它们真的需要相当多实践。 EDIT: 为什么没有列举出? 很多人问我,“为什么没有列举出他们喜欢框架?” 因为其中一个重要标准是,“在工作中能真正用上”。...你可能会看到 Angular 在这些列表中比 React 有显着优势。 为什么依然推荐优先学习 React?

    2.3K00

    mysql数据库面试题目及答案_数据库面试题2021

    Page Dictionary 类似于字典目录结构,根据主键大小,每隔 4-8 个纪录设置一个槽,用来纪录位置,当根据主键查找数据,首先一步到位找到数据所在槽,然后在槽中线性搜素。...它对数据库中数据改变是持久,即使数据库发生故障也不应该对有任何影响。 4、事务并发问题? 脏读、幻读和不可重复读。 ref 并发事务带来问题 5、什么是脏读、幻读和不可重复度?...更新锁:U 锁,用来预定要对资源施加 X 锁,允许其他事务读,但不允许再施加 U 锁或 X 锁。 当读取页将要被更新,则升级为 X 锁,U 锁一直到事务结束才能释放。...乐观锁(Optimistic Lock):顾名思义,从主观上认定资源是不会被修改,所以不加锁读取数据,仅当更新用版本号机制等确认资源是否修改。 乐观锁适用于多读应用类型,可以系统提高吞吐量。...主从同步目标就是把主数据 binlog 文件中 SQL 语句复制到从数据库,让在从数据 relaylog 文件中再执行一次这些 SQL 语句即可。

    67010

    为什么现在开发者总是拿 Vue.js 和 JavaScript 巨头 Angular、React 比较?

    本文会试图揭示为什么开发者越来越相信 Vue.js 将会成为顶级 JavaScript 库,为什么 Vue 将会让 Angular 和 React 望尘莫及。 ?...但是,Vue.js 正在从这些成功 JavaScript 库——比如 Angular——中吸取精华,所以很快也变得很强大。...和 Angular2 相似,Vue 也支持“双向数据绑定”。但是,Vue 使用是单向数据流,默认数据流向是从父组件到子组件,这样在大型应用中能够更容易理清数据流向。...当存在大量 watcher 时候,任何变化都会触发所有 watcher,所以 Angular1 性能降低。...更糟糕是,有时候 Angular 使用者找不到什么方法来优化使用了大量 watcher 作用域。 因为 Vue 使用了具有异步排队功能透明依赖关系跟踪观察系统,所以完全没有这方面的后顾之忧。

    1.9K30

    Angular React Vue应该选择什么?

    不是律师,所以如果 React 许可证对你或你公司有问题,你应该自己决定。关于这个话题还有很多文章:Dennis Walsh 写到,你为什么不该害怕。...不是律师,所以如果 React 许可证对你或你公司有问题,你应该自己决定。关于这个话题还有很多文章:Dennis Walsh 写到,你为什么不该害怕。...Angular,React 与 Due Github Star 历史 (数据来源) 数据来源 更新: 感谢 Paul Henschel 提出 npm 趋势。...Redux 是在采用阶段( ThoughtWorks 项目采用!),它在许多 ThoughtWorks 项目中价值是不可估量。Vue.js 是在试用阶段(试着用)。...当 UI 元素(例如,用户输入)更新Angular 双向绑定改变 model 状态。React 只有一种方法:先更新 model,然后渲染 UI 元素。

    2.9K20
    领券