这 22 个 Vue3 的实用技巧，你可能还不知道！

以下内容来自公众号逆锋起笔，关注每日干货及时送达

作者：月夕 

链接：https://juejin.cn/post/7005880217684148231

演示代码使用 Vue3 + ts + Vite 编写，但是也会列出适用于 Vue2 的优化技巧，如果某个优化只适用于 Vue3 或者 Vue2，我会在标题中标出来。

一、代码优化

v-for 中使用 key

• 不要使用可能重复的或者可能变化 key 值（控制台也会给出提醒）
• 如果数组中的数据有状态需要维持时（例如输入框），不要使用数组的 index 作为 key 值，因为如果在数组中插入或者移除一个元素时，其后面的元素 index 将会变化，这回让vue进行原地复用时错误的绑定状态。
• 如果数组中没有唯一的 key值可用，且数组更新时不是全量更新而是采用类似push，splice来插入或者移除数据时，可以考虑对其添加一个 key 字段，值为 Symbol() 即可保证唯一。

何时使用何种key？

1. 数据没有独立的状态
2. 数据不会进行 增加/删除 等会影响后面元素key变化的操作

哪何时使用 id 作为 key 呢？

1. 无法使用 index 作为 key 的时候

v-if/v-else-if/v-else 中使用 key

可能很多人都会忽略这个点

如果只有一个 v-if ，没有 v-else 或者 v-if-else的话，就没有必要加 key 了

  <transition>
    <button
      v-if="isEditing"
      v-on:click="isEditing = false"
    >
      Save
    button>
    <button
      v-else
      v-on:click="isEditing = true"
    >
      Edit
    button>
  transition>

.v-enter-active, .v-leave-active {
  transition: all 1s;
}
.v-enter, .v-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
.v-leave-active {
  position: absolute;
}

v-for 和 v-if 不要一起使用（Vue2）

此优化技巧仅限于Vue2，Vue3 中对 v-for 和 v-if 的优先级做了调整

永远不要把 v-if 和 v-for 同时用在同一个元素上。 引至 Vue2.x风格指南^[1]

注意： Vue3 中 v-if 优先级高于 v-for，所以当 v-for 和 v-if 一起使用时效果类似于 Vue2 中把 v-if 上提的效果

<ul>
  <li v-for="user in users" v-if="user.active">
    {{ user.name }}
  li>
ul>

<ul v-if="active">
  <li v-for="user in users">
    {{ user.name }}
  li>
ul>

// js
let usersActive = computed(()=>users.filter(user => user.active))

// template
<ul>
    <li v-for="user in usersActive">
      {{ user.name }}
    li>
ul>

合理的选择 v-if 和 v-show

使用简单的 计算属性

应该把复杂计算属性分割为尽可能多的更简单的 property。

• 易于测试

  当每个计算属性都包含一个非常简单且很少依赖的表达式时，撰写测试以确保其正确工作就会更加容易。

• 易于阅读

  简化计算属性要求你为每一个值都起一个描述性的名称，即便它不可复用。这使得其他开发者 (以及未来的你) 更容易专注在他们关心的代码上并搞清楚发生了什么。

• 更好的“拥抱变化”

  任何能够命名的值都可能用在视图上。举个例子，我们可能打算展示一个信息，告诉用户他们存了多少钱；也可能打算计算税费，但是可能会分开展现，而不是作为总价的一部分。微信搜索readdot，关注后回复视频教程获取23种精品资料

  小的、专注的计算属性减少了信息使用时的假设性限制，所以需求变更时也用不着那么多重构了。

引至 Vue2风格指南^[2]

let price = computed(()=>{
  let basePrice = manufactureCost / (1 - profitMargin)
  return (
      basePrice -
      basePrice * (discountPercent || 0)
  )
})

let basePrice = computed(() => manufactureCost / (1 - profitMargin))
let discount = computed(() => basePrice * (discountPercent || 0))
let finalPrice = computed(() => basePrice - discount)

functional 函数式组件（Vue2）

注意，这仅仅在 Vue2 中被作为一种优化手段，在 3.x 中，有状态组件和函数式组件之间的性能差异已经大大减少，并且在大多数用例中是微不足道的。因此，在 SFCs 上使用 functional 的开发人员的迁移路径是删除该 attribute，并将 props 的所有引用重命名为 $props，将 attrs 重命名为 $attrs。

<template>
    <div class="cell">
        <div v-if="value" class="on">div>
        <section v-else class="off">section>
    div>
template>

<script>
export default {
    props: ['value'],
}
script>

<template functional>
    <div class="cell">
        <div v-if="props.value" class="on">div>
        <section v-else class="off">section>
    div>
template>

<script>
export default {
    props: ['value'],
}
script>

• 没有this（没有实例）
• 没有响应式数据

拆分组件

<template>
  <div :style="{ opacity: number / 300 }">
    <div>{{ heavy() }}div>
  div>
template>

<script>
export default {
  props: ['number'],
  methods: {
    heavy () { /* HEAVY TASK */ }
  }
}
script>

<template>
  <div :style="{ opacity: number / 300 }">
    <ChildComp/>
  div>
template>

<script>
export default {
  props: ['number'],
  components: {
    ChildComp: {
      methods: {
        heavy () { /* HEAVY TASK */ }
      },
      render (h) {
        return h('div', this.heavy())
      }
    }
  }
}
script>

使用局部变量

<template>
  <div :style="{ opacity: start / 300 }">{{ result }}div>
template>

<script>
import { heavy } from '@/utils'

export default {
  props: ['start'],
  computed: {
    base () { return 42 },
    result () {
      let result = this.start
      for (let i = 0; i < 1000; i++) {
        result += heavy(this.base)
      }
      return result
    }
  }
}
script>

<template>
  <div :style="{ opacity: start / 300 }">
    {{ result }}div>
template>

<script>
import { heavy } from '@/utils'

export default {
  props: ['start'],
  computed: {
    base () { return 42 },
    result () {
      const base = this.base
      let result = this.start
      for (let i = 0; i < 1000; i++) {
        result += heavy(base)
      }
      return result
    }
  }
}
script>

这里主要是优化前后的组件的计算属性 result 的实现差异，优化前的组件多次在计算过程中访问 this.base，而优化后的组件会在计算前先用局部变量 base，缓存 this.base，后面直接访问 base。

那么为啥这个差异会造成性能上的差异呢，原因是你每次访问 this.base 的时候，由于 this.base 是一个响应式对象，所以会触发它的 getter，进而会执行依赖收集相关逻辑代码。类似的逻辑执行多了，像示例这样，几百次循环更新几百个组件，每个组件触发 computed 重新计算，然后又多次执行依赖收集相关逻辑，性能自然就下降了。

从需求上来说，this.base 执行一次依赖收集就够了，把它的 getter 求值结果返回给局部变量 base，后续再次访问 base 的时候就不会触发 getter，也不会走依赖收集的逻辑了，性能自然就得到了提升。

引至 揭秘 Vue.js 九个性能优化技巧^[4]

使用 KeepAlive

注意： 滥用 keep-alive 只会让你的应用变得更加卡顿，因为他会长期占用较大的内存

事件的销毁

function scrollFun(){ /* ... */}
document.addEventListener("scroll", scrollFun)

onBeforeUnmount(()=>{
  document.removeEventListener("scroll", scrollFun)
})

function scrollFun(){ /* ... */}
document.addEventListener("scroll", scrollFun)

this.$once('hook:beforeDestroy', ()=>{
  document.removeEventListener("scroll", scrollFun)
})

function scrollFun(){ /* ... */}

export default {
  created() {
    document.addEventListener("scroll", scrollFun)
  },
  beforeDestroy(){
    document.removeEventListener("scroll", scrollFun)
  }
}

图片加载

采用合理的数据处理算法

/**
 * 数组转树形结构,时间复杂度O(n)
 * @param list 数组
 * @param idKey 元素id键
 * @param parIdKey 元素父id键
 * @param parId 第一级根节点的父id值
 * @return {[]}
 */
function listToTree (list,idKey,parIdKey,parId) {
    let map = {};
    let result = [];
    let len = list.length;

    // 构建map
    for (let i = 0; i < len; i++) {
        //将数组中数据转为键值对结构 (这里的数组和obj会相互引用，这是算法实现的重点)
        map[list[i][idKey]] = list[i];
    }

    // 构建树形数组
    for(let i=0; i < len; i++) {
        let itemParId = list[i][parIdKey];
        // 顶级节点
        if(itemParId === parId) {
            result.push(list[i]);
            continue;
        }
        // 孤儿节点，舍弃(不存在其父节点)
        if(!map[itemParId]){
            continue;
        }
        // 将当前节点插入到父节点的children中（由于是引用数据类型，obj中对于节点变化，result中对应节点会跟着变化）
        if(map[itemParId].children) {
            map[itemParId].children.push(list[i]);
        } else {
            map[itemParId].children = [list[i]];
        }
    }
    return result;
}

其他

• 冻结对象（避免不需要响应式的数据变成响应式）
• 长列表渲染-分批渲染
• 长列表渲染-动态渲染（vue-virtual-scroller^[5]）
• 微信搜索readdot，关注后回复视频教程获取23种精品资料
  
• ...

二、 首屏/体积优化

• 体积
• 代码分割
• 网络

体积优化

• 压缩打包代码: webpack 和 vite 的生产环境打包默认就会压缩你的代码，这个一般不需要特殊处理，webpack 也可以通过对应的压缩插件手动实现

• 取消 source-map: 可以查看你的打包产物中是否有 .map 文件，如果有你可以将 source-map 的值设置为false或者空来关闭代码映射（这个占用的体积是真的大）

• 打包启用 gizp 压缩: 这个需要服务器也开启允许 gizp 传输，不然启用了也没啥用（ webpack 有对应的 gzip 压缩插件，不太版本的 webpack 压缩插件可能不同，建议先到官网查询）

代码分割

• 路由懒加载
• 异步组件

网络

参考资料