vue 之 動態組件(動態組件-生命周期,&異步組件-懶加載)

一.動態組件 

原理:

過程一: 每次進行組件間的切換時,Vue都創建了一個新的組件實例,同時存在銷毀過程

過程二:為了避免過程一每次進行銷毀重建的問題,那么可以通過 keep-alive 來處理

 

 

 語法:

<component v-bind:is="currentTabComponent"></component>　　

過程一 案例:

App.vue

<template>
  <div>
    <div id="dynamic-component-demo" class="demo">
      <button
        v-for="tab in tabs"
        v-bind:key="tab"
        v-bind:class="['tab-button', { active: currentTab === tab }]"
        v-on:click="currentTab = tab"
      >
        {{ tab }}
      </button>

      <component v-bind:is="currentTab" class="tab"></component>
    </div>
    <!-- <button @click="myName = 'my-header'">顯示 my-header</button>
    <button @click="myName = 'my-footer'">顯示 my-footer</button> -->
  </div>
</template>
<script>
import MyHeader from "./components/MyHeader.vue";
import MyFooter from "./components/MyFooter.vue";
import MyMain from "./components/MyMain.vue";
export default {
  data() {
    return {
      currentTab: "my-header",
      tabs: ["my-header", "my-main", "my-footer"],
    };
  },
  components: {
    MyHeader,
    MyMain,
    MyFooter,
  },
  methods: {},
  mounted() {},
  created() {},
};
</script>
<style>
.tab-button {
  padding: 6px 10px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border: 1px solid #ccc;
  cursor: pointer;
  background: #f0f0f0;
  margin-bottom: -1px;
  margin-right: -1px;
}
.tab-button:hover {
  background: #e0e0e0;
}
.tab-button.active {
  background: #e0e0e0;
}
.tab {
  border: 1px solid #ccc;
  padding: 10px;
}
</style>

　

MyMain.vue


<template>
  <div>
    <div>main</div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  created() {
    console.log("my-main組件重新生成了");
  },
  beforeDestroy() {
    console.log("my-main組件被銷毀了");
  },
};
</script>
<style></style>

　

過程二 案例改進

App.vue

<template>
  <div>
    <div id="dynamic-component-demo" class="demo">
      <button
        v-for="tab in tabs"
        v-bind:key="tab"
        v-bind:class="['tab-button', { active: currentTab === tab }]"
        v-on:click="currentTab = tab"
      >
        {{ tab }}
      </button>
      <keep-alive>
        <component v-bind:is="currentTab" class="tab"></component>
      </keep-alive>
    </div>
    <!-- <button @click="myName = 'my-header'">顯示 my-header</button>
    <button @click="myName = 'my-footer'">顯示 my-footer</button> -->
  </div>
</template>
<script>
import MyHeader from "./components/MyHeader.vue";
import MyFooter from "./components/MyFooter.vue";
import MyMain from "./components/MyMain.vue";
export default {
  data() {
    return {
      currentTab: "my-header",
      tabs: ["my-header", "my-main", "my-footer"],
    };
  },
  components: {
    MyHeader,
    MyMain,
    MyFooter,
  },
  methods: {},
  mounted() {},
  created() {},
};
</script>
<style>
.tab-button {
  padding: 6px 10px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border: 1px solid #ccc;
  cursor: pointer;
  background: #f0f0f0;
  margin-bottom: -1px;
  margin-right: -1px;
}
.tab-button:hover {
  background: #e0e0e0;
}
.tab-button.active {
  background: #e0e0e0;
}
.tab {
  border: 1px solid #ccc;
  padding: 10px;
}
</style>

　

動態組件生命周期

<template>
  <div>
    <div>header {{ num }}</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      num: 0,
    };
  },
  created() {},
  activated() {
    this.num = localStorage.getItem("num");
  },
  deactivated() {
    console.log('銷毀了')
  },
};
</script>
<style></style>

　　

二.異步組件

第一步:如何實現懶加載

<template>
  <div>
    <h1>Vue中異步組件的使用</h1>
    <button @click="handleClick">按鈕</button>
    <div v-if="isShow">
      <List />
    </div>
  </div>
</template>
<script>
// import List from "./components/List.vue";
export default {
  data() {
    return {
      isShow: false,
    };
  },
  components: {
    List: () => import(/* webpackChunName:"list" */ "./components/List.vue"),
  },
  methods: {
    handleClick() {
      this.isShow = !this.isShow;
    },
  },
};
</script>
<style>
div {
  text-align: center;
}
</style>

　　

第二步:定義一個工廠函數

<template>
  <div>
    <h1>Vue中異步組件的使用</h1>
    <button @click="handleClick">按鈕</button>
    <div v-if="isShow">
      <AsyncList />
    </div>
  </div>
</template>
<script>
// import List from "./components/List.vue";
import LoadingComponent from "./components/LoadingComponent.vue";
import ErrorComponent from "./components/ErrorComponent.vue";
//工廠函數
const AsyncList = () => ({
  component: import("./components/List.vue"),
  loading: LoadingComponent,
  error: ErrorComponent,
  delay: 200, //延遲200毫秒
  timeout: 1, //超時
});
export default {
  data() {
    return {
      isShow: false,
    };
  },
  components: {
    AsyncList,
  },
  methods: {
    handleClick() {
      this.isShow = !this.isShow;
    },
  },
};
</script>
<style>
div {
  text-align: center;
}
</style>