vue只有一個(gè)根標(biāo)簽的原因是什么

今天小編給大家分享一下vue只有一個(gè)根標(biāo)簽的原因是什么的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

創(chuàng)新互聯(lián)公司專業(yè)為企業(yè)提供鳳縣網(wǎng)站建設(shè)、鳳縣做網(wǎng)站、鳳縣網(wǎng)站設(shè)計(jì)、鳳縣網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)與制作、鳳縣企業(yè)網(wǎng)站模板建站服務(wù)，10年鳳縣做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

vue只有一個(gè)根標(biāo)簽的原因：1、從查找和遍歷DOM的角度來說，如果有多個(gè)根，那么查找和遍歷DOM的效率會(huì)很低；2、從Vue本身來說，如果說一個(gè)組件有多個(gè)入口多個(gè)根，那就意味著用戶的組件還可以進(jìn)一步拆分成多個(gè)組件，進(jìn)一步組件化，會(huì)降低代碼之間的耦合程度。

vue只有一個(gè)根標(biāo)簽的原因是什么

本教程操作環(huán)境：windows7系統(tǒng)、vue3版，DELL G3電腦。

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 入口，有可能你的頁面會(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)行輪循渲染一遍，再把它重新掛載回頁面中的 DOM 里面去。打給比方來說，一個(gè) Vue 實(shí)例只擁有一個(gè)鑰匙，一個(gè)鑰匙只能開一把鎖，但是頁面上有很多把鎖，如果你不說清楚它是哪把鎖的鑰匙，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。

引用里面的一張圖片：

vue只有一個(gè)根標(biāo)簽的原因是什么

從這張圖可以看出來虛擬 DOM 的一個(gè)渲染過程，那我們?cè)倩氐奖疚牡脑掝}：為什么只能由一個(gè)根元素？
我們來看一個(gè)例子，假設(shè)你的 Vue 實(shí)例接管的 DOM 結(jié)構(gòu)長(zhǎng)成這個(gè)樣子：

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

它在瀏覽器內(nèi)部的表現(xiàn)是一個(gè)這樣的 DOM 樹:

vue只有一個(gè)根標(biāo)簽的原因是什么

原諒我畫圖技術(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 頁面的基本結(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è)打包好的文件目錄：

vue只有一個(gè)根標(biāo)簽的原因是什么

這也就是說，每個(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)。

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

以上就是“vue只有一個(gè)根標(biāo)簽的原因是什么”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

當(dāng)前題目：vue只有一個(gè)根標(biāo)簽的原因是什么
本文路徑：http://bm7419.com/article6/iposog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、網(wǎng)頁設(shè)計(jì)公司、企業(yè)網(wǎng)站制作、網(wǎng)站設(shè)計(jì)公司、App開發(fā)、自適應(yīng)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

成都網(wǎng)頁設(shè)計(jì)公司