angular 列表渲染机制
watchCollection：监听集合元素的变化，而不能监听到集合元素内部的属性变化，只要集合中元素的引用没有发生变化，则认为无变化。用这个api也可以监听普通对象的第一层属性变化。
watch：监听数据有没有发生变化，引用有无发生变化、原始类型数值有无发生变化等。除非指定第三个参数为true，否则不会对比对象的内层（多层）属性的变化，而仅仅对比引用。
ngRepeat的检测 = watchCollection + watch（第三个参数为true）。
默认情况下，ngRepeat使用列表元素对象的$$haskKey来标识关联对应的dom（angular会为不同引用的对象创建不同的$$hashKey），如果列表元素不是对象而是原始数据类型，则以元素的值来标识。在同一个列表中，标识必须唯一，否则报错，也可以通过track by xx 来自己指定标识的方式，如track by $index 就是用列表的索引来进行标识。
ngRepeat会为每个单元创建一个作用域，然后把当前循环的状态（$index，$first等）传递到这个作用域中，因为这个作用域是原型继承于外部作用域的，所以当ngRepeat出现嵌套的时候，可以通过ngInit把外层循环的index记录下来共内层循环使用：
<div ng-repeat="item in ones" ng-init="outerIndex=$index">
<span ng-repeat="item in twos" >the outer index is {{outerIndex }}</span> <br>
</div>
列表优化
默认情况下，当列表中的元素引用发生变化（脏检测时发现的，使用的是watchCollection），angular仅仅会把对应变化的元素item的dom进行移除，然后重新生成一个新的dom替换进去，其余不需要变化。这就意味着当整个列表都发生变化时，整个dom列表会全部移除，生成新的全部替换进去。
有没有办法改变了列表item的引用，却不生成新的dom进行替换呢？答案是可以的，但要指定track by。以下进行测试：
<body ng-app="app">
<div ng-repeat="item in ones">{{item}}</div>
<button ng-click="changeArr()">changeArr</button>
<button ng-click="getVal()">getVal</button>
</body>
<script>
var app = angular.module("app",[]);
app.run(function($rootScope){
$rootScope.ones = [{a:1},{a:2},{a:3}]; setTimeout(setVal,100); $rootScope.changeArr = function(){
$rootScope.ones[0] = {a:1,b:2};
}
$rootScope.getVal = function(){
console.log(document.querySelectorAll("div")[0].data)
console.log(document.querySelectorAll("div")[1].data)
}
});
function setVal(){
document.querySelectorAll("div")[0].data = 0;
document.querySelectorAll("div")[1].data = 1;
}
</script>
以上代码中，点击getVal，输出01，接着点击changeArr，更换了一个列表元素，界面上出现变化，接着点击getVal，输出undefined 1 。
结论：没有使用track by，当列表元素的引用被替换时，对应的dom也会被替换，之前绑定在上面的数据自然也就没了。
接下来使用track by 进行dom复用：
<div ng-repeat="item in ones track by item.a">{{item}}</div>
修改后，点击changeArr，界面发生变化，接着点击getVal，输出01 。
根据以上现象总结angular的列表渲染机制：
所以优化的策略就是，显式指定track by，能减少dom的创建，有利于dom的复用。
angular 列表渲染机制的更多相关文章
- angular,vue,react的基本语法—双向数据绑定、条件渲染、列表渲染、angular小案例
基本语法: 1.双向数据绑定 vue 指令:v-model="msg" react constructor(){ this.state{ msg:"双向数据绑定" ...
- 03-Vue入门系列之Vue列表渲染及条件渲染实战
3.1. 条件渲染 有时候我们要根据数据的情况,决定标签是否进行显示或者有其他动作.最常见的就是,表格渲染的时候,如果表格没有数据,就显示无数据.如果有数据就显示表格数据. Vue帮我们提供了一个v- ...
- 前端MVC Vue2学习总结（四）——条件渲染、列表渲染、事件处理器
一.条件渲染 1.1.v-if 在字符串模板中,如 Handlebars ,我们得像这样写一个条件块: <!-- Handlebars 模板 --> {{#if ok}} <h1&g ...
- Vue入门系列（三）之Vue列表渲染及条件渲染实战
Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一) http://www.cnblogs.com/gdsblog/p/78 ...
- vue基础——列表渲染
列表渲染 用 v-for 把一个数组对应为一组元素 我们用 v-for 指令根据一组数组的选项列表进行渲染.v-for 指令需要使用 item in items 形式的特殊语法, items 是源数据 ...
- Vue 列表渲染及条件渲染实战
条件渲染 有时候我们要根据数据的情况,决定标签是否进行显示或者有其他动作.最常见的就是,表格渲染的时候,如果表格没有数据,就显示无数据.如果有数据就显示表格数据. Vue 帮我们提供了一个v-if的指 ...
- vue 条件渲染与列表渲染
本文是对官方文档的整理 因为 v-if 是一个指令,所以必须将它添加到一个元素上.但是如果想切换多个元素呢?此时可以把一个 <template> 元素当做不可见的包裹元素,并在上面使用 v ...
- 【03】Vue 之列表渲染及条件渲染
3.1. 条件渲染 有时候我们要根据数据的情况,决定标签是否进行显示或者有其他动作.最常见的就是,表格渲染的时候,如果表格没有数据,就显示无数据.如果有数据就显示表格数据. Vue帮我们提供了一个v- ...
- vue基础---列表渲染
首先简单回顾下v-for‘指令 <ol id="list_area"> <li v-for="book in books">{{book ...
随机推荐
- Tyvj1474 打鼹鼠
Description 在这个“打鼹鼠”的游戏中,鼹鼠会不时地从洞中钻出来,不过不会从洞口钻进去(鼹鼠真胆大……).洞口都在一个大小为n(n<=1024)的正方形中.这个正方形在一个平面直角坐标 ...
- log4j.xml中Filter的用法
前言 log4j中常用的Filter分为四种:DenyAllFilter.LevelMatchFilter.LevelRangeFilter.StringMatchFilter. 当appender匹 ...
- Flask (四) 模型进阶
模型进阶 多对多关联 用户收藏电影,一个用户可以收藏多部电影, 一部电影可以被不同的用户收藏, 是一个多对多关系. # 中间表(不是模型) collects = db.Table('collect ...
- AU3中BitAnd与Win32汇编中的&按位进行与操作的本质思考
心越静,思考的越透彻.不要着急,宇宙有求必应!我可能是最笨的才会写出来进行思考,写出来至少自己在碰到这些本质上的问题不会再度卡壳.本着"没有交流的思考不是完整的思考"的原则,我将这 ...
- Gym - 101810H ACM International Collegiate Programming Contest (2018)
bryce1010模板 http://codeforces.com/gym/101810 #include <bits/stdc++.h> using namespace std; #de ...
- python学习之串口编程
# coding=utf-8import serial ser=serial.Serial('com1',9600)ser.write(b"hello")while 1: ser. ...
- 数据库 join
数据库 join 最近有个项目用到了数据库,写 sql 时有联表查询,不知道怎么写,怎过滤,查了一些资料,补充了一些知识点. 以下是链接: 维基百科 JOIN关联表中ON,WHERE后面跟条件的区别 ...
- Eclipse Mars.2集成Maven 3.5.4
准备材料: Eclipse Mars.2 Release (4.5.2): 官网戳:https://www.eclipse.org/downloads/ Maven 3.5.4: http://ma ...
- freebsd安装ports
/etc/portsnap.conf 里面更改 SERVERNAME=portsnap.hshh.org portsnap的命令比较少 fetch 获取数据 extract 释放全部ports upd ...
- webpack前端构建工具学习总结（三）之webpack.config.js配置文件
Webpack 在执行的时候,除了在命令行传入参数,还可以通过指定的配置文件来执行.默认情况下,会搜索当前目录的 webpack.config.js 文件,这个文件是一个 node.js 模块,返回一 ...