如何解決快應用堆疊溢位問題

現象描述

已知將透過 $element('id')  獲取到內容，賦值給成員變數，可能會引發堆疊溢位（RangeError: Maximum call stack size exceeded ），從而導致程式崩潰；同時，頁面 DOM  存在成員變數( 如 A ) 的引用，當該變數 A  發生變化時，即會引發堆疊溢位報錯問題，示例程式碼如下：

<template>
  <div id="content">
    <input type="button" @click="onTestClick" value="會引發堆疊溢位"/>
    <text>{{ stateText }}</text>
  </div>
</template>
<script>
  export default {
    private: {
      mContentNode: null,
      stateText: 'init state'
    },
    onReady() {
      /* 如將 $element('id')獲取到內容，賦值給成員變數，則有可能引發堆疊溢位 */
      this.mContentNode = this.$element('content')
    },
    onTestClick() {
      /* 頁面 DOM 存在成員變數的引用，當發生變化時，即是引發如上所述的一種必現方式 */
      this.stateText = 'new state'
    }
  }
</script>

這是因為賦值為 vm  屬性，會觸發大規模的資料驅動變化，導致內部出現異常迴圈，從而引發堆疊溢位報錯。

解決方法

只要不將 $element('id')  獲取到內容，賦值給成員變數，即可規避堆疊溢位問題；可以將其賦值給區域性變數，或頁面全域性變數，示例程式碼如下：

<script>
  let $gContentNode = null
  export default {
    private: {
      stateText: 'init state'
    },
    onReady() {
      /* 如將 $element('id')獲取到內容，賦值給區域性變數，或頁面全域性變數，則可規避堆疊溢位問題 */
      const cContentNode = this.$element('content')
      $gContentNode = this.$element('content')
    },
    onTestClick() {
      this.stateText = 'new state'
    }
  }
</script>

原文連結： https://developer.huawei.com/consumer/cn/forum/topic/0204465500063450107?fid=0101271690375130218

原作者：Mayism