数据绑定

动态绑定数据

1. 创建元素 利用动态创建DOM方法 动态创建DOM对象
   • DOM回流(reflow):在页面中某个元素的插入 删除 位置 大小发生变化 那么会重新计算其他元素的位置 这样非常消耗性能
   • DOM重绘（repaint）:当页面中的元素背景 字体颜色发生变化时 那么浏览器需要对其进行重新绘制 这种现象称为重绘

for(let i = 0; i < ary.length;i++){
    let cur = ary[i];
    let newLi = document.createElement('li');
    newLi.innerHTML = 'name' + cur.name + 'age' + cur.age;
    ul.appendChild(newLi);
}

2. 利用文档碎片 一个通过DOM API创建的临时存放DOM元素的容器

let frg = document.createDocumentFragment();  //创建文档碎片
for(let i = 0; i < ary.length;i++){
    let cur = ary[i];
    let newLi = document.createElement('li');
    newLi.innerHTML = 'name' + cur.name + 'age' + cur.age;
    frg.appendChild(newLi);
}
ul.appendChild(frg);
frg = null; //当插入后 释放frg内存

3. 拼接字符串 + innerHTML

let str = '';
for(let i = 0;i <ary.length; i ++){
    let cur = ary[i];
    str +='<li>' + 'name' + cur.name + 'age:' + cur.age + '</li>';
}
console.log(str);
ul.innerHTML = str;

4. 模板字符串

let p = ``;
for(let i = 0;i<arr.length;i++){
    let num = arr[i];
    p +=`<li>
    <strong>name:${num.name}</strong>
      <strong>age:${num.age}</strong>
    </li>`
}
ul.innerHTML = p;