keep-alive 溢出报错

Question

老师您好，我这边代码不使用keep-alive包裹三个子组件的时候能够正常显示，为什么包裹了keep-alive之后就报错了呢？

Uncaught RangeError: Maximum call stack size exceeded

以下是我的代码：

<template>
  <div>
    <button @click="changeState('A')">A</button>
    <button @click="changeState('B')">B</button>
    <button @click="changeState('C')">C</button>

    <keep-alive>
      <keep-alive-state-a v-if="state==='A'" />
      <keep-alive-state-b v-if="state==='B'" />
      <keep-alive-state-c v-if="state==='C'" />
    </keep-alive>
  </div>
</template>

<script>
import KeepAliveStateA from './KeepAliveStateA.vue'
import KeepAliveStateB from './KeepAliveStateB.vue'
import KeepAliveStateC from './KeepAliveStateC.vue'

export default {
  name: 'KeepAlive',
  components: {
    KeepAliveStateA,
    KeepAliveStateB,
    KeepAliveStateC
  },
  data () {
    return {
      state: 'A'
    }
  },
  methods: {
    changeState (state) {
      this.state = state
    }
  }
}
</script>

<style>

</style>

Answer 1

双越 2021-07-17 22:20:28

你在各个 keepAlive 组件的 mouted 里加一个 debugger ，看他们是否每次都重新渲染？

先确定一下这个

• 提问者 慕后端3144443 #1

  去掉三个字组件外部的<keep-alive>，加了debugger之后有在重新渲染，刷新之后初始值state: 'A'就会有断点，resume断点，点击B之后打印'A销毁'，出现B的断点，resume之后会打印'B挂载'；但是外部加了<keep-alive>还是会报溢出

• 双越 回复 提问者 慕后端3144443 #2

  比较怪异，一时看不出哪里的问题。你直接运行课程的代码，看会怎样？

• 提问者 慕后端3144443 回复 双越 #3

  课程代码运行正常，我又重新写了一遍，运行OK了，谢谢老师！

点开查看后面3条评论