<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函数