






















这是一个创建于 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;
});
第 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 ,这样就能保证触发更新
2 ktqFDx9m2Bvfq3y4 2024 年 4 月 17 日你这种还不如这样:{{user.address.length}}。user 来自 userService ,这个对象一直不变,登录修改里面的值。这样肯定可行。你那个主要问题是不确定什么时间会改变,会导致 Angular 不断调用才能判断。 |
3 ktqFDx9m2Bvfq3y4 2024 年 4 月 17 日我用 Angular 这么多年,主要领悟就是能共享对象就不要传什么方法。然后在其他地方替换对象或更新它的值。比计算要高性能,也不要用 get/set 属性,这个会比一般的变量浪费性能因为需要计算才能拿到值,直接给字段,省去重复调用的过程。 |
4 shakaraka 2024 年 4 月 17 日原因是你的 user 是同一个,你虽然设置了 addresses ,但是实际的 user 是没有变化的。 你要做的是把 user 里的 addresses 也设置 signal 。 |
6 chnwillliu 2024 年 4 月 18 日 via Android你在 update user address 时,user 这个 signal 并没有变 dirty ,自然 computed 不会重新计算。 |
8 chnwillliu 2024 年 4 月 18 日 via Androidsignal 相当于默认有 rxjs 的 distinctUntilChanged ,你第二次 emit 同一个 object reference 会被 skip 掉的。 |
9 chnwillliu 2024 年 4 月 18 日 via Android自定义 signal 判等方式,或者 update address 的时候把整个 user update 成另一个 object reference ,好比 redux / ngrx 处理的方式。 |
10 Mirachael 2024 年 4 月 18 日@Chad0000 #3 这是 angular 的新特性 signal ,如果在模板里获取 signal 的当前值,需要像方法一样调用。比如 dataService.user().addresses 。这个 user 是 signal ,不是方法。另外,你说模板不要传方法,其实是更新策略选择的问题。 |
11 Mirachael 2024 年 4 月 18 日@chnwillliu #9 我觉的跟 user 的 object reference 变没变没关系,因为这种写法是可以更新视图的 ``` // 直接返回 user.addresses ,页面会更新 |
12 ktqFDx9m2Bvfq3y4 2024 年 4 月 18 日@Mirachael #11 我倒是没注意这个新的 Feature ,但我觉得它可能会性能差。怎么说呢,我在做一个白板应用,用 Angular 管理成千的节点渲染出来,目前没有使用 Push 模式,有一次我大量将 field 改成了 getter/setter ,结果性能直线下降产生了明显卡顿感。所以我后面的实践都是能直接给 Field 就直接给,哪怕 getter 这种不计算的也是需要调用后才知道是否改变,会导致性能下降。 你的这个 Feature 就算没导致性能下降,但会导致写法过于混乱,跟直接绑定对象或属性比,不够简洁直观。 |
13 Mirachael 2024 年 4 月 18 日@chnwillliu #9 你说的对,浅拷贝还不行,必须使用深拷贝,因为在 computed 里使用的都是 addresses ,我使用 lodash 的 cloneDeep 方法就可以 ``` return cloneDeep(u); |
16 ktqFDx9m2Bvfq3y4 2024 年 4 月 18 日@Mirachael #14 我目前基于 Default 模式做了很多框架简化开发,并没有引起性能问题,我又不是做专业组件所以从来没弄过 Push 模式。 |
17 ktqFDx9m2Bvfq3y4 2024 年 4 月 18 日@Mirachael #14 我做了很长时间的 WPF 和 Xamarin 应用,它们使用的就是 MVVM 设计,而且只有 Push 模式,我倒是羡慕 Angular 有主动检查而且不太影响性能的这种做法,这样能使很多事情大大简化。我做的白板需要同时渲染上千个节点在 SVG 面板中,实现各种效果,目前一点儿也不卡顿,同时还保留了架构和数据的简洁。在做这个项目过程中,最简单地检测是否卡顿的方式就是选中若干个对象,能拖多快就拖多快,看拖动是否平滑(因为会带着箭头什么的一起变动)。目前说真的,Default 模式就足够高性能。 |
19 shakaraka 2024 年 4 月 18 日你试试吧 user 的 equal 值设置为() => true ,保你每次都会更新 |
21 chnwillliu 2024 年 4 月 18 日 via Android@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 。 |
22 chnwillliu 2024 年 4 月 18 日 via Android@Chad0000 这个 feature 就是前端大热的 signal ,就是为了做到细粒度更新 view 而引入的,将来可是要干掉 zonejs ,颠覆 Angular 自上而下 change detection 的。 |
23 ktqFDx9m2Bvfq3y4 2024 年 4 月 18 日 via iPhone@chnwillliu |
24 Mirachael 2024 年 4 月 19 日@wunonglin #19 试过了,不是设置 true ,应该时设置为 false ,确实可以更新视图 ``` user = signal<User>({} as User, { |
25 Mirachael 2024 年 4 月 19 日@chnwillliu #21 shallow clone 确实可以,但是实际情况时 object 通常是带有方法的类实例,浅拷贝会导致 user signal 丢失方法。所以这种情况应该 deepClone |
27 chnwillliu 2024 年 4 月 19 日 via Android@Mirachael 可以了解下 ngrx 的 singal store 和 deep signal 的概念哦 |
此内容由惯性聚合(RSS阅读器)自动聚合整理,仅供阅读参考。 原文来自 — 版权归原作者所有。