vue元件的遞迴自呼叫~程式碼思路分析

語言: CN / TW / HK

theme: channing-cyan

問題描述

在我們使用vue開發專案時,有時候需要用到遞迴思想去書寫程式碼。在一些UI元件中,我們也可以看到其中運用了遞迴的思想。比如:餓了麼UI中的el-tree元件、el-menu元件(動態選單欄)、el-Cascader元件。所以本文就舉個簡單的例子,來記錄一下遞迴思想,在vue元件中的使用。

什麼是遞迴

我們知道,一個函式可以呼叫別的函式,讓別的函式執行;而遞迴就是:

某個函式不去呼叫別的函數了,只調用自己,讓自身函式一直執行。

當然如果一直執行的話,會導致棧溢位問題,所以遞迴需要有一個結束的條件,當達到這個條件的時候,就讓函式不再呼叫自身,就停下來即可。感覺和迴圈有點類似

遞迴、迴圈、死迴圈的區別理解

  • 遞迴:無限套娃,當找到某個娃娃時,就不套了
  • 迴圈:一直套娃,要把所有的娃娃都套了一遍,才停止下來不套了
  • 死迴圈:一直套娃,但是娃娃一直套不完

    這裡是我個人的簡單理解,具體區別,以官方為準

vue元件中使用遞迴

效果圖

111.png

程式碼部分

App.vue元件入口頁面程式碼

```js

```

tree.vue遞迴元件中的程式碼

註釋如下圖:

333.png

程式碼如下:

```js

```

總結

遞迴還是比較耗費效能的,所以要妙用,不能濫用。