樹狀圖是一種常見的數據可視化方式，特別是在展示層級結構數據時非常實用。Vue作為一種流行的前端框架，提供了許多優秀的組件庫和工具，允許我們輕松創建漂亮的界面。在本文中，我們將探討如何使用Vue創建樹狀圖，并且我們會使用一個實際的例子演示如何處理樹狀結構數據。

為了開始創建樹狀圖，我們需要先準備一些數據。在我們的例子中，我們有一些地區，每個地區包含許多城市，每個城市又包含一些街區。

const data = [
{
name: '地區A',
children: [
{
name: '城市A1',
children: [
{ name: '街區A1' },
{ name: '街區A2' },
{ name: '街區A3' },
]
},
{
name: '城市A2',
children: [
{ name: '街區B1' },
{ name: '街區B2' },
]
},
]
},
{
name: '地區B',
children: [
{
name: '城市B1',
children: [
{ name: '街區C1' },
{ name: '街區C2' },
]
},
{
name: '城市B2',
children: [
{ name: '街區D1' },
{ name: '街區D2' },
{ name: '街區D3' },
]
},
]
},
]

數據是一個數組，每個元素都是一個包含名稱和子級的對象。如果一個元素沒有子級，則表示其是葉節點。我們可以使用遞歸方法來遍歷整個數據并構建樹狀結構。

在這個代碼塊中，我們使用Vue的組件來創建樹狀圖。我們通過prop傳遞數據（treeData）進入組件，并在組件內部遞歸渲染數據。如果數據有子級，則我們再次渲染子組件。

要使用我們的樹狀圖，我們只需要在Vue應用程序中添加Tree組件，如下所示：

最后，我們將在瀏覽器中運行應用程序以查看樹狀圖。我們可以看到我們的數據成功地呈現出來，每個節點都正確地位于其父節點下方。對于那些希望自定義UI的人來說，Vue還允許使用插槽(render function)，通過Vue插件來實現擴展。