vue学习——动态组件

一、Vue中提供了<component>来挂载不同组件，使用 is 选择要展示的组件。

案例：

index.vue

<template>
  <div>
      <component :is="cmpName"></component> <br/>
      <button @click="changeCmp('cmpone')">第一个组件</button>
      <button @click="changeCmp('cmptwo')">第二个组件</button>
      <button @click="changeCmp('cmpthree')">第三个组件</button>
  </div>
</template>
<script>
// 导入子组件
import cmpone from './cmpone'
import cmptwo from './cmptwo '
import cmpthree from './cmpthree '
export default {
  // 注册组件
  components: {
    cmpone,
    cmptwo,
    cmpthree 
  },
  methods: {
    changeCmp(cmpName) {
      this.cmpName = cmpName
    }
  },
  data(){
    return {
      cmpName: 'cmpone' //默认显示第一个组件
    }
  }
}
</script>

<component :is="cmpName"></component> <br/>

cmpone.vue 

<template>
  <div>这是子组件1</div>
</template>

 其他两个页面类似。

二、keepAlive

重新创建动态组件的行为通常是非常有用的，如果希望那些标签的组件实例能够被在它们第一次被创建的时候缓存下来。为了解决这个问题，我们可以用一个 <keep-alive>元素将其动态组件包裹起来。

和 transition 相似，keep-alive 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。

   <keep-alive>  <component v-bind:is='show'   ></component></keep-alive>

在keep-alive中直接添加 include，cachedViews（Array类型：包含vue文件的组件name都将被缓存起来）；反之exclude则是不包含；

注意：所有.vue组件文件都必须附上name属性！！！建议用vuex管理cachedViews

<keep-alive :include="cachedViews">
      <router-view></router-view>
</keep-alive>

三、activate

 

生命周期钩子（beforeCreate,created,beforeMonted,mounted.beforUpdate,update,beforDestroy,destroyed）

当在这些组件之间切换的时候都会请求一些请求过的数据，每次请求都会导致重复渲染影响性能。这些数据可以存到缓存。此时使用keep-alive将组建包裹起来。但这样以上八种生命周期钩子将失效。取而代之的时activate和deactivated

　　activate：是在被包裹组建被激活的状态下使用的生命周期钩子

　　deactivated：在被包裹组件停止使用时调用

实例

<template>
        <component :is="currentView"></component>    
        <!-- 动态组件缓存 -->
        <keep-alive>
            <component :is="currentView">
            </component>
        </keep-alive>
</template>
<script>
    data(){
        return{  
            //通过动态变化currentView来实现动态模块的功能
            currentView: 'v-home1',
        }
    },
    activated() {
        console.log('activate called')
        setTimeout(() => {
            console.log('activate done');
        }, 100);
    }
 
</script>

 

当引入keep-alive的时候，页面第一次进入，钩子的触发顺序created-> mounted-> activated，退出时触发deactivated。当再次进入（前进或者后退）时，只触发activated。

 .作用
返回dom不让其重新刷新，在vue-view外面包一层, 当引入keep-alive的时候，页面第一次进入，钩子的触发顺序created-> mounted-> activated，退出时触发deactivated。当再次进入（前进或者后退）时，只触发activated。

 事件挂载的方法等，只执行一次的放在 mounted 中；组件每次进去执行的方法放在 activated 中； 
————————————————

生命周期函数：就是vue在某个时间段会自动执行的函数
1.beforeCreate(){}在执行的时候，data还有methods都没有被初始化

2.created(){} data还有methods都被初始化好了，如果要调用methods方法或者操作data里面的数据，最早只能在created里面进行操作。

3.beforeMount(){} 表示模板已经在内存中编辑完成了，但是尚未渲染到模板页面中。即页面中的元素，没有被真正的替换过来，只是之前写的一些模板字符串。

4.mounted(){} 表示内存中模板已经真实的挂载到页面中去了，用户可以看到渲染好的界面了

   注意这是一个生命周期函数的最后一个函数了，执行完这个函数表示 整个vue实例已经初始化完成了，组件脱离了创建阶段，进入运行阶段。

下面是运行期间的两个生命周期函数的钩子：

5.beforeUpdate(){}  表示我们的界面还没更新 但是data里面的数据是最新的。即页面尚未和最新的data里面的数据包吃同步。

6.update(){} 表示页面和data里面的数据已经包吃同步了 都是最新的。

7.beforeDestory(){}  当执行这个生命周期钩子的时候 vue的实例从运行阶段进入销毁阶段 此时实例身上的data 还有 methods处于可用的状态。

8.Destoryed(){} 表示组件已经完全被销毁了 组件中所有的实例方法都是不能用了
————————————————
版权声明：本文为优快云博主「你算哪块小饼干啊呀呀」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.youkuaiyun.com/HANGSOME123/article/details/97142383

四、transition

两个动态组件之间如何过渡。

 五、自定义组件使用 v-for

 

 

参考：https://www.jianshu.com/p/28ee8444d957