Vue實戰—項目的優化（完結篇）

咱們從零開始用vue搭建了外賣項目，對vue也有了更進一步的瞭解，咱們從點菜，評價，商家三個模塊逐步實現，咱們來回顧一下以往模塊：

模塊回顧

點菜模塊：

評價模塊:

商家模塊：

模塊優化

咱們如今須要更進一步完善咱們的項目，如今有一個這樣的需求：

當咱們在點菜欄目下選擇了對應產品，而後又瀏覽其餘項目，此時若是咱們返回點菜欄目下，那麼對應商品仍是依然會存在的。這個需求在技術上實現就須要用到vue的keep-alive。

如今咱們在app.vue中加入keep-alive:

<template>
  <div id="app">
    <myHeader :poiInfo="poiInfo"></myHeader>
    <myNav :commentNum="commentNum"></myNav>
    <keep-alive>
      <router-view/>
    </keep-alive>
    
  </div>
</template>

<script>
import myHeader from "components/Header/Header";
import myNav from "components/Nav/Nav";

export default {
  name: "App",
  components: {
    myHeader,
    myNav
  },
  data() {
    return {
      poiInfo: {},
      commentNum: 0
    };
  },
  created() {
    this.$axios
      .get("api/goods")
      .then(response => {
        let json = response.data;
        if (json.code === 0) {
          
          this.poiInfo = json.data.poi_info;
        }
      })
      .catch(function(error) {
        // handle error
        console.log(error);
      });
   // 評價
    this.$axios
      .get("/api/rates")
      .then(response => {
        let json = response.data;
        if (json.code === 0) {
       
          this.commentNum = json.data.comment_num;
        }
      })
      .catch(function(error) {
        // handle error
        console.log(error);
      });
  }
};
</script>

<style>
#app {
}
</style>

咱們使用<keep-alive>標籤包裹<router-view/>也就是以上咱們編寫的三個模塊。這樣能在組件切換過程當中將狀態保留在內存中，防止重複渲染DOM。從而知足了咱們項目需求，也提升了應用的性能。

總結

本篇咱們作了項目最後的優化。整個vue專題就圓滿結束了，感謝同窗們的陪伴，相信這個專題可以真正地幫到你們。也特別但願你們可以持續關注後續的文章，大彬哥陪伴你們一塊兒漲薪，一塊兒突破自我。