vue3性能优化相关

性能优化

scrtpt setup

scrtpt setup 是 vue3 的语法糖，简化了组合式 API 的写法，并且运行性能更好。

使用 script setup 语法糖的特点：

1、属性和方法无需返回，可以直接使用。

2、引入组件的时候，会自动注册，无需通过 components 手动注册。

3、使用 defineProps 接收父组件传递的值。

4、useAttrs 获取属性，useSlots 获取插槽，defineEmits 获取自定义事件。

5、默认不会对外暴露任何属性，如果有需要可使用 defineExpose 。

避免 v-for 和 v-if 同时使用

<ul>
  <li v-for="user in users" v-if="user.isActive" :key="user.id">
    {{ user.name }}
  </li>
</ul>

vue3中是先遍历（v-for），再判断（v-if），这里有个问题就是：如果你有一万条数据，其中只有 100 条是isActive状态的，你只希望显示这 100 条，但是实际在渲染时，每一次渲染，这一万条数据都会被遍历一遍。比如你在这个组件内的其他地方改变了某个响应式数据时，会触发重新渲染，调用渲染函数，调用渲染函数时，就会执行到上面的代码，从而将这一万条数据遍历一遍，即使你的users没有发生任何改变。

为了避免这个问题，在此场景下你可以用计算属性代替

<template>
  <div>
    <ul>
      <li v-for="user in activeUsers" :key="user.id">{{ user.name }}</li>
    </ul>
  </div>
</template>
 
<script setup>
    const  activeUsers=computed({
        return users.value.filter((user) => user.isActive)
    })
</script>

必须为 v-for 添加 key，并且不要将 index 作为 key

index 作为 key 时，将会让 diff 算法产生错误的判断，从而带来一些性能问题。详情参考：为什么 Vue 中不要用 index 作为 key？（diff 算法详解） - 掘金

页面多组件时使用懒加载

Vue性能优化：实现页面组件的懒加载-优快云博客

内存优化

长列表的内存性能分析和优化

记一次vue长列表的内存性能分析和优化_vue3 正常页面内存使用多大-优快云博客