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);

#### 后话

-------------------------------------------------------------



对于面试，说几句个人观点。



面试，说到底是一种考试。正如我们一直批判应试教育脱离教育的本质，为了面试学习技术也脱离了技术的初心。但考试对于人才选拔的有效性是毋庸置疑的，几千年来一直如此。除非你有实力向公司证明你足够优秀，否则，还是得乖乖准备面试。这也并不妨碍你在通过面试之后按自己的方式学习。
其实在面试准备阶段，个人的收获是很大的，我也认为这是一种不错的学习方式。首先，面试问题大部分基础而且深入，这些是平时工作的基础。就好像我们之前一直不明白学习语文的意义，但它的意义就在每天的谈话间。

所谓面试造火箭，工作拧螺丝。面试往往有更高的要求，也迫使我们更专心更深入地去学习一些知识，也何尝不是一种好事。