V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
zhiqiang
V2EX  ›  Vue.js

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

  •  
  •   zhiqiang · 2020-07-16 18:06:51 +08:00 · 2909 次点击
    这是一个创建于 1602 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

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

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

    第 1 条附言  ·  2020-07-16 18:50:33 +08:00
    还有一个诡异的现象,如果切换到 Vue 调试窗口( chrome 开发模式),展开到接近 parent 组件,这种情况就会消失。而且之后再也不会出现。

    但关掉开发者模式再刷新,现象仍然继续。
    13 条回复    2020-07-17 10:12:46 +08:00
    ChanKc
        1
    ChanKc  
       2020-07-16 18:13:40 +08:00 via Android
    ajax 的一开始触发了一个 v-if 销毁,回调再生成
    jklopsdfw
        2
    jklopsdfw  
       2020-07-16 18:14:33 +08:00 via iPhone
    不如在 parent 组件的 destroyed 里也打印一下
    ChanKc
        3
    ChanKc  
       2020-07-16 18:16:29 +08:00 via Android
    #1 换成数组 v-for 也有可能
    zhiqiang
        4
    zhiqiang  
    OP
       2020-07-16 18:24:50 +08:00
    @jklopsdfw parent 没有 created 和 destroyed,试过了。
    zhiqiang
        5
    zhiqiang  
    OP
       2020-07-16 18:25:27 +08:00
    @ChanKc sub 没有 v-if
    ljpCN
        6
    ljpCN  
       2020-07-16 18:34:07 +08:00 via Android
    建议贴出源码或者提供一个最小 demo
    zhiqiang
        7
    zhiqiang  
    OP
       2020-07-16 18:37:42 +08:00
    @ljpCN 抱歉,整个代码比较大,而且这种 bug 看上去不是简单 bug,我也没法搞一个出来。发出来看看大家有没有遇到同样情况,然后给点提示。

    一些点:

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

    除了 sub 被不断销毁和重建,其它功能和显示都正常。
    zhiqiang
        8
    zhiqiang  
    OP
       2020-07-16 18:45:39 +08:00
    还有一个诡异的情况,如果切换到 Vue 调试窗口( chrome 开发模式),展开到接近 parent 组件,这种情况就会消失。而且之后再也不会出现。

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

    感觉像 sub 这个组件被垃圾回收了一样。
    XiaoxiaoPu
        9
    XiaoxiaoPu  
       2020-07-16 18:50:01 +08:00
    @zhiqiang sub 的代码需要简单提供下吧。按你提供的信息:「 sub 内部递归调用了 parent 组件」,那 sub 内肯定有类似 v-if v-for 的东西(不然会死循环),“不断重建和销毁的 sub 组件” 可能是更内层的组件。
    cuzfinal
        10
    cuzfinal  
       2020-07-16 18:50:23 +08:00
    给 div 写一个固定的 key
    zhiqiang
        11
    zhiqiang  
    OP
       2020-07-16 18:52:04 +08:00
    @XiaoxiaoPu sub 内肯定有 if-else,但我确信销毁重建的的就是 sub 组件本身。
    zhiqiang
        12
    zhiqiang  
    OP
       2020-07-16 18:53:44 +08:00
    @cuzfinal 我给 div 和 sub 都加上了 key,不起效果。
    BreadKiller
        13
    BreadKiller  
       2020-07-17 10:12:46 +08:00
    把 sub 内的逻辑精简一下,比如删除 for if else,看看还有没有问题,如果还是有问题估计问题就出在 parent 上了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3265 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 12:27 · PVG 20:27 · LAX 04:27 · JFK 07:27
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.