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专题就圆满结束了，感谢同学们的陪伴，相信这个专题能够真正地帮到大家。也特别希望大家能够持续关注后续的文章，大彬哥陪伴大家一起涨薪，一起突破自我。