技術文章 » vue為什麼只有一個根標籤

vue為什麼只有一個根標籤

2022-07-20 22:01:02

vue只有一個根標籤的原因：1、從查詢和遍歷DOM的角度來說，如果有多個根，那麼查詢和遍歷DOM的效率會很低；2、從Vue本身來說，如果說一個元件有多個入口多個根，那就意味著使用者的元件還可以進一步拆分成多個元件，進一步元件化，會降低程式碼之間的耦合程度。

本教學操作環境：windows7系統、vue3版，DELL G3電腦。

vue為什麼要求元件模板只能有一個根元素？下面一起來了解一下。

Vue 範例

首先，我覺得這個問題要先從 Vue 的範例開始講起。Vue 的範例一般都是長成下面這個樣子，不同的只是 id 名的不同。

<div id="app"></div>
var vm = new Vue({
    el: '#app',
    data: {},
    methods: {}
    ...
})

這就是 Vue 範例的基本結構，並不陌生。從這裡可以看到，el 的指定是一個 id 為 app 的 div 元素，Vue 範例接管了對它的控制，減少了我們的 DOM 操作，需要被 vm 控制的元素全部加在它的內部。如果是需要控制不同的部分，這就需要多個 Vue 的範例來實現。疑問就來了，為什麼需要不同的 Vue 範例來接管?

入口問題

在 Vue 中指定 el 選項是給 Vue 範例指定一個 SPA 入口，有可能你的頁面會長成像下面這樣：

<div id="app"></div>
<div id="app1"></div>
<div id="app2"></div>

Vue 範例其實並不知道哪一個是入口，它應該接管哪一個部分，所以你要給它指定一個唯一的元素作為入口。每一個入口可以看作是一個 Vue 的類，Vue 要把這個入口進去的所有東西都取出來進行輪循渲染一遍，再把它重新掛載回頁面中的 DOM 裡面去。打給比方來說，一個 Vue 範例只擁有一個鑰匙，一個鑰匙只能開一把鎖，但是頁面上有很多把鎖，如果你不說清楚它是哪把鎖的鑰匙，Vue 範例就不知道接下來要怎麼做了。

當然，這只是一個比較淺顯的理解。你可能會說，我指定幾個入口讓 Vue 範例去一個一個試就好了，我們往下看。

虛擬 DOM

「虛擬 DOM」是我們對由 Vue 元件樹建立起來的整個 VNode 樹的稱呼

學習 Vue 不得不說的就是2.0引入的Virtual DOM，引入虛擬 DOM 後，在框架的內部將虛擬 DOM 樹型結構與真實 DOM 做了對映，讓我們不用再命令式的去操作 DOM。

參照裡面的一張圖片：

1.png

從這張圖可以看出來虛擬 DOM 的一個渲染過程，那我們再回到本文的話題：為什麼只能由一個根元素？
我們來看一個例子，假設你的 Vue 範例接管的 DOM 結構長成這個樣子：

<div id="app">
    <h1 id="h3">My title</h1>
    <span>Content</span>
    Other text
    <!-- annotation text -->
</div>

它在瀏覽器內部的表現是一個這樣的 DOM 樹:

2.png

原諒我畫圖技術差，不過我想展示的效果達到了。從這可以看出它是一個樹的結構，每個元素、文字、註釋都是一個節點，虛擬 DOM 遵循的也是這樣的一個樹的資料結構。

回到正題，我們的指定的 el 也就是整個 DOM 結構的根。現在就很好說了，我們只有指定了唯一的 el 根元素，才能交給 Vue 範例在內部通過 createElement 方法生成一個對應的虛擬 DOM 結構對映真實的 DOM 元素進行操作渲染成真正的 HTML

換句話來說，可以把 el 對應的元素理解成 Vue 接管部分中的一個頂級標籤，就像基本的 HTML 結構中，頂級標籤是 <html></html>，只能有一個這樣的標籤存在。對應到 Vue 中也是這樣，如果你給它兩個頂級標籤，那麼對應的 DOM 結構就無法生成了，這也就解釋了之前的疑惑：為什麼不能指定多個入口讓 Vue 範例一個個的試。

不知道我這樣的解釋有沒有說明白這個問題，如果沒清楚我們下面再來看看。

vue-cli

現在實際的專案開發中，使用腳手架 vue-cli 開發居多，我們來看看。

vue-cli 的形式是單檔案元件，一個 .vue 頁面的基本結構是這樣的：

<template>
  <div></div>
</template>

<script>
export default {

}
</script>

<style>

</style>

在這裡，<template> 標籤下也只能有一個根元素 div，這是為什麼？

在說這個話題之前，我們需要了解 H5 新標籤 <template> 的一些特性，可以參考檔案，它保證了內部的內容有效但不會被渲染。vue-cli 本質上是會把 .vue 檔案通過 webpack 設定打包成一系列的 js/css 檔案注入到一個 html 檔案中交給瀏覽器進行解釋執行，我們看一個打包好的檔案目錄：

3.png

這也就是說，每個 .vue 檔案都會是一個 Vue 的範例，而 <template> 標籤中的內容就是 Vue 範例接管形成虛擬 DOM 的那部分內容。如果在 template 下有多個 div，那麼虛擬 DOM 樹就沒辦法生成了。

問題抽象並回答

其實這個問題歸結到最後，也可以抽象為一個問題：為什麼抽象出來的 DOM 樹只能有一個根？

  • 從查詢和遍歷的角度來說，如果有多個根，那麼我們的查詢和遍歷的效率會很低。

    如果一個樹有多個根，說明可以優化，肯定會有一個節點是可以存取到所有的節點，那這個節點就會成為新的根節點。

  • 再從 Vue 本身來說，如果說一個元件有多個入口多個根，那不就意味著你的元件還可以進一步拆分成多個元件，進一步元件化，降低程式碼之間的耦合程度。

【相關視訊教學推薦：、】

以上就是vue為什麼只有一個根標籤的詳細內容，更多請關注TW511.COM其它相關文章！