Vue頁(yè)面切換和a鏈接的本質(zhì)區(qū)別詳解
Vue-router是伴隨著Vue框架出現(xiàn)的路由系統(tǒng)，它也是公認(rèn)的一種優(yōu)秀的路由解決方案。在使用Vue-router時(shí)候，我們常常會(huì)使用其自帶的路徑跳轉(zhuǎn)組件Link,通過(guò)<Link to="path"></Link>實(shí)現(xiàn)跳轉(zhuǎn)，這和傳統(tǒng)的<a href="path" rel="external nofollow" ></a>何其相似！但它們到底有什么具體的區(qū)別呢？
對(duì)比<a>，Link組件避免了不必要的重渲染
A -- 通過(guò)<a>標(biāo)簽實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)：（圖中的例子將會(huì)在下面詳細(xì)解答）
圖一
圖二
圖三
B --通過(guò)<Link>組件實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)：
圖一
圖二
只更新變化的部分從而減少DOM性能消耗
Vue的創(chuàng)新之處在于，它利用虛擬DOM的概念和diff算法實(shí)現(xiàn)了對(duì)頁(yè)面的"按需更新"，Vue-router很好地繼承了這一點(diǎn)，譬如上圖所示，導(dǎo)航組件和三個(gè)Tab組件（通過(guò)...,通過(guò)...,通過(guò)...）的重渲染是我們不希望看到的，因?yàn)闊o(wú)論跳轉(zhuǎn)到頁(yè)面一或是頁(yè)面二，它只需要渲染一次就夠了。<Link>組件幫助我們實(shí)現(xiàn)了這個(gè)愿望，反觀<a>標(biāo)簽，每次跳轉(zhuǎn)都重渲染了導(dǎo)航組件和Tab組件試想一下，在一個(gè)浩大的項(xiàng)目里，這多么可怕！我們的"渲染"做了許多"無(wú)用功"，而且消耗了大量彌足珍貴的DOM性能！
以上這篇Vue頁(yè)面切換和a鏈接的本質(zhì)區(qū)別詳解就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
bpmn.js是一個(gè)BPMN2.0渲染工具包和web建模器,使得畫(huà)流程圖的功能在前端來(lái)完成,這篇文章主要給大家介紹了關(guān)于vue3集成bpmn.js的相關(guān)資料,文中通過(guò)代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
Vue開(kāi)發(fā)過(guò)程中遇到的疑惑知識(shí)點(diǎn)總結(jié)
vue是法語(yǔ)中視圖的意思，Vue.js是一個(gè)輕巧、高性能、可組件化的MVVM庫(kù)，同時(shí)擁有非常容易上手的API。下面這篇文章主要給大家總結(jié)了Vue在開(kāi)發(fā)過(guò)程中遇到的疑惑知識(shí)點(diǎn),有需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-01-01
這篇文章主要介紹了Vue自定義驗(yàn)證之日期時(shí)間選擇器詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-02-02
Vue+ElementUI實(shí)現(xiàn)動(dòng)態(tài)更換任意主題色(動(dòng)態(tài)換膚)的全過(guò)程
眾所周知Element-UI有換膚功能,下面這篇文章主要給大家介紹了關(guān)于Vue+ElementUI實(shí)現(xiàn)動(dòng)態(tài)更換任意主題色(動(dòng)態(tài)換膚)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡(jiǎn)單的輪播圖片，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
vue移動(dòng)端模態(tài)框(可傳參)的實(shí)現(xiàn)
這篇文章主要介紹了vue移動(dòng)端模態(tài)框(可傳參)的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
vue中定義全局聲明vscode插件提示找不到問(wèn)題解決
這篇文章主要為大家介紹了vue中定義全局聲明vscode插件提示找不到問(wèn)題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
element-plus中el-upload組件限制上傳文件類型的方法
?Element Plus 中,el-upload 組件可以通過(guò)設(shè)置 accept 屬性來(lái)限制上傳文件的格式,這篇文章主要介紹了element-plus中el-upload組件限制上傳文件類型,需要的朋友可以參考下2024-02-02
Vue element商品列表的增刪改功能實(shí)現(xiàn)
這篇文章主要介紹了Vue+element 商品列表、新增、編輯、刪除業(yè)務(wù)實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
Vue項(xiàng)目如何根據(jù)不同運(yùn)行環(huán)境打包項(xiàng)目
這篇文章主要介紹了Vue項(xiàng)目如何根據(jù)不同運(yùn)行環(huán)境打包項(xiàng)目問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03