Vue页面切换和a链接的本质区别详解
更新时间：2019年11月12日 09:33:49 作者：西巴撸
今天小编就为大家分享一篇Vue页面切换和a链接的本质区别详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue-router是伴随着Vue框架出现的路由系统，它也是公认的一种优秀的路由解决方案。在使用Vue-router时候，我们常常会使用其自带的路径跳转组件Link,通过<Link to="path"></Link>实现跳转，这和传统的<a href="path" rel="external nofollow" ></a>何其相似！但它们到底有什么具体的区别呢？
对比<a>，Link组件避免了不必要的重渲染
A -- 通过<a>标签实现页面跳转：（图中的例子将会在下面详细解答）
图一
图二
图三
B --通过<Link>组件实现页面跳转：
图一
图二
只更新变化的部分从而减少DOM性能消耗
Vue的创新之处在于，它利用虚拟DOM的概念和diff算法实现了对页面的"按需更新"，Vue-router很好地继承了这一点，譬如上图所示，导航组件和三个Tab组件（通过...,通过...,通过...）的重渲染是我们不希望看到的，因为无论跳转到页面一或是页面二，它只需要渲染一次就够了。<Link>组件帮助我们实现了这个愿望，反观<a>标签，每次跳转都重渲染了导航组件和Tab组件试想一下，在一个浩大的项目里，这多么可怕！我们的"渲染"做了许多"无用功"，而且消耗了大量弥足珍贵的DOM性能！
以上这篇Vue页面切换和a链接的本质区别详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
bpmn.js是一个BPMN2.0渲染工具包和web建模器,使得画流程图的功能在前端来完成,这篇文章主要给大家介绍了关于vue3集成bpmn.js的相关资料,文中通过代码示例介绍的非常详细,需要的朋友可以参考下2024-01-01
vue是法语中视图的意思，Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API。下面这篇文章主要给大家总结了Vue在开发过程中遇到的疑惑知识点,有需要的朋友可以参考借鉴，下面来一起看看吧。2017-01-01
这篇文章主要介绍了Vue自定义验证之日期时间选择器详解，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-02-02
Vue+ElementUI实现动态更换任意主题色(动态换肤)的全过程
众所周知Element-UI有换肤功能,下面这篇文章主要给大家介绍了关于Vue+ElementUI实现动态更换任意主题色(动态换肤)的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-02-02
这篇文章主要为大家详细介绍了vue实现简单的轮播图片，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这篇文章主要介绍了vue移动端模态框(可传参)的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
这篇文章主要为大家介绍了vue中定义全局声明vscode插件提示找不到问题解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
element-plus中el-upload组件限制上传文件类型的方法
Element Plus 中,el-upload 组件可以通过设置 accept 属性来限制上传文件的格式,这篇文章主要介绍了element-plus中el-upload组件限制上传文件类型,需要的朋友可以参考下2024-02-02
这篇文章主要介绍了Vue+element 商品列表、新增、编辑、删除业务实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
这篇文章主要介绍了Vue项目如何根据不同运行环境打包项目问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
最新评论