1、component

使用component渲染一个“元组件”为动态组件，

(1)【is="组件名"】                                       （2）【:is="变量名"】

  

（3）结合computed属性使用

2、keep-alive

keep-alive能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。可以用于系统中的多标签页面缓存打开的页面数据，避免多次请求页面数据。

<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。

例子：

【App.vue】

<template>
  <div id="app">
    <!-- <component is="pagetwo"></component> -->
    <keep-alive>
      <component :is="component"></component>
    </keep-alive>

    <button @click="component = 'pageone'">show pageOne</button>
    <button @click="component = 'pagetwo'">show pageTwo</button>
  </div>
</template>

<script>
import pageOne from "./components/pageOne";
import pageTwo from "./components/pageTwo";
export default {
  name: "App",
  data() {
    return {
      component: "pageone"
    };
  },
  components: {
    pageone: pageOne,
    pagetwo: pageTwo
  }
};
</script>

<style>
button {
  margin-top: 20px;
}
</style>
 

【pageOne.vue】/【pageTwo.vue】

<template>
  <div class="page-one">
    <h1>pageOne</h1>
    <div class="username">
      姓名：
      <input type="text" />
    </div>
    <div class="age">
      年龄：
      <input type="text" />
    </div>
  </div>
</template>

<script>
export default {
  name: "page-one",
  data() {
    return {
      msg: "Welcome to Your Vue.js App"
    };
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.page-one {
  height: 200px;
  width: 600px;
  background-color: rgb(218, 196, 169);
}
.username {
  margin-bottom: 20px;
}
.age {
  margin-bottom: 20px;
}
</style>

 

参考：vue--keep-alive