AppGallery Connect：如何解決快應(yīng)用堆棧溢出問題

現(xiàn)象描述

已知將通過 $element('id') 獲取到內(nèi)容，賦值給成員變量，可能會引發(fā)堆棧溢出（RangeError: Maximum call stack size exceeded），從而導(dǎo)致程序崩潰；同時，頁面 DOM 存在成員變量(如 A )的引用，當(dāng)該變量 A 發(fā)生變化時，即會引發(fā)堆棧溢出報錯問題，示例代碼如下：

<template>

  <div id="content">

    <input type="button" @click="onTestClick" value="會引發(fā)堆棧溢出"/>

    <text>{{ stateText }}</text>

  </div>

</template>

<script>

  export default {

    private: {

      mContentNode: null,

      stateText: 'init state'

    },

    onReady() {

      /* 如將 $element('id')獲取到內(nèi)容，賦值給成員變量，則有可能引發(fā)堆棧溢出 */

      this.mContentNode = this.$element('content')

    },

    onTestClick() {

      /* 頁面 DOM 存在成員變量的引用，當(dāng)發(fā)生變化時，即是引發(fā)如上所述的一種必現(xiàn)方式 */

      this.stateText = 'new state'

    }

  }

</script>

這是因為賦值為 vm 屬性，會觸發(fā)大規(guī)模的數(shù)據(jù)驅(qū)動變化，導(dǎo)致內(nèi)部出現(xiàn)異常循環(huán)，從而引發(fā)堆棧溢出報錯。

解決方法

只要不將 $element('id') 獲取到內(nèi)容，賦值給成員變量，即可規(guī)避堆棧溢出問題；可以將其賦值給局部變量，或頁面全局變量，示例代碼如下：

<script>

  let $gContentNode = null

  export default {

    private: {

      stateText: 'init state'

    },

    onReady() {

      /* 如將 $element('id')獲取到內(nèi)容，賦值給局部變量，或頁面全局變量，則可規(guī)避堆棧溢出問題 */

      const cContentNode = this.$element('content')

      $gContentNode = this.$element('content')

    },

    onTestClick() {

      this.stateText = 'new state'

    }

  }

</script>