共计 975 个字符,预计需要花费 3 分钟才能阅读完成。
景象形容
已知将通过 $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
正文完
发表至: appgallery-connect
2021-07-30