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

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

創(chuàng)新互聯(lián)公司專(zhuān)業(yè)為企業(yè)提供鳳縣網(wǎng)站建設(shè)、鳳縣做網(wǎng)站、鳳縣網(wǎng)站設(shè)計(jì)、鳳縣網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(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的角度來(lái)說(shuō)，如果有多個(gè)根，那么查找和遍歷DOM的效率會(huì)很低；2、從Vue本身來(lái)說(shuō)，如果說(shuō)一個(gè)組件有多個(gè)入口多個(gè)根，那就意味著用戶(hù)的組件還可以進(jìn)一步拆分成多個(gè)組件，進(jìn)一步組件化，會(huì)降低代碼之間的耦合程度。

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

Vue 實(shí)例

首先，我覺(jué)得這個(gè)問(wèn)題要先從 Vue 的實(shí)例開(kāi)始講起。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í)例來(lái)實(shí)現(xiàn)。疑問(wèn)就來(lái)了，為什么需要不同的 Vue 實(shí)例來(lái)接管?

入口問(wèn)題

在 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 的類(lèi)，Vue 要把這個(gè)入口進(jìn)去的所有東西都取出來(lái)進(jìn)行輪循渲染一遍，再把它重新掛載回頁(yè)面中的 DOM 里面去。打給比方來(lái)說(shuō)，一個(gè) Vue 實(shí)例只擁有一個(gè)鑰匙，一個(gè)鑰匙只能開(kāi)一把鎖，但是頁(yè)面上有很多把鎖，如果你不說(shuō)清楚它是哪把鎖的鑰匙，Vue 實(shí)例就不知道接下來(lái)要怎么做了。

當(dāng)然，這只是一個(gè)比較淺顯的理解。你可能會(huì)說(shuō)，我指定幾個(gè)入口讓 Vue 實(shí)例去一個(gè)一個(gè)試就好了，我們往下看。

虛擬 DOM

“虛擬 DOM”是我們對(duì)由 Vue 組件樹(shù)建立起來(lái)的整個(gè) VNode 樹(shù)的稱(chēng)呼

學(xué)習(xí) Vue 不得不說(shuō)的就是2.0引入的Virtual DOM，引入虛擬 DOM 后，在框架的內(nèi)部將虛擬 DOM 樹(shù)型結(jié)構(gòu)與真實(shí) DOM 做了映射，讓我們不用再命令式的去操作 DOM。

引用里面的一張圖片：

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

從這張圖可以看出來(lái)虛擬 DOM 的一個(gè)渲染過(guò)程，那我們?cè)倩氐奖疚牡脑?huà)題：為什么只能由一個(gè)根元素？
我們來(lái)看一個(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 樹(shù):

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

原諒我畫(huà)圖技術(shù)差，不過(guò)我想展示的效果達(dá)到了。從這可以看出它是一個(gè)樹(shù)的結(jié)構(gòu)，每個(gè)元素、文字、注釋都是一個(gè)節(jié)點(diǎn)，虛擬 DOM 遵循的也是這樣的一個(gè)樹(shù)的數(shù)據(jù)結(jié)構(gòu)。

回到正題，我們的指定的 el 也就是整個(gè) DOM 結(jié)構(gòu)的根?，F(xiàn)在就很好說(shuō)了，我們只有指定了唯一的 el 根元素，才能交給 Vue 實(shí)例在內(nèi)部通過(guò) createElement 方法生成一個(gè)對(duì)應(yīng)的虛擬 DOM 結(jié)構(gòu)映射真實(shí)的 DOM 元素進(jìn)行操作渲染成真正的 HTML

換句話(huà)來(lái)說(shuō)，可以把 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)就無(wú)法生成了，這也就解釋了之前的疑惑：為什么不能指定多個(gè)入口讓 Vue 實(shí)例一個(gè)個(gè)的試。

不知道我這樣的解釋有沒(méi)有說(shuō)明白這個(gè)問(wèn)題，如果沒(méi)清楚我們下面再來(lái)看看。

vue-cli

現(xiàn)在實(shí)際的項(xiàng)目開(kāi)發(fā)中，使用腳手架 vue-cli 開(kāi)發(fā)居多，我們來(lái)看看。

vue-cli 的形式是單文件組件，一個(gè) .vue 頁(yè)面的基本結(jié)構(gòu)是這樣的：

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

<script>
export default {

}
</script>

<style>

</style>

在這里，<template> 標(biāo)簽下也只能有一個(gè)根元素 div，這是為什么？

在說(shuō)這個(gè)話(huà)題之前，我們需要了解 H5 新標(biāo)簽 <template> 的一些特性，可以參考文檔，它保證了內(nèi)部的內(nèi)容有效但不會(huì)被渲染。vue-cli 本質(zhì)上是會(huì)把 .vue 文件通過(guò) webpack 配置打包成一系列的 js/css 文件注入到一個(gè) html 文件中交給瀏覽器進(jìn)行解釋執(zhí)行，我們看一個(gè)打包好的文件目錄：

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

這也就是說(shuō)，每個(gè) .vue 文件都會(huì)是一個(gè) Vue 的實(shí)例，而 <template> 標(biāo)簽中的內(nèi)容就是 Vue 實(shí)例接管形成虛擬 DOM 的那部分內(nèi)容。如果在 template 下有多個(gè) div，那么虛擬 DOM 樹(shù)就沒(méi)辦法生成了。

問(wèn)題抽象并回答

其實(shí)這個(gè)問(wèn)題歸結(jié)到最后，也可以抽象為一個(gè)問(wèn)題：為什么抽象出來(lái)的 DOM 樹(shù)只能有一個(gè)根？

從查找和遍歷的角度來(lái)說(shuō)，如果有多個(gè)根，那么我們的查找和遍歷的效率會(huì)很低。
如果一個(gè)樹(shù)有多個(gè)根，說(shuō)明可以?xún)?yōu)化，肯定會(huì)有一個(gè)節(jié)點(diǎn)是可以訪(fǎng)問(wèn)到所有的節(jié)點(diǎn)，那這個(gè)節(jié)點(diǎn)就會(huì)成為新的根節(jié)點(diǎn)。
再?gòu)?Vue 本身來(lái)說(shuō)，如果說(shuō)一個(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://aaarwkj.com/article6/iposog.html

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

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

猜你還喜歡下面的內(nèi)容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

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

Vue 實(shí)例

入口問(wèn)題

虛擬 DOM

vue-cli

問(wèn)題抽象并回答