vue-v-if用在组件上,为什么值为false时依然会加载该组件并传递数据

Question

父组件中引入children-component子组件,当子组件未隐藏时才加载该子组件.
但是我发现就算隐藏了子组件,child.data的数据依然能在子组件中拿到,绑定的事件也能执行,但是v-if为false时不是不会加载子组件吗?

代码如下:

<div v-for="child in parents" :key="child.id">
  <children-component
            ref="children"
            v-if="!child.hidden"
            :is="child.childType"
            :data="child.data">
            </children-component>
</div>

我在子组件的生命周期函数中输出this.data依然有被隐藏的组件的数据,即他依然是加载了组件
浏览器:chrome浏览器
系统:win10
另:使用手机浏览器打开该页面就不会加载数据了.

发现问题是移植的移动端代码被修改过...并不是连用了v-for v-if导致的,他们混用只会导致性能浪费,并不会产生这样的bug

Answer 1

所以vue在你同时有vif和vfor的时候都会善意的警告你不要这么玩...把数据处理好再来vfor..

Answer 2

请参考vuejs 风格指南之避免 v-if 和 v-for 用在一起

Answer 3

这里是我的移植代码有点问题...并不是v-if v-for混用导致的,他们混用只是会导致性能浪费,并不会产生这样的问题.