惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
cs.CV updates on arXiv.org
cs.CV updates on arXiv.org
Security Archives - TechRepublic
Security Archives - TechRepublic
N
News and Events Feed by Topic
Last Week in AI
Last Week in AI
博客园 - 司徒正美
The GitHub Blog
The GitHub Blog
O
OpenAI News
The Last Watchdog
The Last Watchdog
T
The Blog of Author Tim Ferriss
M
MIT News - Artificial intelligence
P
Proofpoint News Feed
Forbes - Security
Forbes - Security
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
有赞技术团队
有赞技术团队
Jina AI
Jina AI
GbyAI
GbyAI
V
Vulnerabilities – Threatpost
L
LangChain Blog
Vercel News
Vercel News
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
AI
AI
博客园 - 聂微东
W
WeLiveSecurity
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
Scott Helme
Scott Helme
罗磊的独立博客
Martin Fowler
Martin Fowler
S
Security Affairs
T
Tor Project blog
Recent Announcements
Recent Announcements
F
Fortinet All Blogs
美团技术团队
C
Cisco Blogs
PCI Perspectives
PCI Perspectives
Recent Commits to openclaw:main
Recent Commits to openclaw:main
S
Security @ Cisco Blogs
T
Threat Research - Cisco Blogs
A
About on SuperTechFans
Cisco Talos Blog
Cisco Talos Blog
K
KPMG report finds enterprise disconnect between AI and its ROI | CIO
I
Intezer
B
Blog
WordPress大学
WordPress大学
I
InfoQ
G
Google Developers Blog
www.infosecurity-magazine.com
www.infosecurity-magazine.com
V
V2EX
P
Privacy & Cybersecurity Law Blog
雷峰网
雷峰网

Angular

关于外部 js 修改 dx-select-box 的值的可行性 2025 年 Angular SSR 达到 Next.js 的水平了吗?记得两三年前, Angular 自己的官方文档 Google 都只索引个首页,现在好像正常收录了 - V2EX Angular 这么没落了吗 - V2EX ng-dnd 3.0 发布了!🎉 - V2EX Angular 页面跳转后返回前页状态(输入的数据)丢失,有没有什么简单的包引入后就能像普通页面一样跳转后保留输入数据? - V2EX 开源复刻了一个 Angular Canvas 动态背景组件库,欢迎大家试用/PR [创意来自本站/t/1020300] - V2EX 有人成功部署过 Angular 17 SSR 到 AWS 么? vs code 的 angular 扩展如何在关闭 strictTemplates 的情况下强制启用模板属性跳转? 被 angular17 搞疯了 - V2EX angular 17 发布 - V2EX 怎么他喵的会有这种事 - V2EX 请问 ngFor 的数组更新后,如何在获知页面渲染已完成? - V2EX 大一留学生,想找一份 Angular 的远程实习补贴日常开销 - V2EX 新手请教 Angular 学习课程 [开工礼物] 🥳 Angular V16 发布啦 - V2EX Angular 新纪元: Signals RFC Angular 写的网站最快实现 I18n 的方法是什么,只要能切换中英文就行,不需要支持其它语言 - V2EX 现在国外有哪一个大一点的网站是用 Angular 写前端的吗? - V2EX Material Motion 的最完整实现 - Material Studies 示例应用 Reply 的 Angular 实现现已公开 - V2EX Angular 15 发布 - V2EX 有 angular 大神吗, cdk-virtual-scroll-viewport 和 formArray 一起用滚动中间顺序乱了 - V2EX 问:来个精通 Angular 的大哥帮忙看一段代码 - V2EX 为什么 Angular 的一些组件仍在使用 Promise? - V2EX 有没有大佬写过 angular 动态表单 请教关于 SSR 的问题。SSR 有可能隐藏 AngularJS 入口文件吗? Angular 14 更新 - V2EX Angular SSR 多语言的最佳实践(SEO 效果好)是什么? - V2EX Angular 的 API 请求全放在一个服务里还是分开不同服务比较好?全放一起感觉文件太长了。另外服务和 component 放一起会不会看起来更整齐一些?官方好像不是这么做 - V2EX 小白请教关于 Angular 路由的动态注册方式 - V2EX 各位有写 angular 的吗?我想问一下关于 vscode 插件的问题 - V2EX 为什么现在国内用 Angular 的网站感觉非常少? - V2EX Angular 有没有类似 OneDrive 网页版文件列表的轮子? - V2EX Angular 开发小程序 - V2EX Angular 学起来真是太难了, 国内资料少, 用 G 搜呢,总感觉表达不准确,搜不到好的结果 - V2EX 服务端渲染(SSR)怎么区分 JS 代码块是在浏览器执行,还是在 Server 端执行? - V2EX [Angular] ngx-center 单运行时多项目共享依赖解决方案 - V2EX 最近 Angular 的占有率有所上升吗? - V2EX Angular12 正式版发布 - V2EX 借着 vue 和 react 的思路,跟着 b 站视频学了三天 angluar11 后,我来吐吐槽。。。 - V2EX ng 是不是没落了,国内书籍只有 7 版本 - V2EX 像富文本编辑器,组态设计器这些传统桌面应用要是放在 Web 端实现的话,选什么框架? - V2EX Angular 9+ 升级小记 —— 应付 MSAL-Angular 与 ngx-restangular 的兼容性问题 - V2EX angular 模板不够"typescript", 是我的姿势不对吗? - V2EX 这里好冷清,想问下有没有什么 angular 论坛比较火热的? - V2EX 为什么用 Angular 的比用 Vue/React 的少那么多? - V2EX AngularGo —— 一个开源 Angular SPA 模板 - V2EX 有没有好看的 Angular/material 主题? - V2EX
请教下 angular computed 相关的问题 - V2EX
Mirachael · 2024-04-17 · via Angular

这是一个创建于 788 天前的主题,其中的信息可能已经有所发展或是发生改变。

使用 computed 获取数组长度,但是视图不会更新

  addrLength = computed(() => {
    const user = this.dataService.user();

    return user.addresses.length;
  });

使用 computed 重新构建新的数组,视图也不会更新

  addresses = computed(() => {
    const user = this.dataService.user();
    // transform data 后页面不会更新
    // return user.addresses.map(addr => ({ address: addr, title: `Address-${addr.title}` }));

    // 直接返回 user.addresses ,页面会更新
    return user.addresses;
  });

这里是在线 demo

第 1 条附言  ·  2024 年 4 月 18 日

其实是想试下angular的新特性signal computed文档

看文档,我理解为,signal更新后,任何依赖此signal的computed也会更新,文档里有原话。

const count: WritableSignal<number> = signal(0);
const doubleCount: Signal<number> = computed(() => count() * 2);

The doubleCount signal depends on count. Whenever count updates, Angular knows that anything which depends on either count or doubleCount needs to update as well.

第 2 条附言  ·  2024 年 4 月 19 日

结论: 使 signal 的 equal 方法始终返回 false ,这样就能保证触发更新

ktqFDx9m2Bvfq3y4

2

ktqFDx9m2Bvfq3y4      2024 年 4 月 17 日   ❤️ 2

你这种还不如这样:{{user.address.length}}。user 来自 userService ,这个对象一直不变,登录修改里面的值。这样肯定可行。你那个主要问题是不确定什么时间会改变,会导致 Angular 不断调用才能判断。

ktqFDx9m2Bvfq3y4

3

ktqFDx9m2Bvfq3y4      2024 年 4 月 17 日

我用 Angular 这么多年,主要领悟就是能共享对象就不要传什么方法。然后在其他地方替换对象或更新它的值。比计算要高性能,也不要用 get/set 属性,这个会比一般的变量浪费性能因为需要计算才能拿到值,直接给字段,省去重复调用的过程。

shakaraka

4

shakaraka      2024 年 4 月 17 日

原因是你的 user 是同一个,你虽然设置了 addresses ,但是实际的 user 是没有变化的。

你要做的是把 user 里的 addresses 也设置 signal 。

chnwillliu

6

chnwillliu      2024 年 4 月 18 日 via Android

你在 update user address 时,user 这个 signal 并没有变 dirty ,自然 computed 不会重新计算。

chnwillliu

8

chnwillliu      2024 年 4 月 18 日 via Android

signal 相当于默认有 rxjs 的 distinctUntilChanged ,你第二次 emit 同一个 object reference 会被 skip 掉的。

chnwillliu

9

chnwillliu      2024 年 4 月 18 日 via Android

自定义 signal 判等方式,或者 update address 的时候把整个 user update 成另一个 object reference ,好比 redux / ngrx 处理的方式。

Mirachael

10

Mirachael      2024 年 4 月 18 日

@Chad0000 #3 这是 angular 的新特性 signal ,如果在模板里获取 signal 的当前值,需要像方法一样调用。比如 dataService.user().addresses 。这个 user 是 signal ,不是方法。另外,你说模板不要传方法,其实是更新策略选择的问题。

Mirachael

11

Mirachael      2024 年 4 月 18 日

@chnwillliu #9 我觉的跟 user 的 object reference 变没变没关系,因为这种写法是可以更新视图的

```
addresses = computed(() => {
const user = this.dataService.user();

// 直接返回 user.addresses ,页面会更新
return user.addresses;
});
```

ktqFDx9m2Bvfq3y4

12

ktqFDx9m2Bvfq3y4      2024 年 4 月 18 日

@Mirachael #11
你这个返回的是 object 了,后面改变的也是 object ,那么不管它来自哪里,都能触发更新。

我倒是没注意这个新的 Feature ,但我觉得它可能会性能差。怎么说呢,我在做一个白板应用,用 Angular 管理成千的节点渲染出来,目前没有使用 Push 模式,有一次我大量将 field 改成了 getter/setter ,结果性能直线下降产生了明显卡顿感。所以我后面的实践都是能直接给 Field 就直接给,哪怕 getter 这种不计算的也是需要调用后才知道是否改变,会导致性能下降。

你的这个 Feature 就算没导致性能下降,但会导致写法过于混乱,跟直接绑定对象或属性比,不够简洁直观。

Mirachael

13

Mirachael      2024 年 4 月 18 日

@chnwillliu #9 你说的对,浅拷贝还不行,必须使用深拷贝,因为在 computed 里使用的都是 addresses ,我使用 lodash 的 cloneDeep 方法就可以

```
addAddress() {
this.user.update((u) => {
const addr = new Address('test', '20000');
u.addAddress(addr);

return cloneDeep(u);
});
}
```

Mirachael

15

Mirachael      2024 年 4 月 18 日

@Mirachael #13 但是又无法解释,不使用深拷贝,只返回 user.addresses 时,视图能更新这种情况。。。

ktqFDx9m2Bvfq3y4

16

ktqFDx9m2Bvfq3y4      2024 年 4 月 18 日

@Mirachael #14
我知道启用 Push 会更好,但我的问题是我在未遇到性能问题前我只想保持简洁高效,能用 Push 最好但比较繁琐,带来不必要的心智负担。我的 Default 模式下,将 Field 改成了 getter/setter 之后,直接导致性能严重下降:这已经明确证明了是与之前 Angular 能直接拿到对象或值相比,getter/setter 需要 Angular 每次都调用才能拿到值对比,而不是值就已经在它的处理层,只需要看值是否改变而已。

我目前基于 Default 模式做了很多框架简化开发,并没有引起性能问题,我又不是做专业组件所以从来没弄过 Push 模式。

ktqFDx9m2Bvfq3y4

17

ktqFDx9m2Bvfq3y4      2024 年 4 月 18 日

@Mirachael #14

我做了很长时间的 WPF 和 Xamarin 应用,它们使用的就是 MVVM 设计,而且只有 Push 模式,我倒是羡慕 Angular 有主动检查而且不太影响性能的这种做法,这样能使很多事情大大简化。我做的白板需要同时渲染上千个节点在 SVG 面板中,实现各种效果,目前一点儿也不卡顿,同时还保留了架构和数据的简洁。在做这个项目过程中,最简单地检测是否卡顿的方式就是选中若干个对象,能拖多快就拖多快,看拖动是否平滑(因为会带着箭头什么的一起变动)。目前说真的,Default 模式就足够高性能。

shakaraka

19

shakaraka      2024 年 4 月 18 日

你试试吧 user 的 equal 值设置为() => true ,保你每次都会更新

chnwillliu

21

chnwillliu      2024 年 4 月 18 日 via Android   ❤️ 1

@Mirachael 一个 signal 只有脏了才会 push dirty 的 notification 给下游的 computed ,effect 或者 view ,signal update 后脏不脏由 signal equality function 决定,默认用的 Object.is 检测前后两个值。所以并不需要 deep clone ,shallow clone 一样可以。

直接返回 address 能 work 只是因为你在 app component 里没用 onPush strategy ,默认在 UI event 后更新 component 的 view ,而 view 中使用了 address ,address push 了新值自然能在 view 中体现出来,和 signal 没关系,你就是写个普通 get 函数一样 work 。

chnwillliu

22

chnwillliu      2024 年 4 月 18 日 via Android

@Chad0000 这个 feature 就是前端大热的 signal ,就是为了做到细粒度更新 view 而引入的,将来可是要干掉 zonejs ,颠覆 Angular 自上而下 change detection 的。

ktqFDx9m2Bvfq3y4

23

ktqFDx9m2Bvfq3y4      2024 年 4 月 18 日 via iPhone

@chnwillliu
那它这么折腾侵入性太强了,反而不如 wpf 的实现优雅了。后者实现接口通知属性变更就行,我在实际使用过程中是偷懒反射然后动态触发通知,也算简洁和入侵不强。

Mirachael

24

Mirachael      2024 年 4 月 19 日

@wunonglin #19

试过了,不是设置 true ,应该时设置为 false ,确实可以更新视图

```

user = signal<User>({} as User, {
equal: () => false,
});
```

Mirachael

25

Mirachael      2024 年 4 月 19 日

@chnwillliu #21 shallow clone 确实可以,但是实际情况时 object 通常是带有方法的类实例,浅拷贝会导致 user signal 丢失方法。所以这种情况应该 deepClone

shakaraka

26

shakaraka      2024 年 4 月 19 日

@Mirachael #24 对,这里我写反了我勘误。但是你直接把 addresses 设置为 signal 不就好了吗

chnwillliu

27

chnwillliu      2024 年 4 月 19 日 via Android

@Mirachael 可以了解下 ngrx 的 singal store 和 deep signal 的概念哦