Vue Performance Optimization (การเพิ่มประสิทธิภาพใน Vue)

เทคนิคพื้นฐาน

ควรเข้าใจหลักการทำงานของ reactivity system ก่อน

การใช้ Computed

ลดการคำนวณซ้ำซ้อนด้วย computed properties

<script setup>
import { computed, ref } from "vue";

// ใช้ computed สำหรับ derived data
const fullName = computed(() => `${firstName.value} ${lastName.value}`);

// ใช้ v-memo สำหรับ optimize render
const list = ref([/* large list */]);
</script>

<template>
  <div v-memo="[fullName]">
    {{ fullName }}
  </div>
</template>

การใช้ v-memo

ช่วยลดการ render ใหม่ที่ไม่จำเป็น

Lazy Components

โหลด component เมื่อจำเป็นเท่านั้น

<script setup>
import { defineAsyncComponent } from "vue";

const HeavyComponent = defineAsyncComponent(() =>
  import("./HeavyComponent.vue")
);
</script>

## การวัดประสิทธิภาพ 1. ใช้ Vue DevTools 2. ตรวจสอบ re-renders 3. ใช้ production
build