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钟有多少就应该渲染多少行

解决办法

在v-for外面套一个div

不要把Modal直接放在v-for后面 可以提前去

原因分析

通过分析 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);
}
}
}

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

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

注意

这个例子代码刚开始出来会有一个undefined 请参考这个文章

http://blog.csdn.net/tearsknow/article/details/78411672

为什么点添加时还能渲染出一个，请研究vue中的updateChildren函数