导航

HTML

CSS

JavaScript

浏览器 & 网络

版本管理

框架

构建工具

TypeScript

性能优化

软实力

算法

UI、组件库

Node

业务技能

针对性攻坚

AI

🔥 案例说明

登录 tab 的 demo

• 页面首次加载只会显示tab中的账号密码，剩下俩暂时不用加载
• 所以可以用到动态 import 组件
• 来回切tab不希望重新加载组件，所以用到 keep-alive

keep-alive 缓存组件

• 组件切换时，缓存组件，保存组件状态，避免反复渲染导致性能问题
• keep-alive 有 include 和 exclude 属性，这两个属性决定哪些组件可以进入缓存。
• 另外还有一个 max 属性，通过它可以设置最大缓存数，当缓存的实例超过设置的数时，vue 会移除最久没有使用的组件缓存。
• 受 keep-alive 的影响，其内部所有嵌套的组件都具有两个生命周期钩子函数，分别是
• activated 组件激活时触发（第一次activated触发是在mounted之后）
• deactivated组件失活时触发

<keep-alive></keep-alive>

实现原理

在具体实现上，keep-alive 在内部维护了一个 key数组 和一个 缓存对象

• key 数组: 记录目前缓存的组件 key 值，如果组件没有指定 key 值，会自动生成一个唯一的 key 值
• cache 对象： 以 key 值为键，vnode 为值，用于缓存组件对应的虚拟DOM

//keep-alive 内部声明周期函数
  created () {
    this.cache = Object.create(null)
    this.keys = []
  },

• 在 keep-alive 的渲染函数中，其基本逻辑是判断当前渲染的 vnode 是否有对应的缓存，如果有，会从缓存中读取到对应的组件实例，如果没有就会把它缓存。
• 当缓存的数量超过 max 设置的数值时，keep-alive 会移除 key数组 中的第一个元素

 render () {
    const slot = this.$slots.default; //获取默认插槽
    const vnode = getFirstComponentChild(slot); //得到插槽中第一个组件的vnode
    const name = getComponentName(vnode.componentOptions); //获取组件名字

    const { cache, keys } = this; //获取当前的缓存内对象和key数组
    const key: ?string = vnode.key == null
        ? componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : '')
        : vnode.key; //获取组件的key值，如果没有key值，会按照规则自动生成
      if (cache[key]) {
      //有缓存
      //重用组件实例
        vnode.componentInstance = cache[key].componentInstance
        remove(keys, key); //删除key值
        //将key值加入到数组末尾，这样是为了保证最近使用的组件在数组中靠后，主要是为了方便设置的max值删除很久没使用的组件
        keys.push(key)
      } else {
      //没有缓存的则进行缓存
        cache[key] = vnode
        keys.push(key)
        // prune oldest entry
        if (this.max && keys.length > parseInt(this.max)) {
        //超过最大缓存数量，移除第一个key对应的缓存
          pruneCacheEntry(cache, keys[0], keys, this._vnode)
        }
      }

      vnode.data.keepAlive = true
    }
    return vnode || (slot && slot[0])
  }

来源：https://segmentfault.com/a/1190000040105722

动态组件

• 在交互中，组件的渲染是不确定的，根据交互的操作来来决定渲染哪个组件

<component :is="DynamicComponent"></component>

异步组件

• 没有必要在当前渲染的组件
• 被分割成代码块文件，按需从服务器上下载并加载

🔥 Vue2 引入

const AsyncComponent = () => import('./组件路径');

export default {
	components: {
  	AsyncComponent
  }
}

或者：

export default {
  components: {
    QrcodeLogin: () => import('./QrcodeLogin.vue')
  },
}

Vue3 引入

AsyncComponent = defineAsyncComponent(() =>
	new Promise((resolve, reject) => {
		resolve({
    	data() {
      	return {...}
      },
      template: ``
    });
	});
);

或者有大括号：

AsyncComponent = defineAsyncComponent(() => {
	return new Promise((resolve, reject) => {
		resolve({
    	data() {
      	return {...}
      },
      template: ``
    });
	});
});

或者：

// npm install Vue 的方式
import { defineAsyncComponent } from 'Vue';

// cdn 引入 Vue 的方式
const { defineAsyncComponent } = Vue;

AsyncComponent = defineAsyncComponent(() => import('./组件路径'));

引入后使用 - 局部

const AsyncComponent = defineAsyncComponent(() => import('./组件路径'));

export default {
	components: {
  	AsyncComponent
  }
}

// or

export default {
	components: {
  	AsyncComponent: defineAsyncComponent(() => import('./组件路径'));
  }
}

引入后使用 - 全局

const AsyncComponent = defineAsyncComponent(() => import('./组件路径'));

app.component('async-comp', AsyncComponent);

起别名

案例代码

MainLogin.vue

keep-alive + compoment 动态组件 + import 异步组件

• keep-alive 使切换组件时，input 输入的状态不丢失

<template>
  <div class="login-tab">
    <div class="login-nav">
      <div
        v-for="tab of tabData"
        :key="tab"
        :class="['nav-item', { active: currentTab === tab }]"
        @click="changeTab(tab)"
      >{{ tab }}</div>
    </div>
    <div class="login-component">
      <keep-alive>
        <component :is="currentTabComponent"></component>
      </keep-alive>
    </div>
  </div>
</template>

完整代码

<template>
  <div class="login-tab">
    <div class="login-nav">
      <div
        v-for="tab of tabData"
        :key="tab"
        :class="['nav-item', { active: currentTab === tab }]"
        @click="changeTab(tab)"
      >{{ tab }}</div>
    </div>
    <div class="login-component">
      <keep-alive>
        <component :is="currentTabComponent"></component>
      </keep-alive>
    </div>
  </div>
</template>

<script>
import AccountLogin from './AccountLogin.vue';
const QrcodeLogin = Vue.defineAsyncComponent(() => import('./QrcodeLogin.vue'));
const MobileLogin = Vue.defineAsyncComponent(() => import('./MobileLogin.vue'));
export default {
  name: 'MainLogin',
  components: {
    AccountLogin,
    QrcodeLogin,
    MobileLogin,
    // vue2用下面形式:
    // QrcodeLogin: () => import('./QrcodeLogin.vue')
  },
  data() {
    return {
      currentTab: 'Account',
      tabData: ['Account', 'Qrcode', 'Mobile'],
    }
  },
  computed: {
    currentTabComponent() {
      // <account-login></account-login>
      return this.currentTab.toLowerCase() + '-login';
    }
  },
  methods: {
    changeTab(tab) {
      this.currentTab = tab;
    }
  }
}
</script>

<style lang="scss">
.login-tab {
  width: 500px;
  margin: 50px auto;
  border: 1px solid #000;

  .login-nav {
    height: 50px;
    border-bottom: 1px solid #000;

    .nav-item {
      float: left;
      width: 33.33%;
      text-align: center;
      line-height: 50px;

      &.active {
        background-color: #000;
        color: #fff;
      }
    }
  }
}
</style>