Wrikka Learn

Dark mode

Grok

Composition API (วิธีเขียนโค้ดแบบใหม่ที่จัดการโลจิกเป็นหมวดหมู่ได้อย่างมีประสิทธิภาพ) ​

vue
<script setup lang="ts">
// Composition API ตัวอย่างการจัดการข้อมูลผู้ใช้
import { computed, ref } from "vue";

const user = ref({
  id: 1,
  name: "สมชาย ใจดี",
  points: 100,
});

const formattedPoints = computed(() => `${user.value.points} คะแนน`);
</script>

Type Safety (ช่วยจับข้อผิดพลาดก่อนรันโปรแกรม) ​

ts
// ตัวอย่าง Type Interface สำหรับระบบสมาชิก
interface Member {
  id: string;
  firstName: string;
  lastName: string;
  joinDate: Date;
  status: "active" | "inactive" | "pending";
}

Component Structure (เรียงส่วนต่างๆ ของไฟล์ให้เป็นระเบียบ) ​

vue
<script setup lang="ts">
// Script section - ไว้เขียนโลจิก
import { computed } from "vue";

interface Props {
  name: string;
  points: number;
}

const props = defineProps<Props>();
const level = computed(() => props.points > 1000 ? "VIP" : "Standard");
</script>

<template>
  <!-- Template section - ไว้เขียน HTML -->
  <div class="user-card">
    <h3>{{ props.name }}</h3>
    <p>คะแนน: {{ props.points }} ({{ level }})</p>
  </div>
</template>

<style scoped>
/* Style section - ไว้เขียน CSS */
.user-card {
  border: 1px solid #ddd;
  padding: 1rem;
  border-radius: 8px;
}

h3 {
  color: var(--primary-color);
}
</style>

State Management (วิธีเก็บข้อมูลที่แชร์กันหลายคอมโพเนนต์) ​

ts
// ตัวอย่าง Pinia Store สำหรับจัดการข้อมูลสินค้า
const useProductStore = defineStore("products", () => {
  const products = ref<Product[]>([]);
  const featuredProducts = computed(() =>
    products.value.filter(p => p.isFeatured)
  );

  async function fetchProducts() {
    products.value = await api.getProducts();
  }

  return { products, featuredProducts, fetchProducts };
});

Composables (แยกโค้ดที่ใช้บ่อยไว้ใช้ซ้ำได้) ​

ts
// ตัวอย่าง Composables สำหรับระบบตะกร้าสินค้า
export function useCart() {
  const items = ref<CartItem[]>([]);
  const total = computed(() =>
    items.value.reduce((sum, item) => sum + item.price * item.quantity, 0)
  );

  const addItem = (product: Product) => {
    const existing = items.value.find(item => item.id === product.id);
    existing
      ? existing.quantity++
      : items.value.push({ ...product, quantity: 1 });
  };

  return { items, total, addItem };
}

Reactivity (ระบบอัปเดตหน้าจออัตโนมัติเมื่อข้อมูลเปลี่ยน) ​

ts
// ตัวอย่าง Reactivity กับฟอร์ม
const formState = reactive({
  username: "",
  password: "",
  rememberMe: false,
});

const isValid = computed(() => {
  return formState.username.length > 3
    && formState.password.length > 6;
});

Component Naming (วิธีตั้งชื่อคอมโพเนนต์ให้ถูกต้อง) ​

ts
// ใช้ PascalCase สำหรับไฟล์คอมโพเนนต์
// MyComponent.vue

Props Validation (ตรวจสอบค่าพร็อพที่ส่งมาจากพ่อ) ​

ts
const props = defineProps({
  title: { type: String, required: true },
});

Event Handling (วิธีจัดการกับเหตุการณ์ต่างๆ บนหน้าเว็บ) ​

vue
<template>
  <button @click="handleClick">Click</button>
</template>

Scoped Styles (สไตล์ที่ใช้เฉพาะกับคอมโพเนนต์นั้นๆ) ​

vue
<style scoped>
.button {
  color: red;
}
</style>

Dynamic Components (คอมโพเนนต์ที่เปลี่ยนแปลงได้ตามสถานะ) ​

vue
<component :is="currentComponent" />

Lazy Loading (โหลดคอมโพเนนต์เมื่อจำเป็นเท่านั้น) ​

ts
const LazyComponent = defineAsyncComponent(
  () => import("./LazyComponent.vue"),
);

Error Handling (วิธีจัดการกับข้อผิดพลาดที่เกิดขึ้น) ​

ts
onErrorCaptured((err) => {
  console.error(err);
  return false;
});

Performance Optimization (วิธีเพิ่มประสิทธิภาพให้กับแอปพลิเคชัน) ​

ts
// ใช้ v-once สำหรับข้อมูลที่ไม่เปลี่ยนแปลง
<div v-once>{{ staticText }}</div>;

Modern Tooling (เครื่องมือที่ช่วยให้พัฒนาแอปพลิเคชันง่ายขึ้น) ​

bash
# ใช้ Vite แทน Webpack
npm create vite@latest

หมายเหตุ:

  • ใช้ <script setup> จะช่วยให้เขียนโค้ดสั้นลง
  • แยก logic ที่ใช้บ่อยเป็น composables
  • ใช้ TypeScript จะช่วยตรวจสอบประเภทข้อมูล
  • อัปเดตตามเวอร์ชันล่าสุดของ Vue 3