15Vue入门教程Vue动态组件ampampampkeepa

　　1。前言
　　本小节我们将介绍Vue的动态组件，以及缓存keepalive的使用。包括动态组件的使用方法，以及如何使用keepalive实现组件的缓存效果。2。木子解释
　　动态组件是让多个组件使用同一个挂载点，并动态切换。动态组件是Vue的一个高级用法，但其实它的使用非常简单。keepalive是vue的内置组件，能在组件切换过程中将状态保存在内存中，防止重复渲染DOM。3。动态组件如何使用
　　通过使用保留的元素，动态地把组件名称绑定到它的is特性，可以实现动态组件：
　　实例演示！DOCTYPEhtmlhtmllangenheadmetacharsetUTF8metanameviewportcontentwidthdevicewidth，initialscale1。0metahttpequivXUACompatiblecontentieedgetitleDocumenttitleheadbodycomponent：iscurrentViewcomponentbuttonclickchangeView（A）切换到AbuttonbuttonclickchangeView（B）切换到BbuttonbuttonclickchangeView（C）切换到Cbuttonbodyhtml
　　运行案例可查看在线运行效果
　　代码解释：HTML代码第2行，我们使用动态组件component，将当前需要展示的组件名通过变量currentView绑定到component的is属性上。HTML代码第35行，我们定义了三个按钮，通过点击按钮切换currentView的值。JS代码第311行，我们定义了组件ComponentA、ComponentB、ComponentC。
　　最终的实现效果是：当点击按钮的时候会动态切换展示的组件。4。keepalive
　　keepalive是Vue提供的一个抽象组件，用来对组件进行缓存，从而节省性能，由于是一个抽象组件，所以在页面渲染完毕后不会被渲染成一个DOM元素。被keepalive缓存的组件只有在初次渲染时才会被创建，并且当组件切换时不会被销毁。4。1。基础用法
　　keepalive的用法相对简单，直接使用keepalive包裹需要缓存的组件即可：
　　实例演示！DOCTYPEhtmlhtmllangenheadmetacharsetUTF8metanameviewportcontentwidthdevicewidth，initialscale1。0metahttpequivXUACompatiblecontentieedgetitleDocumenttitleheadbodykeepalivecomponent：iscurrentViewcomponentkeepalivebuttonclickchangeView（A）切换到AbuttonbuttonclickchangeView（B）切换到BbuttonbuttonclickchangeView（C）切换到Cbuttonbodyhtml
　　运行案例可查看在线运行效果
　　代码解释：HTML代码第23行，我们使用keepalive包裹动态组件component，将当前需要展示的组件名通过变量currentView绑定到component的is属性上。HTML代码第57行，我们定义了三个按钮，通过点击按钮切换currentView的值。JS代码第329行，我们定义了组件ComponentA、ComponentB、ComponentC，分别定义了他们的created和beforeDestroy事件。
　　之前我们介绍过，keepalive缓存的组件只有在初次渲染时才会被创建。所以，我们通过修改currentView切换组件时，组件的beforeDestroy事件不会触发。若该组件是第一次渲染，会触发created事件，当再次切换显示该组件时，created事件不会再次触发。4。2。activated和deactivated生命周期
　　activated和deactivated和我们之前学习的生命周期函数一样，也是组件的生命周期函数。不过，activated和deactivated只在内的所有嵌套组件中触发。activated：进入组件时触发。deactivated：退出组件时触发。
　　示例代码：
　　实例演示！DOCTYPEhtmlhtmllangenheadmetacharsetUTF8metanameviewportcontentwidthdevicewidth，initialscale1。0metahttpequivXUACompatiblecontentieedgetitleDocumenttitleheadbodykeepalivecomponent：iscurrentViewcomponentkeepalivebuttonclickchangeView（A）切换到AbuttonbuttonclickchangeView（B）切换到Bbuttonbodyhtml
　　运行案例可查看在线运行效果
　　代码解释：JS代码中，我们定义了组件ComponentA、ComponentB，并分别定义了他们的activated和deactivated事件函数。HTML代码第23行，我们使用keepalive包裹动态组件component，将当前需要展示的组件名通过变量currentView绑定到component的is属性上。HTML代码第56行，我们定义了两个按钮，通过点击按钮切换currentView的值。当我们切换组件显示时，可以看到这样的打印信息：1。ComponentAComponentB会打印出：组件A被移除、组件B被添加2。ComponentBComponentA会打印出：组件B被移除、组件A被添加代码块12
　　TIPS：注意，activated和deactivated这两个生命周期函数一定是要在使用了keepalive组件后才会有的，否则不存在。4。3。include和exclude
　　include和exclude是keepalive的两个属性，允许组件有条件地缓存。include：可以是字符串或正则表达式，用来表示只有名称匹配的组件会被缓存。exclude：可以是字符串或正则表达式，用来表示名称匹配的组件不会被缓存。
　　示例：
　　实例演示！DOCTYPEhtmlhtmllangenheadmetacharsetUTF8metanameviewportcontentwidthdevicewidth，initialscale1。0metahttpequivXUACompatiblecontentieedgetitleDocumenttitleheadbodykeepaliveincludeComponentA，ComponentBcomponent：iscurrentViewcomponentkeepalivebuttonclickchangeView（A）切换到AbuttonbuttonclickchangeView（B）切换到BbuttonbuttonclickchangeView（C）切换到Cbuttonbodyhtml
　　运行案例可查看在线运行效果
　　代码解释：HTML代码第24行，我们使用keepalive包裹动态组件component。给keepalive指定需要缓存组件ComponentA，ComponentB。在之前的小节我们了解到keepalive缓存的组件只有在初次渲染时才会被创建。所以，在案例中，组件ComponentA和ComponentB的created函数只有在第一次组件被创建的时候才会触发，而ComponentC的created函数当每次组件显示的时候都会触发。
　　exclude示例：
　　实例演示！DOCTYPEhtmlhtmllangenheadmetacharsetUTF8metanameviewportcontentwidthdevicewidth，initialscale1。0metahttpequivXUACompatiblecontentieedgetitleDocumenttitleheadbodykeepaliveexcludeComponentA，ComponentBcomponent：iscurrentViewcomponentkeepalivebuttonclickchangeView（A）切换到AbuttonbuttonclickchangeView（B）切换到BbuttonbuttonclickchangeView（C）切换到Cbuttonbodyhtml
　　运行案例可查看在线运行效果
　　代码解释：HTML代码第24行，我们使用keepalive包裹动态组件component。给keepalive指定不需要缓存组件ComponentA，ComponentB。5。小结
　　本节，我们带大家学习了动态组件和缓存组件在项目中的运用。主要知识点有以下几点：使用的方式实现动态组件；使用keepalive实现组件的缓存；使用include属性指定需要缓存的组件；使用exclude属性指定不需要缓存的组件。