如何解決快應用堆棧溢出問題

現象描述

已知将通過 $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') 擷取到内容，指派給成員變量，即可規避堆棧溢出問題；可以将其指派給局部變量，或頁面全局變量，示例代碼如下：

copy

​<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>​

原作者：Mayism