关于appgallery-connect:如何解决快应用堆栈溢出问题

景象形容
已知将通过 $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/...
原作者：Mayism