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專題就圓滿結束了，感謝同學們的陪伴，相信這個專題能夠真正地幫到大家。也特別希望大家能夠持續關注後續的文章，大彬哥陪伴大家一起漲薪，一起突破自我。