Vue页面切换和a链接的本质区别详解


Posted in Javascript onNovember 12, 2019

Vue-router是伴随着Vue框架出现的路由系统,它也是公认的一种优秀的路由解决方案。在使用Vue-router时候,我们常常会使用其自带的路径跳转组件Link,通过<Link to="path"></Link>实现跳转,这和传统的<a href="path" rel="external nofollow" ></a>何其相似!但它们到底有什么具体的区别呢?

对比<a>,Link组件避免了不必要的重渲染

A -- 通过<a>标签实现页面跳转:(图中的例子将会在下面详细解答)

图一

Vue页面切换和a链接的本质区别详解

图二

Vue页面切换和a链接的本质区别详解

图三

Vue页面切换和a链接的本质区别详解

B --通过<Link>组件实现页面跳转:

图一

Vue页面切换和a链接的本质区别详解

图二

Vue页面切换和a链接的本质区别详解

只更新变化的部分从而减少DOM性能消耗

Vue的创新之处在于,它利用虚拟DOM的概念和diff算法实现了对页面的"按需更新",Vue-router很好地继承了这一点,譬如上图所示,导航组件和三个Tab组件(通过...,通过...,通过...)的重渲染是我们不希望看到的,因为无论跳转到页面一或是页面二,它只需要渲染一次就够了。<Link>组件帮助我们实现了这个愿望,反观<a>标签,每次跳转都重渲染了导航组件和Tab组件试想一下,在一个浩大的项目里,这多么可怕!我们的"渲染"做了许多"无用功",而且消耗了大量弥足珍贵的DOM性能!

以上这篇Vue页面切换和a链接的本质区别详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery控制listbox中项的移动并排序
Nov 12 Javascript
将函数的实际参数转换成数组的方法
Jan 25 Javascript
JavaScript根据数据生成百分比图和柱状图的实例代码
Jul 14 Javascript
js计算两个时间之间天数差的实例代码
Nov 19 Javascript
js控制href内容的连接内容的变化示例
Apr 30 Javascript
jQuery学习笔记之2个小技巧
Jan 19 Javascript
jQuery实现的AJAX简单弹出层效果代码
Nov 26 Javascript
利用JS提交表单的几种方法和验证(必看篇)
Sep 17 Javascript
JavaScript面向对象的程序设计(犯迷糊的小羊)
May 27 Javascript
微信小程序云开发实现增删改查功能
May 17 Javascript
layui实现数据表格隐藏列的示例
Oct 25 Javascript
全面解析js中的原型,原型对象,原型链
Jan 25 Javascript
vue 中几种传值方法(3种)
Nov 12 #Javascript
Vue 中 a标签上href无法跳转的解决方式
Nov 12 #Javascript
javascript严格模式详解(含严格模式与非严格模式的区别)
Nov 12 #Javascript
vue.js 实现a标签href里添加参数
Nov 12 #Javascript
VUEX 数据持久化,刷新后重新获取的例子
Nov 12 #Javascript
react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面
Nov 12 #Javascript
实现vuex与组件data之间的数据同步更新方式
Nov 12 #Javascript
You might like
聊天室php&amp;mysql(四)
2006/10/09 PHP
php+mysqli实现批量替换数据库表前缀的方法
2014/12/29 PHP
PHP实现的随机红包算法示例
2017/08/14 PHP
PHP获取当前系统时间的方法小结
2018/10/03 PHP
laravel 框架执行流程与原理简单分析
2020/02/01 PHP
PHP7 标准库修改
2021/03/09 PHP
JS延迟加载(setTimeout) JS最后加载
2010/07/15 Javascript
jquery选择器需要注意的问题
2014/11/26 Javascript
javascript原始值和对象引用实例分析
2015/04/25 Javascript
巧用jQuery选择器提高写表单效率的方法
2016/08/19 Javascript
JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
2017/06/30 Javascript
ionic2中使用自动生成器的方法
2018/03/04 Javascript
详解Puppeteer 入门教程
2018/05/09 Javascript
express express-session的使用小结
2018/12/12 Javascript
微信小程序websocket实现即时聊天功能
2019/05/21 Javascript
layui实现下拉复选功能的例子(包括数据的回显与上传)
2019/09/24 Javascript
Layui数据表格之单元格编辑方式
2019/10/26 Javascript
如何解决jQuery 和其他JS库的冲突
2020/06/22 jQuery
python类:class创建、数据方法属性及访问控制详解
2016/07/25 Python
python pip源配置,pip配置文件存放位置的方法
2019/07/12 Python
python如何实现数据的线性拟合
2019/07/19 Python
python中shell执行知识点
2020/05/06 Python
Django实现后台上传并显示图片功能
2020/05/29 Python
python 实现单例模式的5种方法
2020/09/23 Python
基于Python组装jmx并调用JMeter实现压力测试
2020/11/03 Python
CSS3中Animation属性的使用详解
2015/08/06 HTML / CSS
HTML5地理定位与第三方工具百度地图的应用
2016/11/17 HTML / CSS
html5 canvas实现圆形时钟代码分享
2013/12/25 HTML / CSS
英国最受欢迎的价格比较网站之一:MoneySuperMarket
2018/12/19 全球购物
时尚、社区、科技:SEVENSTORE
2019/04/26 全球购物
一些高难度的SQL面试题
2016/11/29 面试题
营销专业应届生求职信
2013/11/26 职场文书
应用心理学个人求职信范文
2013/12/11 职场文书
美术兴趣小组活动总结
2014/07/07 职场文书
学校开学标语
2014/10/06 职场文书
测量员岗位职责
2015/02/14 职场文书