Vue 子组件被不断销毁和重建

[zhiqiang]

vue 中，组件 parent 引用了子组件 sub:

<template>
    <div @click="ajax">
    	<sub :xxx="xxx" />
    </div>
<template>

点击后会有一些ajax拉取数据的操作，但和xxx变量无关，这时候可以观察到sub组件被不断重建和销毁（在 sub 的destroyed和created里写console.log输出）。

但我确保xxx没有发生变动。在parent里watch: { xxx() {console.log('xxx changed'); }} 也看不到输出。

请问可能是什么原因导致这个？

还有一个诡异的现象，如果切换到 Vue 调试窗口（ chrome 开发模式），展开到接近 parent 组件，这种情况就会消失。而且之后再也不会出现。

但关掉开发者模式再刷新，现象仍然继续。

[ChanKc]

ajax 的一开始触发了一个 v-if 销毁，回调再生成

[jklopsdfw]

不如在 parent 组件的 destroyed 里也打印一下

[ChanKc]

#1 换成数组 v-for 也有可能

[zhiqiang]

@jklopsdfw parent 没有 created 和 destroyed，试过了。

[zhiqiang]

@ChanKc sub 没有 v-if

[ljpCN]

建议贴出源码或者提供一个最小 demo

[zhiqiang]

@ljpCN 抱歉，整个代码比较大，而且这种 bug 看上去不是简单 bug，我也没法搞一个出来。发出来看看大家有没有遇到同样情况，然后给点提示。

一些点：

* sub 内部递归调用了 parent 组件。
* sub 和 parent 都 mixins 了同一个东西。

除了 sub 被不断销毁和重建，其它功能和显示都正常。

[zhiqiang]

还有一个诡异的情况，如果切换到 Vue 调试窗口（ chrome 开发模式），展开到接近 parent 组件，这种情况就会消失。而且之后再也不会出现。

但关掉开发者模式再刷新，现象仍然继续。

感觉像 sub 这个组件被垃圾回收了一样。

[XiaoxiaoPu]

@zhiqiang sub 的代码需要简单提供下吧。按你提供的信息：「 sub 内部递归调用了 parent 组件」，那 sub 内肯定有类似 v-if v-for 的东西（不然会死循环），“不断重建和销毁的 sub 组件” 可能是更内层的组件。

[cuzfinal]

给 div 写一个固定的 key

[zhiqiang]

@XiaoxiaoPu sub 内肯定有 if-else，但我确信销毁重建的的就是 sub 组件本身。

[zhiqiang]

@cuzfinal 我给 div 和 sub 都加上了 key，不起效果。

[BreadKiller]

把 sub 内的逻辑精简一下，比如删除 for if else,看看还有没有问题，如果还是有问题估计问题就出在 parent 上了