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