Vue頁面切換和a鏈接的本質(zhì)區(qū)別詳解
Vue-router是伴隨著Vue框架出現(xiàn)的路由系統(tǒng)，它也是公認的一種優(yōu)秀的路由解決方案。在使用Vue-router時候，我們常常會使用其自帶的路徑跳轉(zhuǎn)組件Link,通過<Link to="path"></Link>實現(xiàn)跳轉(zhuǎn)，這和傳統(tǒng)的<a href="path" rel="external nofollow" ></a>何其相似！但它們到底有什么具體的區(qū)別呢？
對比<a>，Link組件避免了不必要的重渲染
A -- 通過<a>標(biāo)簽實現(xiàn)頁面跳轉(zhuǎn)：（圖中的例子將會在下面詳細解答）
圖一
圖二
圖三
B --通過<Link>組件實現(xiàn)頁面跳轉(zhuǎn)：
圖一
圖二
只更新變化的部分從而減少DOM性能消耗
Vue的創(chuàng)新之處在于，它利用虛擬DOM的概念和diff算法實現(xiàn)了對頁面的"按需更新"，Vue-router很好地繼承了這一點，譬如上圖所示，導(dǎo)航組件和三個Tab組件（通過...,通過...,通過...）的重渲染是我們不希望看到的，因為無論跳轉(zhuǎn)到頁面一或是頁面二，它只需要渲染一次就夠了。<Link>組件幫助我們實現(xiàn)了這個愿望，反觀<a>標(biāo)簽，每次跳轉(zhuǎn)都重渲染了導(dǎo)航組件和Tab組件試想一下，在一個浩大的項目里，這多么可怕！我們的"渲染"做了許多"無用功"，而且消耗了大量彌足珍貴的DOM性能！
以上這篇Vue頁面切換和a鏈接的本質(zhì)區(qū)別詳解就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家介紹了Vuecli3配置代理及遇到的問題解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08
這篇文章主要介紹了vue?input組件如何設(shè)置失焦與聚焦，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要為大家詳細介紹了vue-video-player視頻播放器的使用和配置，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
本文通過實例代碼給大家介紹了Vue lazyload圖片懶加載的相關(guān)知識，通過導(dǎo)入配置等操作src/main.jswenj ,代碼簡單易懂，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧2021-12-12
這篇文章主要為大家詳細分享一下vue3中動態(tài)組件遇到的問題,分別是動態(tài)組件綁定問題和動態(tài)組件的方法導(dǎo)出問題,有需要的小伙伴可以參考一下2024-12-12
這篇文章主要為大家詳細介紹了基于Vuejs實現(xiàn)購物車功能的相關(guān)資料，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08
這篇文章主要介紹了vue中v-mode詳解以及具體的使用示例,在組件中使用?v-model?時,需要定義model選項,指定綁定的prop和事件,本文結(jié)合實例代碼給大家介紹的非常詳細,需要的朋友可以參考下2024-03-03
Vue2和Vue3在v-for遍歷時ref獲取dom節(jié)點的區(qū)別及說明
這篇文章主要介紹了Vue2和Vue3在v-for遍歷時ref獲取dom節(jié)點的區(qū)別及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
解決el-cascader在IE11瀏覽器中加載頁面自動展開下拉框問題
這篇文章主要為大家介紹了解決el-cascader在IE11瀏覽器中加載頁面自動展開下拉框問題，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
這篇文章主要介紹了解決vue中reader.onload讀取文件的異步問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10