189 8069 5689

Vue中页面切换和a链接的本质区别是什么-创新互联

这篇文章将为大家详细讲解有关Vue中页面切换和a链接的本质区别是什么,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。

作为一家“创意+整合+营销”的成都网站建设机构,我们在业内良好的客户口碑。创新互联提供从前期的网站品牌分析策划、网站设计、成都网站设计、成都网站建设、创意表现、网页制作、系统开发以及后续网站营销运营等一系列服务,帮助企业打造创新的互联网品牌经营模式与有效的网络营销方法,创造更大的价值。

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

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

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

图一

Vue中页面切换和a链接的本质区别是什么

图二

Vue中页面切换和a链接的本质区别是什么

图三

Vue中页面切换和a链接的本质区别是什么

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

图一

Vue中页面切换和a链接的本质区别是什么

图二

Vue中页面切换和a链接的本质区别是什么

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

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

关于Vue中页面切换和a链接的本质区别是什么就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。


当前题目:Vue中页面切换和a链接的本质区别是什么-创新互联
分享URL:
http://jkwzsj.com/article/djcoip.html

其他资讯