请教下 angular computed 相关的问题
使用 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
其实是想试下angular的新特性signal computed文档
看文档,我理解为,signal更新后,任何依赖此signal的computed也会更新,文档里有原话。
const count: WritableSignal
const doubleCount: Signal
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.
感觉是 computed object/array signal tracking 算法的问题. 我查了半天文档也没有查到原因. 代码在这, 暂时不太能看懂 github.com/angular/angular/tree/16.2.12/packages/core/src/signals
你这种还不如这样:{{user.address.length}}。user 来自 userService ,这个对象一直不变,登录修改里面的值。这样肯定可行。你那个主要问题是不确定什么时间会改变,会导致 Angular 不断调用才能判断。
我用 Angular 这么多年,主要领悟就是能共享对象就不要传什么方法。然后在其他地方替换对象或更新它的值。比计算要高性能,也不要用 get/set 属性,这个会比一般的变量浪费性能因为需要计算才能拿到值,直接给字段,省去重复调用的过程。
原因是你的 user 是同一个,你虽然设置了 addresses ,但是实际的 user 是没有变化的。你要做的是把 user 里的 addresses 也设置 signal 。
Create a computed Signal which derives a reactive value from an expression.angular 说了计算的是 signal参考 angular.io/guide/signals
你在 update user address 时,user 这个 signal 并没有变 dirty ,自然 computed 不会重新计算。
调用了 signal 的 update 方法,怎么变 dirty
signal 相当于默认有 rxjs 的 distinctUntilChanged ,你第二次 emit 同一个 object reference 会被 skip 掉的。
自定义 signal 判等方式,或者 update address 的时候把整个 user update 成另一个 object reference ,好比 redux / ngrx 处理的方式。
#3 这是 angular 的新特性 signal ,如果在模板里获取 signal 的当前值,需要像方法一样调用。比如 dataService.user().addresses 。这个 user 是 signal ,不是方法。另外,你说模板不要传方法,其实是更新策略选择的问题。
#9 我觉的跟 user 的 object reference 变没变没关系,因为这种写法是可以更新视图的 addresses = computed(() => { const user = this.dataService.user(); // 直接返回 user.addresses ,页面会更新 return user.addresses; });
#11你这个返回的是 object 了,后面改变的也是 object ,那么不管它来自哪里,都能触发更新。我倒是没注意这个新的 Feature ,但我觉得它可能会性能差。怎么说呢,我在做一个白板应用,用 Angular 管理成千的节点渲染出来,目前没有使用 Push 模式,有一次我大量将 field 改成了 getter/setter ,结果性能直线下降产生了明显卡顿感。所以我后面的实践都是能直接给 Field 就直接给,哪怕 getter 这种不计算的也是需要调用后才知道是否改变,会导致性能下降。你的这个 Feature 就算没导致性能下降,但会导致写法过于混乱,跟直接绑定对象或属性比,不够简洁直观。
#9 你说的对,浅拷贝还不行,必须使用深拷贝,因为在 computed 里使用的都是 addresses ,我使用 lodash 的 cloneDeep 方法就可以 addAddress() { this.user.update((u) => { const addr = new Address('test', '20000'); u.addAddress(addr); return cloneDeep(u); }); }
#12 你应该就是没有使用 push 模式,因为默认的更新策略就是会把组件树的所有节点都检查一遍,跟使用 getter/setter 没有关系,你可以看下这篇文章 juejin.cn/post/6844904017836032007
#13 但是又无法解释,不使用深拷贝,只返回 user.addresses 时,视图能更新这种情况。。。
#14我知道启用 Push 会更好,但我的问题是我在未遇到性能问题前我只想保持简洁高效,能用 Push 最好但比较繁琐,带来不必要的心智负担。我的 Default 模式下,将 Field 改成了 getter/setter 之后,直接导致性能严重下降:这已经明确证明了是与之前 Angular 能直接拿到对象或值相比,getter/setter 需要 Angular 每次都调用才能拿到值对比,而不是值就已经在它的处理层,只需要看值是否改变而已。我目前基于 Default 模式做了很多框架简化开发,并没有引起性能问题,我又不是做专业组件所以从来没弄过 Push 模式。
#14我做了很长时间的 WPF 和 Xamarin 应用,它们使用的就是 MVVM 设计,而且只有 Push 模式,我倒是羡慕 Angular 有主动检查而且不太影响性能的这种做法,这样能使很多事情大大简化。我做的白板需要同时渲染上千个节点在 SVG 面板中,实现各种效果,目前一点儿也不卡顿,同时还保留了架构和数据的简洁。在做这个项目过程中,最简单地检测是否卡顿的方式就是选中若干个对象,能拖多快就拖多快,看拖动是否平滑(因为会带着箭头什么的一起变动)。目前说真的,Default 模式就足够高性能。
#11 默认比较方法就是 Object.Is 呀,怎么没关系啊? github.com/angular/angular/blob/a5b5b7d5ef84b9852d2115dd7a764f4ab3299379/packages/core/primitives/signals/src/equality.ts#L17解决办法上面都说啦1 、返回一个新的 user2 、将 addresses 也设置为 signal
你试试吧 user 的 equal 值设置为() => true ,保你每次都会更新
在以前的 v16 ,signal 是有三个方法,set ,update ,mutate 。set 、update 这两个设置之后,是会运行 equal 方法比较值的引用是否变化,才决定更新。mutate 相当于使用后一定更新,但是这个 mutate 已经下线了 github.com/angular/angular/issues/52735#issuecomment-1804195570 github.com/angular/angular/pull/52348
今天领导让我将 SQL Server 2022 的几十张表转成 C# 的 Class ,本想着可以到网上找个工具生成一下就行了,但是找了好久并没有发现有可以直接使用的工具。 各…
新闻来源:Computer World Sun公司的JRuby团队正在离开他们的老东家Sun,投奔Engine Yard公司。他们声称这是因为Oracle并购Sun后的前途不明…
之前的 windows 11 电脑频繁弹窗来自微软的广告,不是提示我他那逼人工智能助手,就是提示我左下角可以看新闻,心心念念的小冰么也再也不回来,一怒之下给电脑装了 Ubunt…