vue动态添加domv-for

答

v-for是vue.js中的指令，用于遍历数组或对象中的数据，动态添加dom。使用v-for指令时，需要提供一个数组或对象，它会根据提供的数据来渲染相应的dom结构。v-for指令的语法是：v-for="(item,index) in items"，其中items是要遍历的数组或对象，item是当前遍历到的元素，index是当前遍历到的元素的索引。使用v-for指令可以快速的渲染出dom结构，而不用写大量的dom结构代码。

1、func1中涉及到了页面dom元素的 *** 作，如果不放在onload事件中而是直接运行，那么这时候页面的dom元素（比如ul）极可能尚未加载到内存，会造成 *** 作失败。放在onload中，则可百分百保证整个页面的dom结构都已加载到内存，这样就能保证运行成功了。

2、alert()是系统级的模态提示框，它在显示的时候，整个脚本都会暂停运行（或者叫“挂起”），关闭提示框后才会继续运行。也就是说，表面上看func2是比func1先运行的，但其实func1确实是先运行的，但即使电脑的运行速度再快，运行总是要花时间的，而就在func1努力运行但尚未显示出结果时，func2的alert已经d出来并把整个脚本暂停了，这样func1就僵在那了，看起来就好像是它还没运行一样。

3、没有完美的解决办法，要么你可以自建一个非模态的提示框，要么可以采用延时执行的方式，比如：

window.onload=function(){

    func1()

    setTimeout(func2,100)

}

有些事情只在节点被插入到真正的document时才发生，这是document fragment更快的基本原因。document fragment从机制上比较接近innerHTML，只是前者确保了dom结构。其他大量的事情其实要等到被插入document之后才发生。

比如当你append到document时，被append进去的元素的样式表的计算是同步发生的，此时getComputedStyle可以得到样式的计算值。而append到document fragment，没样式表什么事，可以省下这个计算。再如，script节点只有append到document时，才会真的parse和执行。

注意阻塞UI不是阻塞reflow。如果你在append到document之后去访问下clientHeight这样的属性，其实会block住直到reflow完成。但是如果你不访问这类属性，浏览器没有必要在这个点进行强制reflow，而可以等待到脚本执行完。

现代浏览器的优化做得更好，所以类似的，如果你在append到document之后没有访问getComputedStyle之类的，浏览器也可以把样式表计算推迟到脚本执行之后。所以你测下来 append 到 document fragment 和直接 append 到 document 上就差不多了。尽管通常情况下，性能现在没有很大差异，但是作为靠谱程序员，你在追加dom时，用document fragement，是在代码层面明确：这里插入时，不需要（不应该）发生插入document的效果。所以该写的地方还是要写。

---