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