vue中的keep-alive的作用,vue中keepalive用法
动态组件是指动态切换组件的显示和隐藏。下面文章主要介绍Vue动态组件和保活组件的相关信息，通过示例代码非常详细的介绍。有需要的可以参考一下。
目录
动态组件格式注意使用效果目录结构操作效果摘要保活组件使用后台解决方案使用保活组件摘要保活组件-指定缓存语法注意：摘要
动态组件
多个组件使用同一个挂载点，可以动态切换，称为动态组件。
格式
组件：is= com name /组件
注意点
Is只能是动态属性。is=“组件注册后的标记名字符串或数据变量”不能直接赋值给已注册的标记名。
使用效果
需求：完成一个注册功能页面，切换两个按钮，封装两个附加组件：一个填写注册信息，一个填写用户档案信息。
目录结构
根组件
应用程序
组件
用户名. vue #用户名和密码输入框
UserInfo.vue #人生格言和自我介绍框
操作
用户名. vue
模板
差异
h2用户名/h2
Pusername: input//p
密码：输入//p
/div
/模板
脚本
导出默认值{
}
/脚本
UserInfo.vue
模板
差异
h2UserInfo.vue/h2
p人生格言：投入//p
p自我介绍：textarea//p
/div
/模板
脚本
导出默认值{
}
/脚本
父组件APP.vue
模板
差异
按钮@ click= comname= username 填写帐户密码/按钮
button @ click= comname= userinfo 个人信息填写/button
预印组件显示如下：/p
div style=border: 1px纯红
！- vue内置的组件组件可以动态显示组件-
组件：is= com name /组件
/div
/div
/模板
脚本
从导入用户名。/UserName ；
从导入UserInfo。/UserInfo ；
导出默认值{
data() {
返回{
comName:“用户名”，
};
},
组件：{
用户名，
用户信息，
},
};
/脚本
效果
小结
Vue有一个内置的component组件，用is属性设置要显示的组件的标签名。
keep-alive组件
使用背景
组件切换会导致组件的频繁破坏和重新创建，这在大多数情况下有其自身的意义，但也可能导致不必要的性能损失。
解决方法
使用Vue内置的keep-alive组件，可以将包装好的组件保存在内存中而不会被破坏。
使用keep-alive组件
点火电极
！- vue内置的组件组件可以动态显示组件-
组件：is= com name /组件
/保持活力
使用保活组件补充了两个生命周期：
激活-激活停用-停用
小结
Keep-alive可以提高组件的性能，内部封装的标签不会被破坏和重新创建，触发主动和非主动生命周期方法。
keep-alive组件-指定缓存
默认情况下，Keep-alive缓存所有包装的组件，include属性可用于指定缓存的组件。
语法
1: include=组件名1，组件名2 . 2: include= [组件名1 ，组件名2] keep-alive include=名称1，名称2
！- vue内置的组件组件可以动态显示组件-
组件：is= com name /组件
/保持活力
注意：
首先检查组件自己的名称选项是否匹配，如果名称选项不可用，则匹配其本地注册的名称(父组件组件选项的键值)。
总结
关于Vue动态组件和保活组件的这篇文章到此为止。有关Vue动态组件的保活组件的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。