vue+iview 当v-for不渲染问题 因为遇到Modal组件

<template lang="pug">
    div#parent
      Button(@click="data.push(Math.random())") 添加
      span data：{{data}}
      div(v-for="indx in data") {{indx}}
      Modal
</template>
<script>
export default {
  data() {
    return {
      data: []
    };
  }
};
</script>

运行如上代码，当点击添加的时候data这个数组的确在不停的增加数据，但是那个v-for却只增加了一行 就再也不动了。明明应该时data钟有多少就应该渲染多少行

解决办法

1. 在v-for外面套一个div
2. 不要把Modal直接放在v-for后面 可以提前去

原因分析

1. 通过分析 vue的 updateChildren函数 当数据变化的时候 这个函数会进行新旧虚拟节点vNode进行 对比。并且如果有新的vNode的时候会执行 如下这个vue的函数来进行真实dom的更新

  function insert (parent, elm, ref$$1) {
    if (isDef(parent)) {
      if (isDef(ref$$1)) {
        if (ref$$1.parentNode === parent) { // 注意这里-
          nodeOps.insertBefore(parent, elm, ref$$1);
        }
      } else {
        nodeOps.appendChild(parent, elm);
      }
    }
  }

看到代码后面注释的这一行 。
ref

$$1：如果时我们这段代码的话 就会把Modal这个dom元素传进来 > 并想在它之前插入新的元素。这里有一个判断 ref$$ 1.parentNode === parent 如果Modal的附元素和v-for这个的父元素相等才会做插入操作。但是Modal这个元素又会被移动到body下面去，所以导致了界面不更新的问题。

注意

1. 这个例子代码刚开始出来会有一个undefined 请参考这个文章
   http://blog.csdn.net/tearsknow/article/details/78411672
2. 为什么点添加时还能渲染出一个，请研究vue中的updateChildren函数