vue中动态路由组件缓存及生命周期函数

是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 相似， 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。prop :

vue动态组件_vue如何点击时动态加载组件

有两个生命周期函数：

activated ：激活

deactivated ：失活

利用keep-alive实现滚动条保存：

思路 ： 在路由页面离开 beforeRouterEnter 中保存当前滚动条距离顶部的位置，再用 activated 钩子函数 当他再次被激活时，让他的滚动条等于离开时保存的那个值。

beforeCreate ：组件实例刚被创建，组件属性计算之前，如data属性等

created ：组件实例创建完成，属性已绑定，但DOM还未生成，$el属性还不存在

beforeMount ：模板编译 / 挂载之前

mounted ：模板编译 / 挂载之后

beforeUpdate ：组件更新之前

updated ：组件更新之后

activated ：组件被激活时调用

deactivated ：组件被移除时调用

beforeDestory ：组件销毁前调用

destoryed ：组件销毁后调用

(1) 创建阶段

创建的标志点是New vue()，beforeCreate和created都发生在创建动作之后，但区别在于beforeCreate触发的时候数据还没初始化和绑定，而created的时候就生成好了。

(2) 挂载阶段

beforeMount和mounted两者主要区别在于模板是否编译和挂载了。

(3) 更新阶段

beforeUpdate 和 updated 就是当数据发生变化的时候出发的。

(4) 销毁阶段

beforeDestory 和 destoryed 的区别就是el的值data的数据依然在的。这是因为$destroy只是销毁一个实例，清理它与其它实例的连接，解绑它的全部指令及事件监听器，并不会清除data的数据或者清除dom。

vue由于设置为null,子组件在一开始加载时加载不了

动态组件无效导致的。

经查询网上相关公开信息及资料得知，因为vue框架的动态组织设置为null，导致第一次进入parent组件aa组件的对话框中的动态组件无效，第二次进入的时候才有效，所以第一次没有加载出来，返回上一级界面，重新进入组件，在打开对话框子组件有加载出来了。

15《Vue 入门教程》Vue 动态组件 & keep-alive

本小节我们将介绍 Vue 的动态组件，以及缓存 keep-alive 的使用。包括动态组件的使用方法，以及如何使用 keep-alive 实现组件的缓存效果。

动态组件是让多个组件使用同一个挂载点，并动态切换。动态组件是 Vue 的一个高级用法，但其实它的使用非常简单。keep-alive 是 vue 的内置组件，能在组件切换过程中将状态保存在内存中，防止重复渲染 DOM。

通过使用保留的 元素，动态地把组件名称绑定到它的 is 特性，可以实现动态组件：

实例演示

"运行案例" 可查看在线运行效果

代码解释： HTML 代码第 2 行，我们使用动态组件 component，将当前需要展示的组件名通过变量 currentView 绑定到 component 的 is 属性上。 HTML 代码第 3-5 行，我们定义了三个按钮，通过点击按钮切换 currentView 的值。 JS 代码第 3-11 行，我们定义了组件 ComponentA、ComponentB、ComponentC。

最终的实现效果是：当点击按钮的时候会动态切换展示的组件。

keep-alive 是 Vue 提供的一个抽象组件，用来对组件进行缓存，从而节省性能，由于是一个抽象组件，所以在页面渲染完毕后不会被渲染成一个 DOM 元素。被 keep-alive 缓存的组件只有在初次渲染时才会被创建，并且当组件切换时不会被销毁。

keep-alive 的用法相对简单，直接使用 keep-alive 包裹需要缓存的组件即可：

实例演示

"运行案例" 可查看在线运行效果

代码解释： HTML 代码第 2-3 行，我们使用 keep-alive 包裹动态组件 component，将当前需要展示的组件名通过变量 currentView 绑定到 component 的 is 属性上。 HTML 代码第 5-7 行，我们定义了三个按钮，通过点击按钮切换 currentView 的值。 JS 代码第 3-29 行，我们定义了组件 ComponentA、ComponentB、ComponentC，分别定义了他们的 created 和 beforeDestroy 事件。

之前我们介绍过， keep-alive 缓存的组件只有在初次渲染时才会被创建。所以，我们通过修改 currentView 切换组件时，组件的 beforeDestroy 事件不会触发。若该组件是第一次渲染，会触发 created 事件，当再次切换显示该组件时，created 事件不会再次触发。

activated 和 deactivated 和我们之前学习的生命周期函数一样，也是组件的生命周期函数。不过， activated 和 deactivated 只在 内的所有嵌套组件中触发。 activated ：进入组件时触发。 deactivated ：退出组件时触发。

示例代码：

实例演示

"运行案例" 可查看在线运行效果

代码解释： JS 代码中，我们定义了组件 ComponentA、ComponentB，并分别定义了他们的 activated 和 deactivated 事件函数。 HTML 代码第 2-3 行，我们使用 keep-alive 包裹动态组件 component，将当前需要展示的组件名通过变量 currentView 绑定到 component 的 is 属性上。 HTML 代码第 5-6 行，我们定义了两个按钮，通过点击按钮切换 currentView 的值。当我们切换组件显示时，可以看到这样的打印信息：

include 和 exclude 是 keep-alive 的两个属性，允许组件有条件地缓存。 include： 可以是字符串或正则表达式，用来表示只有名称匹配的组件会被缓存。 exclude： 可以是字符串或正则表达式，用来表示名称匹配的组件不会被缓存。

示例：

实例演示

"运行案例" 可查看在线运行效果

代码解释： HTML 代码第 2-4 行，我们使用 keep-alive 包裹动态组件 component。给 keep-alive 指定需要缓存组件 ComponentA，ComponentB。 在之前的小节我们了解到 keep-alive 缓存的组件只有在初次渲染时才会被创建。所以，在案例中，组件 ComponentA 和 ComponentB 的 created 函数只有在第一次组件被创建的时候才会触发，而 ComponentC 的 created 函数当每次组件显示的时候都会触发。

exclude 示例：

实例演示

"运行案例" 可查看在线运行效果

代码解释： HTML 代码第 2-4 行，我们使用 keep-alive 包裹动态组件 component。给 keep-alive 指定不需要缓存组件 ComponentA，ComponentB。

本节，我们带大家学习了动态组件和缓存组件在项目中的运用。主要知识点有以下几点：

vue动态控制子组件禁用

this.disabled=true。新增的时候可以输入，修改的时候就把输入框禁用，此时就需要通过控制input标签的disabled属性来实现，vue是动态设置input输入框的disabled属性的方式，在你想禁用的条件下，写上：this.disabled=true即可。

vue里面可以动态加载touchspin插件吗

组件是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义的元素，Vue.js的编译器为它添加特殊功能。在有些情况下，组件也可以是原生HTML元素的形式，以is特性扩展。

下面一段简单的代码给大家介绍Vue加载组件的几种方式，具体代码如下所示：

//正常加载

import index from '../pages/index.vue'

import view from '../pages/view.vue'

//懒加载

const index = resolve => require(['../pages/index.vue'], resolve)

const view = resolve => require(['../pages/view.vue'], resolve)

//懒加载 - 按组

const index = r => require.ensure([], () => r(require('../pages/index.vue')), 'group-index')

const view = r => require.ensure([], () => r(require('../pages/view.vue')), 'group-view')

// 懒加载 - 按组 import，基于ES6 import的特性

const index = () => import('../pages/index.vue')

const view = () => import('../pages/view.vue')补充：Vue动态加载组件的四种方式

动态加载组件的四种方式：

1、使用import导入组件，可以获取到组件

var name = 'system';

var myComponent =() => import('../components/' + name + '.vue');

var route={//前端全栈开发交流学习圈：866109386

name:name,//帮助1-3年前端人员，提神技术思维

component:myComponent

}2、使用import导入组件，直接将组件赋值给componet

var name = 'system';

var route={//前端全栈开发交流学习圈：866109386

name:name,//帮助1-3年前端人员，提神技术思维

component :() => import('../components/' + name + '.vue');

}3、使用require 导入组件，可以获取到组件

var name = 'system';

var myComponent = resolve => require.ensure([], () => resolve(require('../components/' + name + '.vue')));

var route={//前端全栈开发交流学习圈：866109386

name:name,//帮助1-3年前端人员，提神技术思维

component:myComponent

}