整体 Vue 系统框架下的优化方案，旨在减少内存用量并提升整体性能

1. 页面加载优化

1.1 选用正确的架构

如果页面加载性能很敏感，避免将其部署为纯客户端的单页应用（SPA），而是使用服务器端渲染（SSR）或静态站点生成（SSG）。例如，使用 Nuxt.js 可以轻松实现 SSR
 

// Nuxt.js 配置文件 nuxt.config.js
export default {
  mode: 'universal',
  // 其他配置...
};

1.2 包体积与 Tree-shaking 优化

使用现代打包工具（如 Webpack 或 Vite）进行代码分割和 Tree-shaking，以减小打包体积

// Webpack 配置示例
module.exports = {
  optimization: {
    usedExports: true,
    splitChunks: {
      chunks: 'all',
    },
  },
};

1.3 代码分割与懒加载

使用 Vue Router 的懒加载功能，按需加载路由组件

const Home = () => import(/* webpackChunkName: "home" */ './views/Home.vue');
const About = () => import(/* webpackChunkName: "about" */ './views/About.vue');

const router = new Router({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
  ],
});

2. 更新优化

2.1 Props 稳定性

确保传给子组件的 props 尽量保持稳定，避免不必要的组件重渲染

<ListItem
  v-for="item in list"
  :key="item.id"
  :active="item.id === activeId"
/>

2.2 使用 v-once 和 v-memo

对于不需要更新的内容，使用 v-once 指令；对于大型子树或 v-for 列表，使用 v-memo 指令

<div v-once>{{ someStaticContent }}</div>
<div v-for="item in list" :key="item.id" v-memo="[item]">{{ item.name }}</div>

2.3 计算属性稳定性

在 Vue 3.4 及更高版本中，计算属性仅在其计算值较前一个值发生更改时才会触发副作用

const count = ref(0);
const isEven = computed(() => count.value % 2 === 0);

watchEffect(() => console.log(isEven.value)); // true

3. 通用优化

3.1 大型虚拟列表

使用虚拟滚动技术，只渲染当前视口可见的部分

import { RecycleScroller } from 'vue-virtual-scroller';

export default {
  components: {
    RecycleScroller,
  },
  data() {
    return {
      items: Array.from({ length: 10000 }).map((_, idx) => ({ id: idx, name: `Item ${idx}` })),
    };
  },
};

3.2 减少大型不可变数据的响应性开销

对于大型不可变数据，使用 shallowRef 和 shallowReactive 来减少响应性开销

const shallowArray = shallowRef([
  /* 巨大的列表，里面包含深层的对象 */
]);

3.3 避免不必要的组件抽象

在大型列表中，避免不必要的组件抽象，减少组件实例的数量

<div v-for="item in list" :key="item.id">
  <div>{{ item.name }}</div>
</div>