一段简短的代码片段，描述了 $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>
