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专题就圆满结束了，感谢同窗们的陪伴，相信这个专题可以真正地帮到你们。也特别但愿你们可以持续关注后续的文章，大彬哥陪伴你们一块儿涨薪，一块儿突破自我。