Vue动态组件内和keep-alive组件

相关文章推荐

豪情万千的皮带 · 怎么判断字符串是不是json格式 - CSDN文库· 4 月前 ·

有情有义的牛排 · Android 应用内存分析(一) - 简书· 6 月前 ·

空虚的葡萄酒 · 清华大学计算社会科学平台开通CnOpenDa ...· 1 年前 ·

强健的汤圆 · 对象没有存储在谷歌应用引擎数据存储中· 1 年前 ·

正直的荔枝 · js递归方式实现无限级目录下的最后一层查找_ ...· 1 年前 ·

< button @ click = "comName = 'UserName'" > 账号密码填写 </ button > < button @ click = "comName = 'UserInfo'" > 个人信息填写 </ button > < p > 下面显示注册组件: </ p > < div style = "border: 1px solid red" >  < component :is = "comName" > </ component > </ div > </ div > </template> < script > import UserName from "./UserName" ; import UserInfo from "./UserInfo" ; export default { data ( ) { return { comName : "UserName" , components : { UserName , UserInfo , </ script >

vue内置 component 组件, 配合is属性, 设置要显示的组件标签名字。

keep-alive组件

组件切换会导致组件被频繁销毁和重新创建, 大多数情况下是有自己的意义的，但也可能会导致不必要的性能损耗。

使用Vue内置的 keep-alive 组件, 可以让包裹的组件保存在内存中不被销毁。

使用keep-alive组件

<keep-alive>
    <!-- vue内置的组件component, 可以动态显示组件 -->
    <component :is="comName"></component>
</keep-alive>
使用keep-alive组件会补充两个生命周期：
activated  -激活
deactivated -失去激活状态
keep-alive可以提高组件的性能, 内部包裹的标签不会被销毁和重新创建, 触发激活和非激活的生命周期方法。
keep-alive组件-指定缓存
keep-alive默认会将所有包裹的组件进行缓存，使用include属性可以指定缓存组件。
写法1： include="组件名1,组件名2..."
写法2： :include="['组件名1'， '组件名2']"
<keep-alive include="name1,name2">
    <!-- vue内置的组件component, 可以动态显示组件 -->
    <component :is="comName"></component>
</keep-alive>
匹配首先检查组件自身的 name 选项，如果 name 选项不可用，则匹配它的局部注册名称 (父组件 components 选项的键值)。
  分类：
 前端
 标签：
 前端Vue.js