快应用发生堆栈溢出怎么办？

纾寒 2021-09-17 11:12:29 浏览数 (2292)

一段简短的代码片段，描述了 $element('id') 被分配给成员变量并发生堆栈溢出的问题，以及修复它的解决方案。

将通过获取的内容$element('id')赋值给成员变量时，RangeError: Maximum call stack size exceeded可能会发生栈溢出（），导致程序崩溃。如果某个 DOM 存在成员变量引用，并且成员变量发生变化，也会发生堆栈溢出。示例代码如下： <template>

<template>
  <div id="content">
    <input type="button" class="button" @click="onTestClick" value="Stack overflow occurs."/>
    <text>{{ stateText }}</text>
  </div>
</template>
<script>
  export default {
    private: {
      mContentNode: null,
      stateText: 'init state'
    },
    onReady() {
      /* When data obtained by $element('id') is assigned to a member variable, a stack overflow may occur. */
      this.mContentNode = this.$element('content')
    },
    onTestClick() {
      /* To reproduce this problem, change a member variable when member variable references exist for a DOM. */
      this.stateText = 'new state'
    }
  }
</script>

原因是赋值会导致海量的数据变化。从而导致内部异常循环，导致栈溢出。

解决方案

为了防止堆栈溢出，你可以将通过获取的数据分配给$element('id')局部或全局变量而不是成员变量。示例代码如下：

<script>
  let $gContentNode = null
  export default {
    private: {
      stateText: 'init state'
    },
    onReady() {
      /* You can assign the data obtained through $element('id') to a local or global variable to prevent the stack overflow. */
      const cContentNode = this.$element('content')
      $gContentNode = this.$element('content')
    },
    onTestClick() {
      this.stateText = 'new state'
    }
  }
</script>