动态组件、组件缓存

动态组件

多个组件使用一个挂载点,并动态切换,就是动态组件

需求:完成一个注册功能页面,2个按钮,一个填写注册信息,一个填写用户简介信息 

步骤

  • 定义两个组件 UserName.vue,UserInfo.vue 2个组件
  • 引入到 App.vue组件中
  • data中定义变量来存放要显示的组件名
  • 要设置挂载点 ,使用 is 属性来设置要显示哪个组件
  • 点击按钮,修改变量里的组件名

App.vue




 UserName.vue





UserInfo.vue





缺点:要切换的组件很多时,要在根组件引入很多组件

组件动态不常用,组件路由更常用

组件缓存 

组件切换会导致组件被频繁的销毁和重新创建性能不高

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

演示:给UserName.vue 和 UserInfo.vue 注册created 和 destroyed 生命周期事件,观察创建和销毁的过程

使用 keep-alive 内置的vue组件,让动态组件缓存

语法:

        Vue内置的keep-alive组件,包裹要频繁切换的组件

App.vue

    

补充生命周期

activated  激活时触发

deactivated  失去激活状态触发




你可能感兴趣的:(vue基础语法,vue)