【无标题】

组件缓存keep-alive

面试题逐字稿： keep-alive作用

答： keep-alive是vue的内置组件，它的作用是缓存组件。 keep-alive本身不会被渲染成DOM元素，也不会出现在父组件中。 在组件切换过程中，把切换出去的组件保留在内存中,防止重复渲染DOM,减少加载时间及性能消耗,提高用户体验性。

补充回答：被包含在 keep-alive 中创建的组件，会多出两个生命周期的钩子: activated（组件激活时使用） 与 deactivated（组价离开时调用）

基本语法

思考：从面经 点到 收藏，又点回 面经，面经的数据需要重新加载么？不需要，希望缓存下来！

如果希望组件被缓存下来，可以在外面包一个 keep-alive 组件 ~

<template>
  <div class="h5-wrapper">
    <div class="content">
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </div>
    <nav class="tabbar">
      <router-link to="/article">面经</router-link>
      <router-link to="/collect">收藏</router-link>
      <router-link to="/like">喜欢</router-link>
      <router-link to="/user">我的</router-link>
    </nav>
  </div>
</template>

 

keep-alive对应的两个钩子

当组件被keep-alive管理时，会多出两个生命周期钩子，activated / deactivated

export default {
  name: 'ArticlePage',
  data() {
    return {
      articles: []
    };
  },
  async created() {
    const { data } = await axios.get(
      'https://mock.boxuegu.com/mock/3083/articles',
    );
    this.articles = data.result.rows;
    console.log(this.articles)
  },
  activated() {
    console.log('缓存组件被激活')
  },
  deactivated() {
    console.log('缓存组件被隐藏')
  }
};

Vant介绍（vue全家桶之移动端布局）

vue全家桶 = vue.js(数据驱动) + axios(网络请求) + vueRouter(路由单页面应用) + vueCli(脚手架) + vuex(全局数据管理) + vant移动端布局(PC端elementUI)

组件库：第三方封装好了很多很多的组件，整合到一起就是一个组件库。

• 了解vue开发中一些常用的布局组件库（把常用的一些盒子封装成组件）

  • 1.移动端（Vant, Cube-UI, NutUI ）

    • 2.PC端 （ element-ui, Ant Design of Vue, iView）`

  • 3.微信小程序： uniapp

• 一般布局类组件库有两种导入方式

  • 导入所有组件：一次性导入所有组件，用的时候就不需要再单独导入。但是这样会增加项目体积。（工作中不推荐，新手推荐）

  • 按需导入 ： 用到什么，就导入什么。用起来麻烦，但是可以减少项目体积（工作中推荐，后面会介绍）

    Vant导入所有组件

    如果是Vue3项目，则可以使用最新版Vant : Vant 4 - Lightweight Mobile UI Components built on Vue

    如果是Vue2项目，则需要使用Vant2版本：Vant 2 - Mobile UI Components built on Vue

  • 1.下载vant

    npm i vant@latest-v2 -S

  • 导入所有组件(main.js中导入)

    • // 1.导入vant
      import Vant from 'vant';
      import 'vant/lib/index.css';
      Vue.use(Vant);

  • 3.测试是否导入成功（随便找一个组件CV到你的App.vue观察组件是否加载）

    • <template>
        <div>
          <h1>根组件</h1>
          <van-button type="primary">主要按钮</van-button>
          <van-button type="info">信息按钮</van-button>
          <van-button type="default">默认按钮</van-button>
          <van-button type="warning">警告按钮</van-button>
          <van-button type="danger">危险按钮</van-button>
        </div>
      </template>