站長(zhǎng)資訊網(wǎng)
vue只有一個(gè)根標(biāo)簽的原因：1、從查找和遍歷DOM的角度來說，如果有多個(gè)根，那么查找和遍歷DOM的效率會(huì)很低；2、從Vue本身來說，如果說一個(gè)組件有多個(gè)入口多個(gè)根，那就意味著用戶的組件還可以進(jìn)一步拆分成多個(gè)組件，進(jìn)一步組件化，會(huì)降低代碼之間的耦合程度。
本教程操作環(huán)境：windows7系統(tǒng)、vue3版，DELL G3電腦。
vue為什么要求組件模板只能有一個(gè)根元素？下面一起來了解一下。
Vue 實(shí)例
首先，我覺得這個(gè)問題要先從 Vue 的實(shí)例開始講起。Vue 的實(shí)例一般都是長(zhǎng)成下面這個(gè)樣子，不同的只是 id 名的不同。
<div id="app"></div>
var vm = new Vue({ el: '#app', data: {}, methods: {} ... })
這就是 Vue 實(shí)例的基本結(jié)構(gòu)，并不陌生。從這里可以看到，el 的指定是一個(gè) id 為 app 的 div 元素，Vue 實(shí)例接管了對(duì)它的控制，減少了我們的 DOM 操作，需要被 vm 控制的元素全部加在它的內(nèi)部。如果是需要控制不同的部分，這就需要多個(gè) Vue 的實(shí)例來實(shí)現(xiàn)。疑問就來了，為什么需要不同的 Vue 實(shí)例來接管?
入口問題
在 Vue 中指定 el 選項(xiàng)是給 Vue 實(shí)例指定一個(gè) SPA 入口，有可能你的頁(yè)面會(huì)長(zhǎng)成像下面這樣：
<div id="app"></div> <div id="app1"></div> <div id="app2"></div>
Vue 實(shí)例其實(shí)并不知道哪一個(gè)是入口，它應(yīng)該接管哪一個(gè)部分，所以你要給它指定一個(gè)唯一的元素作為入口。每一個(gè)入口可以看作是一個(gè) Vue 的類，Vue 要把這個(gè)入口進(jìn)去的所有東西都取出來進(jìn)行輪循渲染一遍，再把它重新掛載回頁(yè)面中的 DOM 里面去。打給比方來說，一個(gè) Vue 實(shí)例只擁有一個(gè)鑰匙，一個(gè)鑰匙只能開一把鎖，但是頁(yè)面上有很多把鎖，如果你不說清楚它是哪把鎖的鑰匙，Vue 實(shí)例就不知道接下來要怎么做了。
當(dāng)然，這只是一個(gè)比較淺顯的理解。你可能會(huì)說，我指定幾個(gè)入口讓 Vue 實(shí)例去一個(gè)一個(gè)試就好了，我們往下看。
虛擬 DOM
“虛擬 DOM”是我們對(duì)由 Vue 組件樹建立起來的整個(gè) VNode 樹的稱呼
學(xué)習(xí) Vue 不得不說的就是2.0引入的Virtual DOM，引入虛擬 DOM 后，在框架的內(nèi)部將虛擬 DOM 樹型結(jié)構(gòu)與真實(shí) DOM 做了映射，讓我們不用再命令式的去操作 DOM。
引用里面的一張圖片：
從這張圖可以看出來虛擬 DOM 的一個(gè)渲染過程，那我們?cè)倩氐奖疚牡脑掝}：為什么只能由一個(gè)根元素？
我們來看一個(gè)例子，假設(shè)你的 Vue 實(shí)例接管的 DOM 結(jié)構(gòu)長(zhǎng)成這個(gè)樣子：
<div id="app"> <h1 id="h3">My title</h1> <span>Content</span> Other text <!-- annotation text --> </div>
它在瀏覽器內(nèi)部的表現(xiàn)是一個(gè)這樣的 DOM 樹:
原諒我畫圖技術(shù)差，不過我想展示的效果達(dá)到了。從這可以看出它是一個(gè)樹的結(jié)構(gòu)，每個(gè)元素、文字、注釋都是一個(gè)節(jié)點(diǎn)，虛擬 DOM 遵循的也是這樣的一個(gè)樹的數(shù)據(jù)結(jié)構(gòu)。
回到正題，我們的指定的 el 也就是整個(gè) DOM 結(jié)構(gòu)的根?，F(xiàn)在就很好說了，我們只有指定了唯一的 el 根元素，才能交給 Vue 實(shí)例在內(nèi)部通過 createElement 方法生成一個(gè)對(duì)應(yīng)的虛擬 DOM 結(jié)構(gòu)映射真實(shí)的 DOM 元素進(jìn)行操作渲染成真正的 HTML
換句話來說，可以把 el 對(duì)應(yīng)的元素理解成 Vue 接管部分中的一個(gè)頂級(jí)標(biāo)簽，就像基本的 HTML 結(jié)構(gòu)中，頂級(jí)標(biāo)簽是 <html></html>，只能有一個(gè)這樣的標(biāo)簽存在。對(duì)應(yīng)到 Vue 中也是這樣，如果你給它兩個(gè)頂級(jí)標(biāo)簽，那么對(duì)應(yīng)的 DOM 結(jié)構(gòu)就無法生成了，這也就解釋了之前的疑惑：為什么不能指定多個(gè)入口讓 Vue 實(shí)例一個(gè)個(gè)的試。
不知道我這樣的解釋有沒有說明白這個(gè)問題，如果沒清楚我們下面再來看看。
vue-cli
現(xiàn)在實(shí)際的項(xiàng)目開發(fā)中，使用腳手架 vue-cli 開發(fā)居多，我們來看看。
vue-cli 的形式是單文件組件，一個(gè) .vue 頁(yè)面的基本結(jié)構(gòu)是這樣的：
<template> <div></div> </template> <script> export default { } </script> <style> </style>
在這里，<template> 標(biāo)簽下也只能有一個(gè)根元素 div，這是為什么？
在說這個(gè)話題之前，我們需要了解 H5 新標(biāo)簽 <template> 的一些特性，可以參考文檔，它保證了內(nèi)部的內(nèi)容有效但不會(huì)被渲染。vue-cli 本質(zhì)上是會(huì)把 .vue 文件通過 webpack 配置打包成一系列的 js/css 文件注入到一個(gè) html 文件中交給瀏覽器進(jìn)行解釋執(zhí)行，我們看一個(gè)打包好的文件目錄：
這也就是說，每個(gè) .vue 文件都會(huì)是一個(gè) Vue 的實(shí)例，而 <template> 標(biāo)簽中的內(nèi)容就是 Vue 實(shí)例接管形成虛擬 DOM 的那部分內(nèi)容。如果在 template 下有多個(gè) div，那么虛擬 DOM 樹就沒辦法生成了。
問題抽象并回答
其實(shí)這個(gè)問題歸結(jié)到最后，也可以抽象為一個(gè)問題：為什么抽象出來的 DOM 樹只能有一個(gè)根？
-
從查找和遍歷的角度來說，如果有多個(gè)根，那么我們的查找和遍歷的效率會(huì)很低。
如果一個(gè)樹有多個(gè)根，說明可以優(yōu)化，肯定會(huì)有一個(gè)節(jié)點(diǎn)是可以訪問到所有的節(jié)點(diǎn)，那這個(gè)節(jié)點(diǎn)就會(huì)成為新的根節(jié)點(diǎn)。
-
再?gòu)?Vue 本身來說，如果說一個(gè)組件有多個(gè)入口多個(gè)根，那不就意味著你的組件還可以進(jìn)一步拆分成多個(gè)組件，進(jìn)一步組件化，降低代碼之間的耦合程度。
【相關(guān)視頻教程推薦：vue視頻教程、web前端入門】
