vue动态组件与插件到底是什么？

动态组件

有的时候，我们需要在多个不同的组件之间进行切换。虽然我们可以通过 v-if 来处理，但是会比较麻烦，vue 提供了一个更方便的方式来处理这种情况，下边我们通过代码示例来看一下！

我们准备一个选项卡，来感受一下动态组件的方便之处

根组件
<template>
  <div id="app">
    <button @click="goto('InBox')" :class="{ current: currentComponent === 'InBox' }">收邮件</button>
    <button @click="goto('PostMail')" :class="{ current: currentComponent === 'PostMail' }">发邮件</button>
    <button @click="goto('RecycleBin')" :class="{ current: currentComponent === 'RecycleBin' }">垃圾箱</button>
    <hr />

    <InBox v-if="currentComponent==='InBox'" ></InBox>
    <PostMail v-if="currentComponent==='PostMail'" ></PostMail>
    <RecycleBin v-if="currentComponent==='RecycleBin'" ></RecycleBin>
  </div>
</template>

<script>
import InBox from "./components/InBox.vue";
import PostMail from "./components/PostMail.vue";
import RecycleBin from "./components/RecycleBin.vue";

export default {
  name: "App",
  data() {
    return {
      currentComponent: "InBox"
    };
  },
  components: {
    InBox,
    PostMail,
    RecycleBin
  },
  methods: {
    goto(target) {
      this.currentComponent = target;
    },
    created() {
      console.log(this.currentComponent + ":created");
    },
    destroyed() {
      console.log(this.currentComponent + "InBox:destroyed");
    }
  },
};
</script>

<style>
.current {
  background: yellow;
}
</style>

子组件1===============================================
<template>
  <div>
    <ul>
      <li v-for="item of items" :key="item">
        <input type="checkbox" />
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "InBox",
  data() {
    return {
      items: ["111111", "22222222222", "aaaaaaaa", "3333333"]
    };
  },

  created() {
    console.log("InBox:created");
  },
  destroyed() {
    console.log("InBox:destroyed");
  }
};
</script>

子组件2===============================================
<template>
  <div>PostMail</div>
</template>

<script>
export default {
  name: "PostMail",

  created() {
      console.log("PostMail:created");
    },
    destroyed() {
      console.log("PostMail:destroyed");
    }
  
};
</script>

子组件3===============================================
<template>
  <div>RecycleBin</div>
</template>

<script>
export default {
  name: "RecycleBin",
  created() {
    console.log("RecycleBin:created");
  },
  destroyed() {
    console.log("RecycleBin:destroyed");
  }
};
</script>

我们会发现，当组件切换的时候，都会触发组件的销毁和重建。首先，性能不好。其次，会丢失组件状态

我们可以通过keep-alive 组件 来解决上述问题

<keep-alive>
	<component :is="currentComponent"></component>
</keep-alive>

现在就处理了上述问题，同时 keep-alive 会触发 activated、deactivated 两个生命周期函数

1. keep-alive 组件激活时调用

2. keep-alive 组件停用时调用

插件

插件通常是用来给 vue 提供扩展功能的一种方式

插件通常只有两个来源：

1. 自定义
2. 第三方

插件需要一个引入和使用就可以了注意！插件的引入和使用都需要写在main.js内，且引入需要写在使用之前，使用需要写在new vue之前

1. 引入

import ppt from './AK'

2. 使用

Vue.use(ppt);

书写插件时需要注意：

1. 如果插件是一个对象，必须提供 install 方法。

export default{
    // 把内容放到指定的方法中
    install(){
        console.log("我是自定义的对象插件")
    }
}

2. 如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入

export default function(){
    vue.filter("指令名",执行的功能);
}

比如说我们按照上述的过滤器，写出一个转换成大写的效果(注意，需要接受vue)

import Vue from 'vue'

export default function(_vue){
	// 因为install方法 在被调用时 会主动接受一个参数(vue实例)
	// 所以我们这里直接使用参数即可！！！
    _vue.filter("cf",(v)=>{
        return v.toUpperCase()
    });
}

现在插件写好了，引入后也使用了，我们去看一下页面效果

扩展

插件的使用方式还有portotype

import引入进来的是一个对象，所以有portotype很正常，然后我们在使用的时候可以这样去写

import ak from './AK'

Vue.prototype.$cf = ak
// cf是随便写的

但是不推荐使用
这样会操作vue的原型！