使用track by $index 后插件加载不出来

最新推荐文章于 2020-07-04 19:15:52 发布
最新推荐文章于 2020-07-04 19:15:52 发布
阅读量448 收藏
点赞数
分类专栏： Javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yzn77/article/details/77773979
版权

track-by 功能，如果修改数据中的_uid不变，数据也不变的话，dom不重新渲染。

若无track-by，则无论数据是否改变，dom都重新渲染，可以打开firebug试试看哦。

无track-by情况：数据修改时，无论值是否被修改，dom都被重新渲染（控制台可以看到）

加入track-by属性：数据修改时，不变数据所在的dom不被重新渲染，已改变的数据所在dom才被重新渲染






参考链接：https://cnodejs.org/topic/5811769c1a9a7d990953119e

我是洋葱啊
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Angular性能优化之——trackBy
KenkoTech的博客
11-25 890
Angular Trackby
Angular 由一个bug说起之二：trackBy的一点注意事项
最新发布
KenkoTech的博客
11-16 1726
接下来我改变一下数据，调用一下changeData，把张三变成未婚，王五变成已婚。数据正常更新了，这是没有加trackBy的时候，现在添加一下trackBy。组件没有重新生成，数据也没有更新，这是因为test组件的更新机制有问题。我在这里循环一个数组，显示人物的资料，姓名，年龄，婚否。接下来我用一个例子来演示一下。点击changeData。
trackby_使用trackBy启动流程
最佳 Java 编程
07-04 394
trackby 仍然沿用我的Corda Services趋势，我还有其他一些技巧可帮助您的CorDapp顺利工作。 这次，我们将重点关注使用trackBy从服务内部启动流以及如果您不小心可能会引发的离散问题。 这应该是一个相对简短的职位，因为我可以依靠以前的职位： Corda Services 101和Corda Services的 异步流程调用 。 在Corda Services的“异步...
使用trackBy启动流程
最佳 Java 编程
06-11 171
仍然沿用Corda Services的趋势，我还有其他一些技巧可帮助您的CorDapp顺利工作。 这次，我们将重点关注使用trackBy从服务内部启动流以及如果您不小心可能会引起的离散问题。 这应该是一个相对简短的职位，因为我可以依靠之前的职位： Corda Services 101和Corda Services的 异步流程调用 。 在Corda Services的“异步流”调用中找到的...
在Angular中利用trackBy来提升性能
weixin_30820151的博客
01-26 292
在Angular的模板中遍历一个集合（collection）的时候你会这样写： <ul> <li *ngFor="let item of collection">{{item.id}}</li> </ul> 有时你会需要改变这个集合，比如从后端接口返回了新的数据。那么问题来了，Angular不知道怎么跟踪这个集合里面的项，不知道哪些该添加哪些该修...
简单理解vue中track-by属性
09-01
当你无法或不想在数据对象中添加唯一标识时，可以使用`track-by="$index"`。但这种方式的缺点是，如果数组顺序改变，即使元素本身没有变化，它们对应的DOM位置也可能改变，导致不必要的渲染。 5. **模板中的`track-...
AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题
10-20
需要注意的是，虽然`track by $index`能解决问题，但它不适用于数据源在生命周期内动态变化的情况，因为索引可能会改变，导致视图与模型之间的关联混乱。 总的来说，`ng-repeat`的`track by`子句是解决重复数据遍历...
TrackTrack-crx插件
04-03
对于远程工作的员工或者自学者来说，这款插件更是必不可少的工具，因为它能协助建立更有效的工作习惯，防止无意识地浪费时间。 TrackTrack的安装过程相对简单，用户只需将提供的TrackTrack.crx文件导入到支持CRX...
AngularJs ng-repeat 嵌套如何获取外层$index
10-21
<tr ng-repeat="row in rows track by row.id" ng-init="outerIndex = $index"> <td ng-repeat="col in row.columns track by col.id"> <span ng-if="col.id == 0" ng-bind="outerIndex"></span> ``` 通过这种...
angular中*ngfor中trackBy的用法
拓宇
02-05 6177
On each ngDoCheck triggered for the ngForOf directive Angular checks what objects have changed. It uses differs for this process and each differ uses trackBy function to compare the current obje
AngularJS中的track-by="$index理解
革命尚未成功同志还需努力的博客
12-26 5221
无track-by情况：数据修改时，无论值是否被修改，dom都被重新渲染（控制台可以看到）加入track-by属性：数据修改时，不变数据所在的dom不被重新渲染，已改变的数据所在dom才被重新渲染 track-by的两种使用方法： 使用数据中某唯一字段，例如_uid id="example"> v-for="item in items" track-by="_uid">
AngularJS最佳实践: 请小心使用 ng-repeat 中的 $index
weixin_34185560的博客
01-23 1064
“有客户投诉，说在删除指定的某条记录时,结果删掉的却是另外一条记录!” 看起来是个很严重的BUG。 有一次我们在工作中碰到了这个问题。 要定位这个BUG非常麻烦, 因为客户也不清楚如何重现这个问题。 后来发现这个Bug是由于在ng-repeat中使用了$index引发的。下面一起来看看这个错误是如何引发的, 以及如何避免这种bug产生,然后说说我...
AngularJS中track by的作用
yaojxing的博客
06-30 1093
angular中track by的使用
(十二)ng-repeat指令中使用track by子语句解决重复数据遍历的错误
aty
03-06 3万+
我们可以使用ng-repeat指令遍历一个javascript数组，当数组中有重复元素的时候,angularjs会报错: Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: user in user
vue数组优化的两种方法track-by和key 这两个有什么区别
ion_L的博客
10-09 2413
1.  v-bind:key="  " 是vue2.x提出的，1.x的写法是track-by=" " 2、（1）vue1.x中v-for不能显示重复数据，要在v-for的元素内定义track-by="$index"，即以序号为索引，如此当增加或者删除数据，view都会跟着改变。但是需要注意如此修改的数据并不能同步到页面，因为其index并没有改变。如下： &lt;!DOCTYPE html&...
AngularJS track by $index引起的思考
weixin_30736301的博客
11-04 135
今天写了一段程序，只是一个简答的table数据绑定，但是绑定select的数据之后，发现ng-change事件失去了效果，不知道什么原因。 主要用到的代码如下： <div id="right" ng-app="myApp" ng-controller="targetControl"> <select ng-model="indexSelect" data-size...
AngularJS的orderBy和track by的同时使用问题
12-12 1万+
在项目中，遇到一个问题，Angular中的ng-repeat中，track by和order by同时使用时候，order by失效了。 我们先来看一下ng-repeat的工作原理。 这里有一个Demo: 1.原始状态 index.html<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here
angular中ng-repeat的track by 的使用（$index）
Eighteen Z
05-08 1万+
在angular中使用ng-repeat时数组中有重复元素 当我们在循环的数组中存在有重复的元素时候，angular的ng-repeat就会报错，那是因为其不允许collection有相同的id（相同的元素会形成相同的id）出现。而基本的数据类型它的id就是它自身的值。 我们要避免这种情况通常会使用track by $index 来让其生成自己不同的id，这样是最常用的直接通过索引来生成id。...
在使用angularjs过程，ng-repeat中track by的作用
热门推荐
小Y
07-21 7万+
ng-repeat中 div ng-repeat="links in slides"> div ng-repeat="link in links track by $index">{{link.name}}div> div> Error: [ngRepeat:dupes]这个出错提示具体到题主的情况，意思是指数组中有2个以上的相同数字。ngRepeat不允许collectio
track by $index
06-03
这是一个 AngularJS 中的 ngRepeat 指令的语法，用于跟踪循环中的...使用 track by $index 指定了如何跟踪循环中的每个项目，即使用当前项的索引作为跟踪标识。这在处理动态列表时非常有用，可以确保正确地更新列表项。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值