ต่อไปนี้คือเนื้อหาเกี่ยวกับ Vue API ในหัวข้อที่คุณระบุ โดยใช้ภาษาที่เข้าใจง่าย กระชับ และเป็นมิตร พร้อมตัวอย่างโค้ดที่ชัดเจน:

Custom Elements

defineCustomElement()

สร้าง Custom Element จาก Vue component เพื่อใช้งานในแอปที่ไม่ใช่ Vue หรือใน Web Components โดยแปลงคอมโพเนนต์ให้เป็น HTML element ที่กำหนดเอง.

<script setup>
import { defineCustomElement } from 'vue';
const MyElement = defineCustomElement({
  props: { msg: String },
  template: `<div>{{ msg }}</div>`
});
customElements.define('my-element', MyElement);
</script>
<!-- ใช้งาน: <my-element msg="สวัสดี"></my-element> -->

useHost()

เข้าถึง DOM element ที่เป็น host ของ Custom Element เพื่อจัดการหรืออ่านข้อมูลจาก element หลัก.

<script setup>
import { useHost } from 'vue';
const host = useHost();
host.addEventListener('click', () => console.log('Host clicked'));
</script>

useShadowRoot()

เข้าถึง Shadow DOM root ของ Custom Element เพื่อจัดการสไตล์หรือเนื้อหาที่แยกจาก DOM หลัก.

<script setup>
import { useShadowRoot } from 'vue';
const shadowRoot = useShadowRoot();
shadowRoot.innerHTML = '<style>p { color: red; }</style>';
</script>

this.$host

เข้าถึง host element จากภายใน Vue component instance โดยใช้ใน Options API เพื่อจัดการ DOM.

<script>
export default {
  mounted() {
    this.$host.style.backgroundColor = 'lightblue';
  }
};
</script>

Render Function

h()

สร้าง Virtual DOM node (VNode) เพื่อกำหนดโครงสร้าง UI ด้วย JavaScript โดยระบุ tag, props และ children.

<script setup>
import { h } from 'vue';
const vnode = h('div', { id: 'test' }, 'สวัสดี');
</script>
<!-- สร้าง: <div id="test">สวัสดี</div> -->

mergeProps()

รวมอ็อบเจ็กต์ props หลายตัวเข้าด้วยกัน โดยจัดการ props เช่น class หรือ event listeners ให้ถูกต้อง.

<script setup>
import { mergeProps } from 'vue';
const props1 = { class: 'foo', onClick: () => console.log('click1') };
const props2 = { class: 'bar', onClick: () => console.log('click2') };
const merged = mergeProps(props1, props2);
</script>
<!-- ผลลัพธ์: { class: 'foo bar', onClick: [fn, fn] } -->

cloneVNode()

คัดลอก VNode ที่มีอยู่เพื่อสร้าง VNode ใหม่ โดยสามารถเพิ่มหรือแก้ไข props ได้.

<script setup>
import { h, cloneVNode } from 'vue';
const original = h('div', { id: 'original' }, 'เดิม');
const cloned = cloneVNode(original, { class: 'cloned' });
</script>
<!-- cloned: <div id="original" class="cloned">เดิม</div> -->

isVNode()

ตรวจสอบว่าอ็อบเจ็กต์เป็น VNode หรือไม่ ใช้ในการตรวจสอบก่อนประมวลผล.

<script setup>
import { h, isVNode } from 'vue';
const vnode = h('div', 'test');
console.log(isVNode(vnode)); // true
console.log(isVNode({})); // false
</script>

resolveComponent()

ดึงคอมโพเนนต์ที่ลงทะเบียนจากชื่อ เพื่อใช้ใน render function.

<script setup>
import { h, resolveComponent } from 'vue';
const MyComponent = resolveComponent('MyComponent');
const vnode = h(MyComponent, {}, 'เนื้อหา');
</script>

resolveDirective()

ดึง Custom Directive จากชื่อ เพื่อใช้ใน render function.

<script setup>
import { h, resolveDirective, withDirectives } from 'vue';
const pin = resolveDirective('pin');
const vnode = withDirectives(h('div'), [[pin, 200, 'top']]);
</script>

withDirectives()

เพิ่ม Custom Directives ให้กับ VNode เพื่อปรับแต่งพฤติกรรมของ element.

<script setup>
import { h, withDirectives } from 'vue';
const pin = { mounted(el) { el.style.position = 'fixed'; } };
const vnode = withDirectives(h('div', 'Pinned'), [[pin]]);
</script>

withModifiers()

เพิ่ม event modifiers เช่น .stop หรือ .prevent ให้กับ event handlers ใน render function.

<script setup>
import { h, withModifiers } from 'vue';
const vnode = h('button', {
  onClick: withModifiers(() => console.log('คลิก'), ['stop'])
});
</script>
<!-- เทียบเท่า: <button @click.stop="fn"> -->

Server-Side Rendering

renderToString()

แปลง Vue component เป็น HTML string ในฝั่งเซิร์ฟเวอร์เพื่อส่งไปยัง client.

import { renderToString } from 'vue/server-renderer';
import App from './App.vue';
const html = await renderToString(createApp(App));
console.log(html); // <div>...</div>

renderToNodeStream()

สร้าง Node.js readable stream สำหรับ SSR เพื่อสตรีม HTML ไปยัง client.

import { renderToNodeStream } from 'vue/server-renderer';
import App from './App.vue';
const stream = renderToNodeStream(createApp(App));
stream.pipe(process.stdout);

pipeToNodeWritable()

ส่งผลลัพธ์ SSR ไปยัง Node.js writable stream เช่น response object ใน Express.

import { pipeToNodeWritable } from 'vue/server-renderer';
import App from './App.vue';
app.get('/', (req, res) => {
  pipeToNodeWritable(createApp(App), {}, res);
});

renderToWebStream()

สร้าง Web Stream API สำหรับ SSR เพื่อสตรีม HTML ในสภาพแวดล้อมที่รองรับ Web Streams.

import { renderToWebStream } from 'vue/server-renderer';
import App from './App.vue';
const stream = renderToWebStream(createApp(App));

pipeToWebWritable()

ส่งผลลัพธ์ SSR ไปยัง Web WritableStream เพื่อใช้ในสภาพแวดล้อมที่รองรับ Web Streams.

import { pipeToWebWritable } from 'vue/server-renderer';
import App from './App.vue';
const { writable } = new TransformStream();
pipeToWebWritable(App, {}, writable);

renderToSimpleStream()

สตรีม SSR แบบง่าย โดยส่ง HTML chunks ไปยัง callback function.

import { renderToSimpleStream } from 'vue/server-renderer';
import App from './App.vue';
renderToSimpleStream(App, {}, (chunk) => console.log(chunk));

useSSRContext()

เข้าถึงบริบท SSR เพื่อส่งข้อมูลจากเซิร์ฟเวอร์ไปยัง client.

<script setup>
import { useSSRContext } from 'vue';
const context = useSSRContext();
context.data = { message: 'สวัสดีจากเซิร์ฟเวอร์' };
</script>

data-allow-mismatch

ระบุ attribute เพื่อข้าม hydration mismatch ใน Vue 3.5+ เมื่อ HTML จาก SSR ไม่ตรงกับ client.

<template>
  <div data-allow-mismatch>เนื้อหาที่อาจไม่ตรง</div>
</template>

TypeScript Utility Types

PropType<T>

กำหนดประเภทที่ซับซ้อนสำหรับ props ใน Options API เพื่อให้ TypeScript ตรวจสอบได้.

<script>
import { defineComponent } from 'vue';
import type { PropType } from 'vue';
export default defineComponent({
  props: { book: Object as PropType<{ title: string }> }
});
</script>

MaybeRef<T>

กำหนดประเภทที่อาจเป็นค่า หรือ ref ใน Composition API.

import { MaybeRef } from 'vue';
function useValue(value: MaybeRef<string>) {
  // รับได้ทั้ง string หรือ ref<string>
}

MaybeRefOrGetter<T>

กำหนดประเภทที่อาจเป็นค่า, ref หรือ getter function.

import { MaybeRefOrGetter } from 'vue';
function useValue(value: MaybeRefOrGetter<string>) {
  // รับ string, ref<string>, หรือ () => string
}

ExtractPropTypes<T>

ดึงประเภทของ props จากการกำหนด props ใน Options API.

import { ExtractPropTypes } from 'vue';
const propsDef = { msg: String };
type Props = ExtractPropTypes<typeof propsDef>; // { msg: string }

ExtractPublicPropTypes<T>

ดึงประเภทของ props สาธารณะ (ไม่รวม internal props) จากการกำหนด props.

import { ExtractPublicPropTypes } from 'vue';
const propsDef = { msg: String, _internal: Number };
type Props = ExtractPublicPropTypes<typeof propsDef>; // { msg: string }

ComponentCustomProperties

เพิ่มประเภทสำหรับ properties ที่กำหนดเองใน component instance.

import { ComponentCustomProperties } from 'vue';
declare module 'vue' {
  interface ComponentCustomProperties {
    $custom: string;
  }
}

ComponentCustomOptions

เพิ่มประเภทสำหรับตัวเลือกที่กำหนดเองใน Options API.

import { ComponentCustomOptions } from 'vue';
declare module 'vue' {
  interface ComponentCustomOptions {
    customOption?: string;
  }
}

ComponentCustomProps

เพิ่มประเภทสำหรับ props ที่กำหนดเองใน component.

import { ComponentCustomProps } from 'vue';
declare module 'vue' {
  interface ComponentCustomProps {
    customProp?: string;
  }
}

CSSProperties

กำหนดประเภทสำหรับสไตล์ CSS ใน TypeScript เพื่อใช้ใน v-bind หรือ inline styles.

<script setup lang="ts">
import type { CSSProperties } from 'vue';
const style: CSSProperties = { color: 'blue', fontSize: '16px' };
</script>
<template>
  <div :style="style">สไตล์</div>
</template>

Custom Renderer

createRenderer()

สร้าง renderer แบบกำหนดเองเพื่อควบคุมการ render VNode ไปยัง DOM หรือแพลตฟอร์มอื่น เช่น Canvas.

import { createRenderer } from 'vue';
const { render, createApp } = createRenderer({
  insert: (el, parent) => parent.appendChild(el),
  createElement: (tag) => document.createElement(tag),
  // อื่นๆ
});

Compile-Time Flags

VUE_OPTIONS_API

เปิด/ปิดการใช้งาน Options API ใน build เพื่อลดขนาดไฟล์ถ้าไม่ใช้.

// vite.config.js
define: { __VUE_OPTIONS_API__: false }

VUE_PROD_DEVTOOLS

เปิดใช้งาน devtools ใน production build (ปกติปิดเพื่อลดขนาด).

// vite.config.js
define: { __VUE_PROD_DEVTOOLS__: true }

VUE_PROD_HYDRATION_MISMATCH_DETAILS

แสดงรายละเอียด hydration mismatch ใน production (Vue 3.5+).

// vite.config.js
define: { __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: true }

Configuration Guides

กำหนดการตั้งค่า Vue เช่น การใช้ Vite หรือ Webpack สำหรับ build, การตั้งค่า TypeScript, หรือการจัดการ SSR. ตัวอย่างเช่น การตั้งค่า tsconfig.json สำหรับ TSX หรือการกำหนด alias ใน Vite.

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
  plugins: [vue()],
  resolve: { alias: { '@': '/src' } }
});

// tsconfig.json
{
  "compilerOptions": {
    "jsx": "preserve",
    "jsxImportSource": "vue"
  }
}