vue-router2.0组件复用
在使用vue-router1.x时我们知道对于路由 a/b/c 和 a/b/d , 组件a和组件b将会复用 。具体可以参考:https://github.com/vuejs/vue-router/blob/1.0/docs/zh-cn/pipeline/README.md
在vue-router2.x 路由对组件的复用也1.x基本是一样的。
还是举例 /a/b/c 和 /a/b/d
在这2个路由进行切换时,会检测到a 和b组件是可以重用的,所以这2个组件在重用时生命周期不会再执行。
对于c和d组件由于不能重用,所以生命周期在切换时会重复执行。
假如c和d组件里面分别包含了e组件 ,那e组件会不会重用呢 ,经过测试e组件是不会重用的。因为c和d组件没有重用,生命周期重新执行了,所以e组件相当于会重新加载。
当使用动态路由时,例如从 /user/1导航到 /user/2,原来的组件实例会被复用。因为两个路由都渲染同个组件,比起销毁再创建,复用则显得更加高效。不过,这也意味着组件的生命周期钩子不会再被调用。
想对路由参数的变化作出响应的话,你可以简单地 watch(监测变化) $route 对象(注意判断是否为当前路由)。参考:https://router.vuejs.org/zh-cn/essentials/dynamic-matching.html
如果有keep-alive需要注意下,keep-alive会对当前路由组件进行缓存,比如 /a/b/c ,如果在/a对应的router-view进行keep-alive,b/c不会继承keep-alive,不会缓存会重新渲染。相当于存在keep-alive嵌套的情况下,每个keep-alive对于一个子路由,父路由的keep-alive不会继承到子路由。
比如:/a/b 和/a/c ; 路由/a进行了keep-alive , b、c没有keep-alive,在切换这2个路由时组件b、组件c都会重新渲染,生命周期会重新执行。
vue-router2.0组件复用的更多相关文章
- Vue 2.0 组件库总结
UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开 ...
- 说一说Vue(2.0)组件的通信方式
Vue(2.0)是组件化的开发模式,在不借助vuex框架的前提下,组件之间如何通信呢?接下来我在开发中总结了几种情况.1.父组件给子组件传值(props): 父组件给子组件传值的方式主要是用函数pro ...
- vue 2.0 路由切换以及组件缓存源代码重点难点分析
摘要 关于vue 2.0源代码分析,已经有不少文档分析功能代码段比如watcher,history,vnode等,但没有一个是分析重点难点的,没有一个是分析大命题的,比如执行router.push之后 ...
- Vue.js 组件复用和扩展之道
软件编程有一个重要的原则是 D.R.Y(Don't Repeat Yourself),讲的是尽量复用代码和逻辑,减少重复.组件扩展可以避免重复代码,更易于快速开发和维护.那么,扩展 Vue 组件的最佳 ...
- vue-calendar 基于 vue 2.0 开发的轻量,高性能日历组件
vue-calendar-component 基于 vue 2.0 开发的轻量,高性能日历组件 占用内存小,性能好,样式好看,可扩展性强 原生 js 开发,没引入第三方库 Why Github 上很多 ...
- Vue 2.0 右键菜单组件 Vue Context Menu
Vue 2.0 右键菜单组件 Vue Context Menu https://juejin.im/entry/5976d14751882507db6e839c
- WijmoJS V2019.0 Update2发布:再度增强 React 和 Vue 框架的组件功能
前端开发工具包 WijmoJS 在2019年的第二个主要版本 V2019.0 Update2 已经发布,本次发布涵盖了React 和 Vue 框架下 WijmoJS 前端组件的功能增强,并加入更为易用 ...
- 使用TypeScript给Vue 3.0写一个指令实现组件拖拽
最近在用vue3重构后台的一个功能.一个弹窗组件,弹出一个表单.然后点击提交. 早上运维突然跑过来问我,为啥弹窗挡住了下边的表格的数据,我添加的时候,都没法对照表格来看了.你必须给我解决一下. 我参考 ...
- vue 组件复用 - component
vue 组件复用 - component vue 组件复用 就是对 component 标签的使用 先看图 下图看使用 结果: 可以看到 在箱包 这一项,我将banner 组件用了两次,我 每次 点击 ...
随机推荐
- Ajax 使用 FormData做为data的参数时 出现Illegal invocation
今天在用ajax向后台传递数据时出现此错误,在ajax的参数中加上 contentType: false, processData: false, 这两句即可.
- mui蒙版使用例子
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name=& ...
- Cocos2d-x v3.1 坐标系统(五)
Cocos2d-x v3.1 坐标系统(五) 为了能够更好的布局以及了解对象所在的位置,我们必须对Cocos2d-x中的坐标有详细的了解,本篇文章主要就是了解Cocos中用到的坐标系统.学过数学的人都 ...
- C#,什么是Attribute?什么特性?怎么被调用?
定制特性attribute,本质上是一个类,其为目标元素提供关联附加信息,并在运行期以反射的方式来获取附加信息(获取到特性类),相当于优雅的为元素添加了一个tag,这个tag是一个类. Attribu ...
- php使用GD库实现图片水印和缩略图——封装成类
学完了如何使用GD库来实现对图片的各种处理,那么我们可以发现,不管哪种方法,都有相似之处,如果我们把这些相似的地方和不相似的地方都封装成类,这样就可以提升代码的速度,而且节省了很多时间,废话不多说,来 ...
- Win7系统如何设置FTP详细过程
1.安装FTP组件 点击:控制面板—>程序和功能—>打开或关闭Windows功能.勾选“FTP服务器”及“FTP服务”“FTP扩展性”,点击“确定”,安装FTP组件. 2.添加FTP站点 ...
- IOS 绘制图片水印(封装)
- (void)viewDidLoad { [super viewDidLoad]; // -1.加载图片 // UIImage *image = [UIImage imageNamed:@" ...
- POJ 1631 Bridging signals(LIS的等价表述)
把左边固定,看右边,要求线不相交,编号满足单调性,其实是LIS的等价表述. (如果编号是乱的也可以把它有序化就像Uva 10635 Prince and Princess那样 O(nlogn) #in ...
- 题解 CF20A 【BerOS file system】
对于此题,我的心近乎崩溃 这道题,注意点没有什么,相信大佬们是可以自己写出来的 我是蒟蒻,那我是怎么写出来的啊 好了,废话少说,开始进入正题 这道题,首先我想到的是字符串的 erase 函数,一边运行 ...
- SpringMVC 多视图解析器 跳转问题
在SpringMVC的配置文件中加入以下配置: <!-- 下面红色的配置必须要在--> <mvc:default-servlet-handler /> <bean id ...