Vue3 性能优化详解

概述

Vue3 在性能方面做了很多优化，包括虚拟 DOM 的改进、编译时优化、Tree-shaking 等。这些优化让 Vue3 在运行时性能、包体积和开发体验方面都有了显著提升。

编译优化

主要优化策略

1. 静态提升 (Static Hoisting)

Vue3 编译器会识别模板中的静态内容，并将其提升到渲染函数外部，避免在每次渲染时重新创建。

<template>
  <div>
    <h1>这是静态标题</h1>
    <p>这是静态段落</p>
    <div :class="dynamicClass">{{ dynamicContent }}</div>
  </div>
</template>

编译后的代码：

// 静态内容被提升到外部
const _hoisted_1 = createElementVNode("h1", null, "这是静态标题", -1);
const _hoisted_2 = createElementVNode("p", null, "这是静态段落", -1);

export function render() {
  return createElementVNode("div", null, [
    _hoisted_1, // 直接使用提升的静态节点
    _hoisted_2, // 直接使用提升的静态节点
    createElementVNode("div", { class: dynamicClass }, dynamicContent, 1),
  ]);
}

2. 补丁标记 (Patch Flags)

Vue3 为动态节点添加补丁标记，只更新需要变化的部分。

<template>
  <div>
    <span>{{ message }}</span>
    <span :class="dynamicClass">{{ count }}</span>
    <span :class="dynamicClass" :id="dynamicId">{{ name }}</span>
  </div>
</template>

编译后的补丁标记：

// 补丁标记表示需要更新的内容类型
// 1: TEXT - 文本内容
// 2: CLASS - 类名
// 4: STYLE - 样式
// 8: PROPS - 属性
// 16: FULL_PROPS - 完整属性

export function render() {
  return createElementVNode("div", null, [
    createElementVNode("span", null, message, 1), // 1: TEXT
    createElementVNode("span", { class: dynamicClass }, count, 2), // 2: CLASS
    createElementVNode(
      "span",
      { class: dynamicClass, id: dynamicId },
      name,
      10
    ), // 2 + 8: CLASS + PROPS
  ]);
}

3. Tree-shaking

Vue3 支持 Tree-shaking，只打包实际使用的代码。

// 只导入需要的功能
import { createApp, ref, computed } from "vue";

// 未使用的功能不会被打包
// import { reactive, watch } from 'vue'

4. Fragment 支持

Vue3 支持多根节点，减少不必要的包装元素。

<template>
  <header>页面头部</header>
  <main>主要内容</main>
  <footer>页面底部</footer>
</template>

运行时优化

1. 虚拟 DOM 优化

Vue3 重写了虚拟 DOM 的实现，提高了 diff 算法的效率。

// 优化前的 diff 算法
function diff(oldVNode, newVNode) {
  // 全量比较
  if (oldVNode.type !== newVNode.type) {
    return false;
  }
  // 深度比较所有属性
  return deepCompare(oldVNode.props, newVNode.props);
}

// Vue3 的优化 diff 算法
function diff(oldVNode, newVNode) {
  // 快速路径：类型不同直接替换
  if (oldVNode.type !== newVNode.type) {
    return false;
  }

  // 使用补丁标记快速判断
  if (newVNode.patchFlag === 0) {
    // 静态节点，无需比较
    return true;
  }

  // 只比较标记的动态内容
  if (newVNode.patchFlag & PatchFlags.TEXT) {
    return oldVNode.children !== newVNode.children;
  }

  if (newVNode.patchFlag & PatchFlags.CLASS) {
    return oldVNode.props.class !== newVNode.props.class;
  }

  return false;
}

2. 响应式系统优化

Vue3 使用 Proxy 替代 Object.defineProperty，提高了响应式系统的性能。

// Vue2 的响应式实现
function defineReactive(obj, key, val) {
  Object.defineProperty(obj, key, {
    get() {
      // 依赖收集
      track(obj, key);
      return val;
    },
    set(newVal) {
      if (val === newVal) return;
      val = newVal;
      // 触发更新
      trigger(obj, key);
    },
  });
}

// Vue3 的响应式实现
function reactive(obj) {
  return new Proxy(obj, {
    get(target, key, receiver) {
      // 依赖收集
      track(target, key);
      return Reflect.get(target, key, receiver);
    },
    set(target, key, value, receiver) {
      const oldValue = target[key];
      const result = Reflect.set(target, key, value, receiver);
      if (oldValue !== value) {
        // 触发更新
        trigger(target, key);
      }
      return result;
    },
  });
}

组件优化

1. 异步组件

使用异步组件实现代码分割和懒加载。

// 基本异步组件
const AsyncComponent = defineAsyncComponent(() =>
  import("./HeavyComponent.vue")
);

// 带加载和错误状态的异步组件
const AsyncComponentWithStates = defineAsyncComponent({
  loader: () => import("./HeavyComponent.vue"),
  loadingComponent: LoadingSpinner,
  errorComponent: ErrorDisplay,
  delay: 200,
  timeout: 3000,
});

// 条件异步组件
const ConditionalAsyncComponent = defineAsyncComponent({
  loader: () => {
    if (condition) {
      return import("./ComponentA.vue");
    } else {
      return import("./ComponentB.vue");
    }
  },
});

2. 组件缓存

使用 <keep-alive> 缓存组件状态。

<template>
  <keep-alive :include="cachedComponents" :exclude="excludedComponents">
    <router-view />
  </keep-alive>
</template>

<script>
  export default {
    setup() {
      const cachedComponents = ref(["Home", "About"]);
      const excludedComponents = ref(["Login", "Register"]);

      return {
        cachedComponents,
        excludedComponents,
      };
    },
  };
</script>

3. 组件懒加载

// 路由级别的懒加载
const routes = [
  {
    path: "/home",
    name: "Home",
    component: () => import("../views/Home.vue"),
  },
  {
    path: "/about",
    name: "About",
    component: () => import("../views/About.vue"),
  },
];

// 组件级别的懒加载
const LazyComponent = defineAsyncComponent(
  () =>
    new Promise((resolve) => {
      // 模拟网络延迟
      setTimeout(() => {
        resolve(import("./HeavyComponent.vue"));
      }, 1000);
    })
);

列表渲染优化

1. 使用 key

<template>
  <ul>
    <!-- 使用唯一且稳定的 key -->
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

2. 虚拟滚动

对于长列表，使用虚拟滚动技术。

import { VirtualList } from "vue-virtual-scroll-list";

export default {
  components: {
    VirtualList,
  },

  setup() {
    const items = ref(
      Array.from({ length: 10000 }, (_, i) => ({
        id: i,
        name: `项目 ${i}`,
      }))
    );

    return {
      items,
    };
  },
};

<template>
  <VirtualList
    :data-key="'id'"
    :data-sources="items"
    :data-component="ItemComponent"
    :estimate-size="50"
  />
</template>

计算属性和监听器优化

1. 计算属性缓存

export default {
  setup() {
    const items = ref([1, 2, 3, 4, 5]);

    // 计算属性会被缓存，只有依赖变化时才重新计算
    const sum = computed(() => {
      console.log("计算属性重新计算");
      return items.value.reduce((sum, item) => sum + item, 0);
    });

    const average = computed(() => sum.value / items.value.length);

    return {
      items,
      sum,
      average,
    };
  },
};

2. 监听器优化

export default {
  setup() {
    const user = ref({ name: "张三", age: 25 });

    // 深度监听对象变化
    watch(
      user,
      (newUser, oldUser) => {
        console.log("用户信息变化:", newUser, oldUser);
      },
      { deep: true }
    );

    // 监听特定属性
    watch(
      () => user.value.name,
      (newName, oldName) => {
        console.log("用户名变化:", newName, oldName);
      }
    );

    // 立即执行
    watch(
      () => user.value.age,
      (newAge, oldAge) => {
        console.log("年龄变化:", newAge, oldAge);
      },
      { immediate: true }
    );

    return {
      user,
    };
  },
};

内存管理优化

1. 及时清理事件监听器

export default {
  setup() {
    const handleResize = () => {
      console.log("窗口大小变化");
    };

    onMounted(() => {
      window.addEventListener("resize", handleResize);
    });

    onUnmounted(() => {
      window.removeEventListener("resize", handleResize);
    });
  },
};

2. 清理定时器

export default {
  setup() {
    const timer = ref(null);

    onMounted(() => {
      timer.value = setInterval(() => {
        console.log("定时器执行");
      }, 1000);
    });

    onUnmounted(() => {
      if (timer.value) {
        clearInterval(timer.value);
        timer.value = null;
      }
    });
  },
};

3. 避免内存泄漏

export default {
  setup() {
    const data = ref(null);

    // 避免闭包导致的内存泄漏
    const fetchData = async () => {
      try {
        const response = await fetch("/api/data");
        data.value = await response.json();
      } catch (error) {
        console.error("获取数据失败:", error);
      }
    };

    onMounted(fetchData);

    // 组件卸载时清理数据
    onUnmounted(() => {
      data.value = null;
    });

    return {
      data,
    };
  },
};

构建优化

1. 代码分割

// vite.config.js
export default {
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ["vue", "vue-router", "pinia"],
          utils: ["lodash", "axios"],
          ui: ["element-plus"],
        },
      },
    },
  },
};

2. 压缩优化

// vite.config.js
export default {
  build: {
    minify: "terser",
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true,
      },
    },
  },
};

3. 资源优化

// vite.config.js
export default {
  build: {
    assetsInlineLimit: 4096, // 小于4KB的资源内联
    chunkSizeWarningLimit: 1000, // 块大小警告限制
    rollupOptions: {
      output: {
        assetFileNames: (assetInfo) => {
          const info = assetInfo.name.split(".");
          const ext = info[info.length - 1];
          if (/\.(png|jpe?g|gif|svg|ico)$/i.test(assetInfo.name)) {
            return `images/[name]-[hash][extname]`;
          }
          if (/\.(woff2?|eot|ttf|otf)$/i.test(assetInfo.name)) {
            return `fonts/[name]-[hash][extname]`;
          }
          return `assets/[name]-[hash][extname]`;
        },
      },
    },
  },
};

性能监控

1. 性能指标

// 监控页面加载性能
export function monitorPerformance() {
  if ("performance" in window) {
    const observer = new PerformanceObserver((list) => {
      for (const entry of list.getEntries()) {
        console.log("性能指标:", entry.name, entry.duration);
      }
    });

    observer.observe({ entryTypes: ["measure", "navigation"] });
  }
}

// 监控组件渲染性能
export function measureComponentRender(componentName, fn) {
  const start = performance.now();
  const result = fn();
  const end = performance.now();

  console.log(`${componentName} 渲染耗时:`, end - start, "ms");
  return result;
}

2. 内存监控

// 监控内存使用情况
export function monitorMemory() {
  if ("memory" in performance) {
    setInterval(() => {
      const memory = performance.memory;
      console.log("内存使用:", {
        used: Math.round(memory.usedJSHeapSize / 1024 / 1024) + "MB",
        total: Math.round(memory.totalJSHeapSize / 1024 / 1024) + "MB",
        limit: Math.round(memory.jsHeapSizeLimit / 1024 / 1024) + "MB",
      });
    }, 5000);
  }
}

最佳实践总结

1. 开发阶段

  • 使用 Vue DevTools 监控组件性能
  • 合理使用计算属性和监听器
  • 避免在模板中使用复杂表达式

2. 构建阶段

  • 启用代码分割和懒加载
  • 使用 Tree-shaking 减少包体积
  • 优化资源加载和压缩

3. 运行时

  • 合理使用组件缓存
  • 及时清理事件监听器和定时器
  • 监控应用性能指标

4. 持续优化

  • 定期分析性能瓶颈
  • 使用性能监控工具
  • 根据用户反馈持续改进

总结

Vue3 通过编译时优化、运行时优化和开发工具优化，为开发者提供了高性能的前端开发体验。通过合理使用这些优化策略，结合最佳实践，可以构建出性能卓越的 Vue 应用。记住，性能优化是一个持续的过程，需要在开发、构建和运行各个阶段都进行相应的优化。

最近更新：:
Contributors: Duke