現象描述
已知將通過 $element('id') 獲取到內容，賦值給成員變量，可能會引發堆棧溢出（RangeError: Maximum call stack size exceeded），從而導致程序崩潰；同時，頁面 DOM 存在成員變量(如 A )的引用，當該變量 A 發生變化時，即會引發堆棧溢出報錯問題，示例代碼如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<
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') 獲取到內容，賦值給成員變量，即可規避堆棧溢出問題；可以將其賦值給局部變量，或頁面全局變量，示例代碼如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<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