关于appendChild()的相关问题

Question

  function node2Fragment(node,vm){
      //这里是dom劫持，vue会新建一个文档片段来替换dom中本来的结点
      var flag=document.createDocumentFragment();
      //子节点
      var child;
      while(child=node.firstChild){
          //开始编译每个结点
          compile(child,vm);
          //**appendchild方法会自动删除node对象的child结点
          flag.appendChild(child)
      }
      return flag;
  }

在while循环中，看不太懂循环条件是如何变化的，也就是注释那句话“appendchild方法会自动删除node对象的child节点”不是很理解？望大神解释一下。

Answer 1

这段代码按语义可能是vue框架渲染双向绑定 （viewModel-> view）的过程，
原理就是把原来类似这种dom

<div id="app">
  <span v-bind:title="message"></span>
</div>

渲染成

<div id="app">
  <span>this is a message</span>
</div>

关于appendChild()请移步MDN参考其文档
https://developer.mozilla.org...

附注 :如果被插入的节点已经存在于当前文档的文档树中,则那个节点会首先从原先的位置移除,然后再插入到新的位置.如果你需要保留这个子节点在原先位置的显示,则你需要先用Node.cloneNode方法复制出一个节点的副本,然后在插入到新位置.

Answer 2

这段代码本身和Vue没什么关系吧

题主只需要明白createDocumentFragment的用法即可，该方法用于创建一个文档片段，被添加到文档中时，会自动移除掉该文档片段的根元素(本身也就是生成文档片段时产生的)，所以说会移除child节点(即本例的根元素)。

手机码字，参考资料还请自行搜索

P.S. 反对楼上，不反对内容正确性，只是这题和appendChild用法或Vue应该没什么关系