uz
Feedback
ToCode

ToCode

Kanalga Telegramโ€™da oโ€˜tish

ื˜ื™ืคื™ื ืงืฆืจื™ื ืœืžืชื›ื ืชื™ื ืžืืช ื™ื ื•ืŸ ืคืจืง

Ko'proq ko'rsatish
1 419
Obunachilar
Ma'lumot yo'q24 soatlar
-17 kunlar
+230 kunlar
Postlar arxiv
ToCode
1 419
# ืžื”ื™ืจ, ืขืžื™ื“ ื•ืžืชื•ืขื“ ืฉืœื•ืฉ ืžื™ืœื™ื ืฉืื•ืžืจื•ืช ื”ื›ืœ ืขืœ ื”ืคื™ืชืจื•ืŸ ื”ื‘ื ืฉืขืœื™ืš ืœื›ืชื•ื‘: ืžื”ื™ืจ- ื›ื™ Over Engineering ื–ื• ื‘ืขื™ื”; ื›ื™ ื™ืฉ ืœืงื•ื— ืฉืžื—ื›ื”; ื›ื™ ื”ื–ืžืŸ ืฉืœืš ื™ืงืจ ื•ืื™ืŸ ื˜ืขื ืœื‘ื–ื‘ื– ืื•ืชื• ืขืœ ืกื™ื‘ื•ื›ื™ื ืžื™ื•ืชืจื™ื. ืขืžื™ื“- ื›ื™ ืื ื—ื ื• ืœื ืจื•ืฆื™ื ืœื”ืชืžื•ื“ื“ ืขื ื”ื‘ืขื™ื” ื”ื–ืืช ืฉื•ื‘ ื‘ืฉื‘ื•ืข ื”ื‘ื, ืื• ื‘ื—ื•ื“ืฉ ื”ื‘ื. ื•ืื ื—ื ื• ืœื ืจื•ืฆื™ื ืฉื”ื‘ืขื™ื” ืชื—ื–ื•ืจ ื‘ืขื™ื“ื›ื•ืŸ ื”ื’ื™ืจืกื” ื”ื‘ื. ืขืžื™ื“ ื–ื” ืื•ืžืจ ืฉื”ืคื™ืชืจื•ืŸ ืžื’ื™ืข ืขื ื‘ื“ื™ืงื•ืช ื•ืœืœื ืชื”ืœื™ื›ื™ื ื™ื“ื ื™ื™ื ืฉื™ื›ื•ืœื™ื ืœื”ื™ืฉื›ื—. ื•ืžืชื•ืขื“- ื›ื™ ื›ืฉื”ื‘ืขื™ื” ื›ืŸ ืชื—ื–ื•ืจ ืื ื—ื ื• ืจื•ืฆื™ื ืœื“ืขืช ืžื” ืขืฉื™ืช, ืžื” ื ื™ืกื™ืช ืœืขืฉื•ืช ื•ืœื ื”ืฆืœื™ื— ื•ืžืžื” ืœื”ื™ื–ื”ืจ ื‘ืคืขื ื”ื‘ืื” ืฉืžืชืžื•ื“ื“ื™ื ืขื ืžืฉื”ื• ื“ื•ืžื”. ื™ืฉ ืœื ื• ื›ืœื™ื ื˜ื›ื ื•ืœื•ื’ื™ื™ื ื•ืžื™ื•ืžื ื•ืช ื›ื“ื™ ืœืขื ื•ืช ืขืœ ื›ืœ ืฉืœื•ืฉืช ื”ื“ืจื™ืฉื•ืช. ื”ืคืขืจ ื”ื•ื ื‘ื“ืจืš ื›ืœืœ ืชืจื‘ื•ืช ืืจื’ื•ื ื™ืช ื•ื ื›ื•ื ื•ืช ืœื”ืฉืงื™ืข ื‘ืžื™ื“ื” ื”ื ื›ื•ื ื”.

ToCode
1 419
# ืื ื™ ืจื•ืฆื” ืœื”ื™ื•ืช ... "ืื ื™ ืจื•ืฆื” ืœื”ื™ื•ืช ื›ืœื‘ื•ื™ื ื™ืง" - ืืžืจ ืืฃ ืื—ื“ ืืฃ ืคืขื. "ืื ื™ ืจื•ืฆื” ืœื›ืชื•ื‘ ืงื•ื“ ืžื‘ื•ืœื’ืŸ, ืœื›ืชื•ื‘ ื‘ืขืฉืจ ืฉืคื•ืช ืฉื•ื ื•ืช ื›ืœ ื™ื•ื, ืœืชืงืŸ ื‘ืื’ื™ื ื‘ืžืขืจื›ื•ืช ืฉืื ื™ ืœื ืžื‘ื™ืŸ ื‘ื”ืŸ". ืื• "ืื ื™ ืจื•ืฆื” ืœืขื‘ื•ื“ ืขืœ ืžืขืจื›ืช ืฉืื™ืŸ ื“ืจืš ืœื‘ื“ื•ืง ืื•ืชื”, ืฉืื™ ืืคืฉืจ ืœืฉื“ืจื’ ื›ื™ ืืชื” ืœื ื™ื•ื“ืข ืžื” ื™ื™ืฉื‘ืจ, ื•ืฉื›ืœ ืคืขื ืฉืžืขืœื™ื ื’ื™ืจืกื” ืฆืจื™ืš ืœื”ืฉืื™ืจ ืฆื•ื•ืช ืฉืœื ื‘ื›ื•ื ื ื•ืช ืฉื‘ื•ืข ื‘ื’ืœืœ ื”ืชืงืœื•ืช". ื•ื‘ื›ืœ ื–ืืช ืื ื™ ืžื›ื™ืจ ื™ื•ืชืจ ืื ืฉื™ื ืฉืขื•ื‘ื“ื™ื ื‘ืกื‘ื™ื‘ื•ืช ื›ืืœื” ืžืืฉืจ ืื ืฉื™ื ืฉืขื•ื‘ื“ื™ื ื‘ืกื‘ื™ื‘ื•ืช ื‘ืจื™ืื•ืช. ืื ื™ ืžื›ื™ืจ ื™ื•ืชืจ ืžืชื›ื ืชื™ื ืฉื›ื•ืชื‘ื™ื ืงื•ื“ ืžื‘ื•ืœื’ืŸ ื‘ื’ืœืœ ื—ื•ืกืจ ื–ืžืŸ, ืฉืžื•ื•ืชืจื™ื ืขืœ ื‘ื“ื™ืงื•ืช ืื• ืฉืžื•ื›ื ื™ื ืœื—ื™ื•ืช ืขื ื›ืฉืœื•ื ื•ืช ื‘ื‘ื“ื™ืงื•ืช ื•ืฉื‘ืคื•ืขืœ ื™ื›ืชื‘ื• ืžื” ืฉืฆืจื™ืš ืœื›ืชื•ื‘ ื‘ืฉื‘ื™ืœ ืฉื”ืžืขืจื›ืช ืชืขื‘ื•ื“. ื•ื™ืฉ ื”ืžื•ืŸ ืกื™ื‘ื•ืช ืœืคืขืจ: 1. ืชื›ืฃ ื™ืฉ ื“ืžื• ื’ื“ื•ืœ, ืื—ืจื™ ื”ื”ืฉืงืขื” ื›ื‘ืจ ื ื•ื›ืœ ืœื‘ื ื•ืช ืžื•ืฆืจ ื›ืžื• ืฉืฆืจื™ืš. 2. ื‘ื“ื™ื•ืง ื’ื™ื™ืกื• ืขื›ืฉื™ื• ื”ืจื‘ื” ืื ืฉื™ื ื—ื“ืฉื™ื, ืื—ืจื™ ืฉื”ื ื™ืชืืงืœืžื• ื™ื”ื™ื” ื™ื•ืชืจ ื–ืžืŸ ืœื›ืชื•ื‘ ืงื•ื“ ื ื›ื•ืŸ. 3. ื™ืฉ ืขื›ืฉื™ื• ื”ืžื•ืŸ ืœืงื•ื—ื•ืช ื—ื“ืฉื™ื, ืฆืจื™ืš ืœืชืงืŸ ืžื”ืจ ืืช ื”ื‘ืขื™ื•ืช ื›ื“ื™ ืœื ืœื™ืฆื•ืจ ืœื—ื‘ืจื” ืฉื ืจืข. 4. ืื™ืŸ ืœื ื• ืœืงื•ื—ื•ืช ื‘ื›ืœืœ ืื– ื—ื™ื™ื‘ื™ื ืœื‘ื ื•ืช ืžื”ืจ ืืช ื”ืคื™ืฆ'ืจ ื”ื–ื”. ืื—ืจื™ ืฉื ืžืฆื ื›ืžื” ืœืงื•ื—ื•ืช ื ื•ื›ืœ ืœืชืงืŸ. ื”ืคืขืจ ื‘ื™ืŸ "ืžื” ืฉืื ื™ ื—ื•ืฉื‘", "ืžื” ืฉืื ื™ ืื•ืžืจ" ื•"ืžื” ืฉืื ื™ ืขื•ืฉื”", ืœื ืจืง ื’ื•ืจื ืœืงื•ื“ ืœืขื‘ื•ื“ ืคื—ื•ืช ื˜ื•ื‘, ืืœื ื”ื•ื ื‘ืขื™ืงืจ ื’ื•ืจื ืœืžืชื›ื ืช ืœื”ืจื’ื™ืฉ ืคื—ื•ืช ื˜ื•ื‘. ื”ื•ื ื’ื•ืจื ืœื ื• ืœืื‘ื“ ืืžื•ืŸ ื‘ืขืฆืžื ื•, ื•ืœืื˜ ืœืื˜ ืืคื™ืœื• ืœืคื—ื“ ืœืขื–ื•ื‘ ืืช ืื•ืชื” ืกื‘ื™ื‘ื” ืจืขื™ืœื”. "ืžื™ ื™ืจืฆื” ืื•ืชื™" ื—ื•ืฉื‘ ื”ืžืชื›ื ืช ืฉืžืจื’ื™ืฉ ืฉื”ืขื‘ื•ื“ื” ืฉืœื• ืœื ืชื•ืืžืช ืืช ื”ืขืจื›ื™ื ืฉืœื•. ืื ืฉื™ ืžืงืฆื•ืข ื˜ื•ื‘ื™ื ืœื ื”ื™ื• ืžืชื ื”ืœื™ื ื›ืš. ื”ื™ืฆื™ืื” ืžื”ืžืœื›ื•ื“ืช ืขื•ื‘ืจืช ื“ืจืš ื”ื”ื‘ื ื” ืฉืื™ ืืคืฉืจ ืœืžืฉื•ืš ืœืื•ืจืš ื–ืžืŸ ืคืขืจ ื‘ื™ืŸ ื”ืžื—ืฉื‘ื” ืœืžืขืฉื”. ืœื ืžืฉื ื” ืื™ืš ืืชื ื—ื•ืฉื‘ื™ื ืฉืžืชื›ื ืชื™ื ืžืงืฆื•ืขื™ื™ื ืฆืจื™ื›ื™ื ืœื”ืชื ื”ืœ - ื›ื“ืื™ ืžืื•ื“ ืœื”ืชื—ื™ืœ ืœืืžืฅ ืืช ื”ืฉื™ื˜ื•ืช ื”ืืœื” ื‘ื™ื•ื ื™ื•ื ืฉืœื›ื.

ToCode
1 419
# ืฉืืœืช ืจืื™ื•ื ื•ืช ืขื‘ื•ื“ื”: ื”ื‘ื˜ื—ื•ืช ื‘ JavaScript (ืฉื•ื‘?? ื›ืŸ ืฉื•ื‘, ื ื• ื”ื›ื™ ื›ื™ืฃ Promises) ื ื•ื“ 16 ื”ื›ื ื™ืกื• ืžื•ื“ื•ืœ ืฉืœ timers/promises ืฉืžืืคืฉืจ ืœื”ืคืขื™ืœ ืืช setTimeout ื‘ืชื•ืจ Promise, ืื– ื”ืฉืืœื” ื”ืคืขื ืชืฉืชืžืฉ ื‘ Node.JS. ื•ื™ื”ื™ื” ื’ื ืคื™ืชืจื•ืŸ ื›ื™ ืชื›ืœ'ืก ื–ื” ื”ื“ื‘ืจ ื”ืžืขื ื™ื™ืŸ ืœื›ืชื•ื‘ ืขืœื™ื•. ## ื”ืฉืืœื” ื ืชื•ื ื” ื”ืชื•ื›ื ื™ืช ื”ื‘ืื” ื‘ Node.JS:
import {
  setTimeout,
} from 'timers/promises';

async function waitAndSayYay() {
  await setTimeout(1000);
  console.log('yay');
}

for (let i=0; i < 10; i++) {
  waitAndSayYay();
}
ื”ืชื•ื›ื ื™ืช ืžื—ื›ื” 10 ืฉื ื™ื•ืช ื•ืื– ืžื“ืคื™ืกื” ืขืœ ื”ืžืกืš 10 ืคืขืžื™ื ืืช ื”ืžื™ืœื” yay. ื•ื›ืŸ ืฆืจื™ืš Node 16 ื‘ืฉื‘ื™ืœ ืœื”ืจื™ืฅ ืื•ืชื” ื•ืฆืจื™ืš ืœืฉืžื•ืจ ืืช ื”ืงื•ื“ ื‘ืงื•ื‘ืฅ ืขื ืกื™ื•ืžืช .mjs. ื”ืืชื’ืจ ืฉืœื›ื - ืžื‘ืœื™ ืœืฉื ื•ืช ืืช ืœื•ืœืืช ื” for ืฉื‘ืกื•ืฃ ื”ืชื•ื›ื ื™ืช, ืขื“ื›ื ื• ืืช ื”ืงื•ื“ ื›ืš ืฉื”ืœื•ืœืื” ืชื—ื›ื” ืฉื ื™ื” ื‘ื™ืŸ ื”ื“ืคืกื” ืœื”ื“ืคืกื” ื›ืœื•ืžืจ ืกืš ื”ื›ืœ ื”ืชื•ื›ื ื™ืช ืชืจื•ืฅ ื‘ืžืฉืš 10 ืฉื ื™ื•ืช. ## ืคื™ืชืจื•ืŸ: ืฉื™ืžื•ืฉ ื‘ Promise ื—ื™ืฆื•ื ื™ ืื– ืงืœ ืœืจืื•ืช ืืช ื”ื‘ืขื™ื” ื›ืืŸ - ื›ืœ ื”ืคืขืœื” ืฉืœ waitAndSayYay ื”ื™ื ืขืฆืžืื™ืช ื•ืœื ื™ื•ื“ืขืช ืฉื›ื‘ืจ ืงืจืื• ืœืคื•ื ืงืฆื™ื” ื›ืžื” ืคืขืžื™ื ืงื•ื“ื. ื”ืคื™ืชืจื•ืŸ ื”ื•ื ืœื”ืฉืชืžืฉ ื‘ Promise ื’ืœื•ื‘ืืœื™ ื›ื“ื™ ืœืกื ื›ืจืŸ ื‘ื™ืŸ ื”ืงืจื™ืื•ืช: 1. ืื’ื“ื™ืจ Promise ื’ืœื•ื‘ืืœื™ ืฉืœื ืขื•ืฉื” ื›ืœื•ื 2. ื›ืœ ืคืขื ืฉืžืคืขื™ืœื™ื ืืช waitAndSayYay ื”ื•ื ื™ื•ืกื™ืฃ ื‘ืœื•ืง then ืœ Promise ื”ื’ืœื•ื‘ืืœื™, ื•ื’ื ื™ืขื“ื›ืŸ ืืช ื” Promise ื”ื’ืœื•ื‘ืืœื™ ืฉื™ืฉืžื•ืจ ืืช ื”ืชื•ืฆืื” - ื›ืœื•ืžืจ ืขื ื‘ืœื•ืง then ื”ื—ื“ืฉ. ื‘ืชื•ืš ืื•ืชื• ื‘ืœื•ืง then ืชื”ื™ื” ืคืงื•ื“ื” ืœื—ื›ื•ืช ืฉื ื™ื” ื•ืื– ืœื”ื“ืคื™ืก yay. 3. ื‘ืชื•ืš ื”ืคื•ื ืงืฆื™ื” ืืคืขื™ืœ await ืขืœ ื” Promise ื”ื’ืœื•ื‘ืืœื™, ืžื” ืฉืื•ืžืจ ืฉืื ื™ ืžื—ื›ื” ืœื›ืœ ื” Promise-ื™ื ืฉื”ื™ื• ืขื“ ืขื›ืฉื™ื• ื•ืื—ืจื™ื”ื ืœื‘ืœื•ืง then ื”ื—ื“ืฉ ืฉืœื™. ื‘ืงื•ื“ ื–ื” ื ืจืื” ื›ื›ื”:
import {
  setTimeout,
} from 'timers/promises';

let running = new Promise((resolve, reject) => { resolve() });

async function waitAndSayYay() {
  running = running.then(async () => {
    await setTimeout(1000);
    console.log('yay');
  });
  await running;
}

for (let i=0; i < 10; i++) {
  waitAndSayYay();
}
ื˜ืจื™ืง ื›ื–ื” ื™ื›ื•ืœ ืœื”ื•ืขื™ืœ ื›ืฉื™ืฉ ืœื ื• ืคื•ื ืงืฆื™ื” ืืกื™ื ื›ืจื•ื ื™ืช ืฉืขื•ืฉื” ืžืฉื”ื• ืจื’ื™ืฉ ื•ืœื ื”ื™ื™ื ื• ืจื•ืฆื™ื ืคื•ื ืงืฆื™ื•ืช ืื—ืจื•ืช "ืฉื™ืชืคืจืฆื•" ื‘ืืžืฆืข. ืœื“ื•ื’ืžื” ืคื•ื ืงืฆื™ื” ื›ื•ืชื‘ืช ืžืกืคืจ ืงื‘ืฆื™ื ืœื“ื™ืกืง ื•ืจื•ืฆื” ืœื•ื•ื“ื ืฉืงื•ื“ ืืกื™ื ื›ืจื•ื ื™ ืื—ืจ ืœื ื™ืจื•ืฅ ืœืคื ื™ ืฉื”ื™ื ืชืกื™ื™ื ืœื›ืชื•ื‘ ืืช ื›ืœ ื”ืงื‘ืฆื™ื. ื™ืฉ ืœื›ื ืจืขื™ื•ื ื•ืช ืื—ืจื™ื ืื™ืš ืœืžืžืฉ ืืช ื”ืžื ื’ื ื•ืŸ? ืžื•ื–ืžื ื™ื ื›ืจื’ื™ืœ ืœืฉืชืฃ ื‘ืชื’ื•ื‘ื•ืช.

ToCode
1 419
# ืžืขื ื™ื™ืŸ, ืžื•ืขื™ืœ, ื—ืฉื•ื‘ ื”ื™ื™ืชื™ ืจื•ืฆื” ืฉื›ืœ ื”ื“ื‘ืจื™ื ื”ื—ืฉื•ื‘ื™ื ื”ื™ื• ื’ื ืžืขื ื™ื™ื ื™ื, ืื‘ืœ ื–ื” ืœื ื”ืžืฆื‘. ื”ื™ื™ืชื™ ืจื•ืฆื” ืฉื›ืœ ื”ื“ื‘ืจื™ื ื”ืžื•ืขื™ืœื™ื ื”ื™ื• ื’ื ืžืขื ื™ื™ื ื™ื, ืื‘ืœ ื”ื ืฉื•ื‘ ืžืื›ื–ื‘ื™ื. ื”ื™ื›ืจื•ืช ื˜ื•ื‘ื” ืขื ื›ืœื™ ืขื‘ื•ื“ื” ืฉืืชื ื›ื‘ืจ ื”ื™ื•ื ืžืฉืชืžืฉื™ื ื‘ื• ื™ื›ื•ืœื” ืžืื•ื“ ืœื”ื•ืขื™ืœ ืœืคืจื•ื“ื•ืงื˜ื™ื‘ื™ื•ืช ืฉืœื›ื. ื”ื‘ื ื” ื˜ื•ื‘ื” ืฉืœ ื”ืคืจื•ื™ืงื˜, ื”ื˜ื›ื ื•ืœื•ื’ื™ื•ืช, ื”ืืชื’ืจื™ื ื•ื”ืžื’ื‘ืœื•ืช ืฉืœ ื›ืœ ื›ืœื™ ื”ื™ื ื—ืฉื•ื‘ื” ืœื”ืฆืœื—ืช ื”ืคืจื•ื™ืงื˜ ื”ืจื‘ื” ื™ื•ืชืจ ืžืคื™ืชืจื•ืŸ ื‘ืื’ ืกืคืฆื™ืคื™ ืื• ืžื™ืžื•ืฉ ืคื™ืฆ'ืจ ืงื˜ืŸ. ื•ืœืžืจื•ืช ื–ืืช ืžื” ืฉื”ื›ื™ ืžืขื ื™ื™ืŸ ื›ืจื’ืข ื–ื” ืœืžื” ื”ืคื•ื ืงืฆื™ื” ื”ื–ืืช ืฉืื ื™ ืžื ืกื” ืœื›ืชื•ื‘ ืœื ืขื•ืฉื” ื‘ื“ื™ื•ืง ืืช ืžื” ืฉืจืฆื™ืชื™, ืื• ืžื” ื”ืžืฉืžืขื•ืช ืฉืœ ื”ื•ื“ืขืช ื”ืฉื’ื™ืื” ื”ืกืคืฆื™ืคื™ืช ืฉืงื™ื‘ืœืชื™. ืžืขื ื™ื™ืŸ ื“ื•ืื’ ืœืขืฆืžื•. ื–ืืช ื”ืžืฉื™ืžื” ืฉืœื ื• ืœืžืฆื•ื ื–ืžืŸ ืœ"ื—ืฉื•ื‘" ื•"ืžื•ืขื™ืœ". ื”ืžืคืชื— ืœื”ืฆืœื—ื” ื”ื•ื ื‘ื™ื“ื™ื™ื ืฉืœื”ื.

ToCode
1 419
# ืžื” ื™ืงืจื” ืื? ื”ื ื” ื˜ื›ื ื™ืงื” ื˜ื•ื‘ื” ืฉืืชื ื™ื›ื•ืœื™ื ืœื ืกื•ืช ื‘ืคืขื ื”ื‘ืื” ืฉืชื’ื™ืขื• ืœืœืžื•ื“ ืžืฉื”ื• ื—ื“ืฉ: ื ื™ืกื•ื™ ืœื™ืžื•ื“ื™. ื”ืžืฉื—ืง ื‘ื ื•ื™ ืž-3 ืฉืœื‘ื™ื: ## ืื ื™ ื—ื•ืฉื‘ ืฉื™ืงืจื” X ื”ืฉืœื‘ ื”ืจืืฉื•ืŸ ื”ื•ื ืงืœ - ืืชื ืžืกืชื›ืœื™ื ืขืœ ืžืฉื”ื• ืฉืงืฉื•ืจ ืœื“ื‘ืจ ืฉืืชื ืœื•ืžื“ื™ื ื•ืžื ื—ืฉื™ื ื”ืชื ื”ื’ื•ืช ื—ื“ืฉื” ืฉืœื•. ืœื“ื•ื’ืžื”: 1. ืื ื™ ื—ื•ืฉื‘ ืฉืื ืื›ืชื•ื‘ ืืช ื”ืงื•ื“ ื”ื–ื” ื”ื•ื ื™ื“ืคื™ืก ืืช ื”ืชื•ืฆืื” ื”ื”ื™ื. 2. ืื ื™ ื—ื•ืฉื‘ ืฉืื ืืฉื•ื•ื” ื‘ื™ืŸ ื”ืžื—ืจื•ื–ืช "2" ืœืžืกืคืจ 2 ื‘ืคื™ื™ืชื•ืŸ ืืงื‘ืœ ืฉื”ื ืฉื•ื•ื™ื. 3. ืื ื™ ื—ื•ืฉื‘ ืฉืฉื ื™ ืงื•ื ื˜ื™ื™ื ืจื™ื ื‘ื“ื•ืงืจ ื™ื›ื•ืœื™ื ืœื“ื‘ืจ ืื—ื“ ืขื ื”ืฉื ื™, ื’ื ืื ื”ืคืขืœืชื™ ืื•ืชื ืžืงื‘ืฆื™ docker-compose ืฉื•ื ื™ื, ื‘ืชื ืื™ ืฉื”ื ื™ื•ืฉื‘ื™ื ืขืœ ืื•ืชื” ืจืฉืช. 4. ืื ื™ ื—ื•ืฉื‘ ืฉื”ืงื•ื“ ื‘ื“ื•ื’ืžื” ื™ืขื‘ื•ื“ ื’ื ืื ืืžื—ืง ืืช ื”ืฉื•ืจื” ื”ืจื‘ื™ืขื™ืช ืžืžื ื•. 5. ืื ื™ ื—ื•ืฉื‘ ืฉืื ืื•ืกื™ืฃ sleep ืœืคื ื™ ื”ืขืœื™ื” ืฉืœ ื‘ืกื™ืก ื”ื ืชื•ื ื™ื ืื– ื’ื ื”ืฉืจืช ืœื ื™ืฆืœื™ื— ืœืขืœื•ืช. ืืชื ื™ื›ื•ืœื™ื ืœืืชื’ืจ ืืช ืขืฆืžื›ื ื›ืžื” ืฉืืชื ืจื•ืฆื™ื. ืื ื™ ืื•ื”ื‘ ื›ืฉืื ื™ ืœื•ืžื“ ืžืฉื”ื• ื—ื“ืฉ ืื• ืงื•ืจื ืชื™ืขื•ื“ ืขืœ ืžืฉื”ื• ืคืฉื•ื˜ ืœืจืฉื•ื ื›ืžื” ืฉื™ื•ืชืจ ื“ื‘ืจื™ื ืฉืื ื™ ื—ื•ืฉื‘ ืฉื™ืงืจื• ืื• ืฉืœื ื™ืงืจื•. ## ืงืจื” Y ื‘ืฉืœื‘ ื”ืฉื ื™ ื‘ืžืฉื—ืง ื’ื ืื™ืŸ ื”ืคืชืขื” ื’ื“ื•ืœื”. ืื ื—ื ื• ื›ื•ืชื‘ื™ื ืืช ื”ื“ื‘ืจ ืฉื—ืฉื‘ื ื• ืœื›ืชื•ื‘ ื•ื‘ื•ื“ืงื™ื ืžื” ืงื•ืจื”. ืœืคืขืžื™ื ืžื” ืฉื—ืฉื‘ื ื• ืฉื™ืงืจื” ื‘ืืžืช ืงืจื”, ื•ืœืคืขืžื™ื ื™ืงืจื” ืžืฉื”ื• ืื—ืจ. ืžื” ืฉื—ืฉื•ื‘ ื”ื•ื ืœืฉื™ื ืœื‘ ืœืžื” ื‘ืืžืช ืงืจื” ื•ืœื ืœื—ืคืฉ ืจืง ืืช ื”ืชื•ืฆืื” ืฉืจืฆื™ืชื. ## ืœืžื” ื–ื” ืงืจื” ื•ื”ืฉืœื‘ ื”ืฉืœื™ืฉื™ ื”ื•ื ื”ื—ืœืง ื”ืงืฉื” ื•ื‘ื• ืฆืจื™ืš ืœื”ื‘ื™ืŸ ื•ืœื”ืกื‘ื™ืจ ืœืžื” ืงืจื” ืžื” ืฉืงืจื”. ืžื” ื—ืฉื‘ืชื ื‘ื”ืชื—ืœื”, ืžื” ื’ื™ืœื™ืชื, ื•ืžื” ืœืžื“ืชื ื‘ืชื”ืœื™ืš. ืื– ื—ื–ืจื” ืœื“ื•ื’ืžื” - ื—ืฉื‘ืชื™ ืฉืฉื ื™ ืงื•ื ื˜ื™ื™ื ืจื™ื ืฉืจืฆื™ื ืžืฉื ื™ ืงื‘ืฆื™ docker compose ืฉื•ื ื™ื ื™ื›ื•ืœื™ื ืœื“ื‘ืจ. ื”ืคืขืœืชื™ ื•ืจืื™ืชื™ ืฉื”ื ืœื ืžืฆืœื™ื—ื™ื ืœื“ื‘ืจ, ืืคื™ืœื• ืฉื”ื ืžื—ื•ื‘ืจื™ื ืขืœ ืื•ืชื” ืจืฉืช. ืขื›ืฉื™ื• ื‘ืฉืœื‘ ื”ืฉืœื™ืฉื™ ืื ื™ ืžื ืกื” ืœื”ื‘ื™ืŸ ืœืžื”. ืื ื™ ืžืกืชื›ืœ ืขืœ ื”ืจืฉืช, ืžื–ื”ื” ืฉื”ืฉื ืฉืœ ื”ืงื•ื ื˜ื™ื™ื ืจื™ื ื‘ืจืฉืช ืฉื•ื ื” ืžืžื” ืฉื—ืฉื‘ืชื™ ืฉื™ื”ื™ื”, ืžืฉื ื” ืืช ื”ืฉื ื•ืจื•ืื” ืฉื”ื ื›ืŸ ืžืฆืœื™ื—ื™ื ืœื“ื‘ืจ ื›ืฉืžืฉืชืžืฉื™ื ื‘ืฉืžื•ืช ื”ื ื›ื•ื ื™ื. ืžืคื” ืื ื™ ืžืžืฉื™ืš ื›ื“ื™ ืœื‘ื“ื•ืง ืื™ืš ืงื•ื‘ืขื™ื ืืช ื”ืฉื ื‘ืจืฉืช ืฉืœ ืงื•ื ื˜ื™ื™ื ืจ ื•ืจื•ืื” ืฉืื ื™ ื™ื›ื•ืœ ืœื”ื’ื“ื™ืจ ืืช ื”ืฉื ื•ืœืชืงืฉืจ ื‘ื™ืŸ ืงื•ื ื˜ื™ื™ื ืจื™ื. ืื• ื‘ื“ื•ื’ืžื” ืฉืœ ืคื™ื™ืชื•ืŸ - ื—ืฉื‘ืชื™ ืฉื”ืฉื•ื•ืื” ื‘ื™ืŸ ื”ืžื—ืจื•ื–ืช "2" ืœืžืกืคืจ 2 ืชืชืŸ ืขืจืš "ืืžืช"; ื ื™ืกื™ืชื™ ื•ืจืื™ืชื™ ืฉื“ื•ื•ืงื ืคื™ื™ืชื•ืŸ ืžื—ื–ื™ืจ ืชืฉื•ื‘ื” ืฉืœื™ืœื™ืช. ืื– ื”ืžืฉื›ืชื™ ืœืจืื•ืช ืื™ืš ืœื‘ื“ื•ืง ืžื” ื”ื˜ื™ืคื•ืก ืฉืœ ืขืจืš ืžืกื•ื™ื, ืื™ืš ืœื”ืžื™ืจ ื‘ื™ืŸ ื˜ื™ืคื•ืกื™ื ื•ื‘ืกื•ืฃ ืื™ืš ืœื”ืฉื•ื•ืช ื‘ื™ืŸ ืžืกืคืจ ืœืžื—ืจื•ื–ืช, ืคืขื ืื—ืช ืขื ื”ืžืจื” ืฉืœ ื”ืžืกืคืจ ืœืžื—ืจื•ื–ืช ื•ืคืขื ืฉื ื™ื” ืขื ื”ืžืจื” ืฉืœ ื”ืžื—ืจื•ื–ืช ืœืžืกืคืจ. ืฆืจื™ืš ืœื”ื’ื™ื“, ื”ืจื‘ื” ืคืขืžื™ื ื‘ืฉืœื‘ ื”ืฉืœื™ืฉื™ ืœื ืชื”ื™ื” ืœื ื• ืชืฉื•ื‘ื”. ื—ืฉื‘ืชื™ ืฉื”ื•ืกืคื” ืฉืœ sleep ื‘ืžืงื•ื ืžืกื•ื™ื ื‘ื‘ื“ื™ืงื” ืชื’ืจื•ื ืœื‘ื“ื™ืงื” ืœืขื‘ื•ื“, ื–ื” ื”ืฆืœื™ื—, ื•ืขื“ื™ื™ืŸ ืื ื™ ืœื ืœื’ืžืจื™ ืžื‘ื™ืŸ ืœืžื” ื–ื” ืงืจื” ืื• ืื™ืš ืœื’ืจื•ื ืœื‘ื“ื™ืงื” ืœืขื‘ื•ื“ ื‘ื“ืจืš ืื—ืจืช. ื–ื” ื‘ืกื“ืจ ื’ืžื•ืจ. ืื ื™ ืฉื•ืžืจ ืคืชืง ื—ื“ืฉ ืœืชืขืœื•ืžื•ืช ื›ืืœื”. ืžืชื™ืฉื”ื• ื™ื”ื™ื” ื–ืžืŸ ืœื—ื–ื•ืจ ืœื–ื”, ืื•ืœื™ ื›ืฉืื›ื™ืจ ื˜ื•ื‘ ื™ื•ืชืจ ืืช ื”ื˜ื›ื ื•ืœื•ื’ื™ื”, ื•ืื– ืืžืฆื ืืช ื”ืคื™ืชืจื•ืŸ. ## ืžื” ื˜ื•ื‘ ื‘ืฉื™ื˜ื” ื”ื–ืืช ืจื•ื‘ ืžื•ื—ืœื˜ ืฉืœ ืชื”ืœื™ื›ื™ ื”ืœื™ืžื•ื“ ืฉื ื›ืฉืœื™ื ื ื›ืฉืœื™ื ื‘ื’ืœืœ ืฉื‘ืฉืœื‘ ืžืกื•ื™ื ืžืื‘ื“ื™ื ืžื•ื˜ื™ื‘ืฆื™ื”. ืžืฉื”ื• ื ืจืื” ืžืขื ื™ื™ืŸ, ืžืชื—ื™ืœื™ื ืœืœืžื•ื“ ืื•ืชื•, ืœื ืžืฆืœื™ื—ื™ื ืœื›ืชื•ื‘ ืืฃ ืชื•ื›ื ื™ืช ื•ืžืชื™ื™ืืฉื™ื. ืฉื™ื˜ืช ื”ื ื™ืกื•ื™ื™ื ืขื•ื–ืจืช ืœืฉื ื•ืช ืืช ื”ืคื•ืงื•ืก: ื‘ืžืงื•ื ืœื”ืชืืžืฅ ืœืคืชื•ืจ ืชืจื’ื™ืœื™ื ืฉืžื™ืฉื”ื• ืื—ืจ ื›ืชื‘, ืื ื—ื ื• ืขื•ืฉื™ื ื ื™ืกื•ื™ ืขืœ ืžืฉื”ื• ืฉืื ื—ื ื• ื›ื‘ืจ ื™ื•ื“ืขื™ื ืœืขืฉื•ืช. ืžืชื—ื™ืœื™ื ืขื ืžืฉื”ื• ืฉืขื•ื‘ื“, ื–ื•ืจืงื™ื ื ื™ื—ื•ืฉ ืœื’ื‘ื™ ืื™ืš ื”ื•ื ื™ืขื‘ื•ื“ ืขื ืฉื™ื ื•ื™ ืงื˜ืŸ ื•ืื– ืžื ืกื™ื ื•ื‘ื•ื“ืงื™ื ืืช ื”ืชื•ืฆืื”. ืžืฉื—ืง ื›ื–ื” ืคื—ื•ืช ืจื’ื™ืฉ ืœืชืกื›ื•ืœื™ื ื•ืืคืฉืจ ืœืฉื—ืง ืื•ืชื• ื‘ืžื ื•ืช ืงื˜ื ื•ืช. ืงืฆืช ื›ืžื• ื‘ืžืฉื—ืง ืžื˜ืงื•ืช, ื’ื ื‘"ืžืขื ื™ื™ืŸ! ื•ืžื” ื™ืงืจื” ืื..." ืงืœ ืœืจืื•ืช ืืช ื”ืžื”ืœืš ื”ื‘ื, ื•ื’ื ืื ื”ืคืœืชื ืืช ื”ื›ื“ื•ืจ ืชืžื™ื“ ืืคืฉืจ ืœื”ืจื™ื ื•ืœื”ืชื—ื™ืœ ืžื—ื“ืฉ.

ToCode
1 419
      clearInterval(timer);
    });

    return {
      data,
      inc,
    };
  }
};
</script>

<template>
  <div>
    <button @click="inc">{{data.value}}</button>
  </div>
</template>
ืื•ืงื™ื™ ืื– ื‘ืกืคื™ืจืช ืฉื•ืจื•ืช ืžืฆื‘ื ื• ืœื ืžืื•ื“ ืฉื•ื ื” ืื‘ืœ ื”ืงื•ื“ ื›ืŸ ื ืจืื” ืื—ืจืช, ืœืคื—ื•ืช ื—ืœืงื™ืช: 1. ืžืคืชื— props ืœื ื”ืฉืชื ื”, ืื‘ืœ ื›ืœ ื”ืžืคืชื—ื•ืช ื”ืื—ืจื™ื ื‘ืื•ื‘ื™ืงื˜ ื”ืžื™ื•ืฆื ื”ื•ื—ืœืคื• ื‘ืžืคืชื— ืื—ื“ ื‘ืฉื setup. 2. ื”ืคื•ื ืงืฆื™ื” setup ืžืงื‘ืœืช ืืช ื” props ื‘ืชื•ืจ ืคืจืžื˜ืจ ื•ืžื‘ืฆืขืช ืืช ื›ืœ ืžื” ืฉื”ืžืคืชื—ื•ืช ื”ืžื™ื•ื—ื“ื™ื ืžื”ื’ื™ืจืกื” ื”ืงื•ื“ืžืช ื”ื™ื• ืขื•ืฉื™ื. 3. ื‘ืฉื‘ื™ืœ ืœื”ื’ื“ื™ืจ ืืช data ืฉืขืœื™ื• ื ืฉืžืจ ื”ืžื™ื“ืข ื”ืจื™ืืงื˜ื™ื‘ื™ ื”ืฉืชืžืฉืชื™ ื‘ืคื•ื ืงืฆื™ื” ืฉืœ ื•ื™ื• ืฉื ืงืจืืช reactive. ืื’ื‘ ืขื›ืฉื™ื• ืื ื—ื ื• ื™ื›ื•ืœื™ื ืœืฉืžื•ืจ ืžืกืคืจ ืื•ื‘ื™ืงื˜ื™ data ื‘ืื•ืชื” ืงื•ืžืคื•ื ื ื˜ื”. 4. ื”ืคื•ื ืงืฆื™ื” inc ื™ื›ื•ืœื” ืœื’ืฉืช ืœืžืฉืชื ื™ื ื”ืจื™ืืงื˜ื™ื‘ื™ื™ื ืฉืœ data ื‘ื–ื›ื•ืช JavaScript Closures. 5. ื”ืžืคืชื—ื•ืช mounted ื• unmounted ื”ืคื›ื• ืœืคื•ื ืงืฆื™ื•ืช onMounted ื• onUnmounted, ื›ืœ ืื—ืช ืžื”ืŸ ืžืงื‘ืœืช ื›ืงืœื˜ ืคื•ื ืงืฆื™ื”. ืฉื•ื‘ ื–ื” ืžืœื”ื™ื‘ ื›ื™ ืขื›ืฉื™ื• ืื ื—ื ื• ื™ื›ื•ืœื™ื ืœื”ื•ืกื™ืฃ ื›ืžื” ืงื•ื“ื™ ื˜ื™ืคื•ืœ ืœื›ืœ ืื™ืจื•ืข (ื›ืœื•ืžืจ ืืคืฉืจ ืœืงืจื•ื ืœ onMounted ื›ืžื” ืคืขืžื™ื ืขื ื“ื‘ืจื™ื ืฉื•ื ื™ื ืฉืฆืจื™ืš ืœืขืฉื•ืช). ื’ื ื›ืืŸ ื”ื’ื™ืฉื” ืœืžืฉืชื ื™ื ืžืฉื•ืชืคื™ื ื ืขืฉื™ืช ื‘ืืžืฆืขื•ืช JavaScript Closures ื•ืœื ืฆืจื™ืš ืืช this. 6. ืคื•ื ืงืฆื™ื™ืช setup ืžื—ื–ื™ืจื” ืืช ืื•ืชื• ืื•ื‘ื™ืงื˜ "ื“ื‘ืง" ืฉื‘ื’ื™ืจืกื” ื”ืงื•ื“ืžืช ื•ื™ื• ื™ืฆืจ ื‘ืฉื‘ื™ืœื ื• ืฉื›ื•ืœืœ ืืช ื”ืžืžืฉืง ืœื’ืฉืช ืœื›ืœ ื”ืžื™ื“ืข ื”ืžืขื ื™ื™ืŸ ื‘ืงื•ืžืคื•ื ื ื˜ื”. ื”ืคืขื ืื ื—ื ื• ืžื—ืœื™ื˜ื™ื ืžื” ื™ื™ื›ื ืก ืื• ืœื ื™ื™ื›ื ืก ืœืื•ื‘ื™ืงื˜ ื–ื”. ืื•ื‘ื™ืงื˜ ื”ื“ื‘ืง ืฉืื ื—ื ื• ืžื—ื–ื™ืจื™ื ื”ื•ื ืžื” ืฉืงื•ื“ ื”ื˜ืžืคืœื™ื™ื˜ ื™ื›ื•ืœ ืœื’ืฉืช ืืœื™ื• ื•ื”ื•ื ืฉืžื—ื‘ืจ ื‘ื™ืŸ ืงื•ื“ ื”ื˜ืžืคืœื™ื™ื˜ ืœืงื•ื“ ื”ืกืงืจื™ืคื˜. ## ื’ื™ืจืกื” 3 - setup script ื”ืžื‘ื ื” ืฉืœ Composition API ืžืืคืฉืจ ื™ื•ืชืจ ืฉืœื™ื˜ื” ืขืœ ื”ืงื•ืžืคื•ื ื ื˜ื” ื‘ื”ืฉื•ื•ืื” ืœื›ืชื™ื‘ ื”ืงืœืืกื™. ืื ื ืจืฆื” ืœืงื—ืช ื—ืœืง ืžืกื•ื™ื ื‘ื”ืชื ื”ื’ื•ืช ื•ืœืฉืชืฃ ืื•ืชื• ื‘ื™ืŸ ืงื•ืžืคื•ื ื ื˜ื•ืช ื›ืœ ืžื” ืฉืฆืจื™ืš ืœืขืฉื•ืช ื”ื•ื ืœื”ื•ืฆื™ื ืืช ื”ื—ืœืง ื”ื–ื” ืœืคื•ื ืงืฆื™ื” ื ืคืจื“ืช. ืœื“ื•ื’ืžื” ืื ื”ื™ื™ืชื™ ืจื•ืฆื” ืœืงื—ืช ืืช ื”ืจืขื™ื•ืŸ ืฉืœ ืฉืขื•ืŸ ืฉืžื•ืจื™ื“ 1 ืžืื™ื–ืฉื”ื• ืขืจืš ื”ื™ื™ืชื™ ื™ื›ื•ืœ ืœื›ืชื•ื‘ ืคื•ื ืงืฆื™ื” ื›ื–ืืช:
function withCountdown(start) {
    const ticks = ref(start);
    let timer;

    onMounted(() => {
      timer = setInterval(() => {
        ticks.value -= 1;
      }, 1000);
    });

    onUnmounted(() => {
      clearInterval(timer);
    });

    return ticks;
}
ื•ืื– ืงื•ืžืคื•ื ื ื˜ื” ื”ื™ืชื” ื™ื›ื•ืœื” ืœื”ืฉืชืžืฉ ื‘ืฉืขื•ืŸ ื‘ืื•ืคืŸ ื”ื‘ื:
export default {
    setup() {
        const ticks = withCountdown(100);
        return { ticks };
    }
};
ืฉื™ืชื•ืฃ ืงื•ื“ ื‘ื™ืŸ ืงื•ืžืคื•ื ื ื˜ื•ืช ื”ื•ืคืš ื”ืจื‘ื” ื™ื•ืชืจ ืงืœ ื›ืฉื™ืฉ ืœื ื• Composition API. ืื‘ืœ ื”ืฆื“ ื”ืฉื ื™ ืฉืœ ื”ืžื˜ื‘ืข ื”ื•ื ืฉื”ื›ืชื™ื‘ ื‘ืืžืฆืขื•ืช ืื•ื‘ื™ืงื˜ ื”ื•ื ืงืฆืช ืžืกื•ืจื‘ืœ. ื”ืฉืœื‘ ื”ื‘ื ื‘ืื‘ื•ืœื•ืฆื™ื” ื”ื•ื ืœื”ื•ืกื™ืฃ ืžื ื’ื ื•ืŸ ืœืงื•ืžืคื™ื™ืœืจ ืฉืœ ื•ื™ื• ื›ื“ื™ ืฉืื ื™ ืื›ืชื•ื‘ ืจืง ืืช ื”ื—ืœืงื™ื ื”ืžืขื ื™ื™ื ื™ื ื•ื”ื•ื ื™ืฉืœื™ื ื›ื‘ืจ ืœื‘ื“ ืืช ื›ืœ ื”ืฉืืจ. ื”ืงื•ื“ ื‘ื’ื™ืจืกื” ื”ืฉืœื™ืฉื™ืช ื ืจืื” ื›ืš:
<script setup>
import { ref, reactive, onMounted, onUnmounted } from 'vue';

const props = defineProps({
  start: Number,
  step: Number,
});

const data = reactive({ value: props.start });
function inc() {
  console.log(data);
  data.value += props.step;
}

let timer;

onMounted(() => {
  timer = setInterval(() => {
    data.value -= 1;
  }, 1000);
});

onUnmounted(() => {
  clearInterval(timer);
});

</script>

<template>
  <div>
    <button @click="inc">{{data.value}}</button>
  </div>
</template>
ืคื” ื›ื‘ืจ ืจื•ืื™ื ื—ื™ืกื›ื•ืŸ ื‘ืžืกืคืจ ืฉื•ืจื•ืช ื”ืงื•ื“ ื‘ืชื•ื›ื ื™ืช ื•ืœื“ืขืชื™ ื–ื• ื”ื’ื™ืจืกื” ื”ื›ื™ ื ืงื™ื”: 1. ื”ืงื•ื“ ื›ื•ืœื• ืฉืื ื™ ื›ื•ืชื‘ ื‘ืื•ืคืŸ ืื•ื˜ื•ืžื˜ื™ ื™ื•ื›ื ืก ืœืชื•ืš ืคื•ื ืงืฆื™ื™ืช setup. 2. ื”ืžืงืจื• defineProps ืžื—ืœื™ืฃ ืืช ื”ืžืคืชื— props ื•ืืช ื”ืขื‘ืจืช ื”ืžืฉืชื ื” props ืœืคื•ื ืงืฆื™ื” ืฉื”ื•ื’ื“ืจื” ื‘ setup. 3. ืื™ืŸ ืฆื•ืจืš ืœื”ื’ื“ื™ืจ ืื•ื‘ื™ืงื˜ ื•ืœื”ื—ื–ื™ืจ ืื•ืชื•, ื–ื” ื™ืงืจื” ืื•ื˜ื•ืžื˜ื™ืช. 4. ืื™ืŸ ืฆื•ืจืš ืœื‘ื—ื•ืจ ืื™ื–ื” ืžืฉืชื ื™ื ื™ืฉืžืจื• ื‘ืชื•ืจ ืฉื“ื•ืช ืฉืœ ืื•ืชื• ืื•ื‘ื™ืงื˜ ื“ื‘ืง. ื”ืงื•ืžืคื™ื™ืœืจ ื™ื‘ื—ืจ ืืช ื›ืœ ื”ืžืฉืชื ื™ื ืฉื”ื’ื“ืจืชื™ ื‘ Scope ื”ื—ื™ืฆื•ื ื™ ื‘ื™ื•ืชืจ ืฉืœ ื”ืกืงืจื™ืคื˜ ื•ื™ื‘ื ื” ืืช ื”ืื•ื‘ื™ืงื˜ ืžื”ื. ืžื‘ื—ื™ื ืช ื™ื›ื•ืœืช ื•ืคื™ืฆ'ืจื™ื ืงื•ื“ ื›ื–ื” ืฉืงื•ืœ ืœืงื•ื“ ืžื”ื’ื™ืจืกื” ื”ืฉื ื™ื”, ืื‘ืœ ืžื‘ื—ื™ื ืช ืชื—ื‘ื™ืจ ื”ื—ื™ืกื›ื•ืŸ ื‘ Boilerplate ืื•ืžืจ ืฉืื ื™ ืžืงื‘ืœ ืงื•ื“ ื™ื•ืชืจ ืงืฆืจ ืฉื™ื•ืชืจ ื ืขื™ื ืœื›ืชื•ื‘, ืœืงืจื•ื ื•ืœืชื—ื–ืง. ื‘ืฉื‘ื™ืœ ืฉื™ื”ื™ื” ืงืœ ืœืฉื—ืง ืขื ื”ืงื•ื“ ื”ืขืœื™ืชื™ ืืช ืฉืœื•ืฉืช ื”ื’ื™ืจืกืื•ืช ืฉืœ ื”ืงื•ืžืคื•ื ื ื˜ื” ืœืžืื’ืจ ื’ื™ื˜. ืžื•ื–ืžื ื™ื ืœืฉื›ืคืœ, ืœื”ืจื™ืฅ ื•ืœื‘ืขื•ื˜ ื‘ื• ื›ืžื” ืฉืชืจืฆื•: https://github.com/ynonp/vue-component-evolution.

ToCode
1 419
# ืชืจื’ื•ืžื•ืŸ Vue: ืฉืœื•ืฉ ื“ืจื›ื™ื ืœื›ืชื•ื‘ ืงื•ืžืคื•ื ื ื˜ื” ื”ืžืขื‘ืจ ืœ Composition API ื•ืื—ืจื™ื• ืœ script setup ืขืœื•ืœ ืœื”ื™ื•ืช ืžื‘ืœื‘ืœ ื›ืฉืžืชื—ื™ืœื™ื ืœืขื‘ื•ื“ ื‘ Vue: ื“ื•ื’ืžืื•ืช ื‘ืื™ื ื˜ืจื ื˜ ื™ื›ื•ืœื•ืช ืœื”ื•ืคื™ืข ื‘ื›ืœ ืื—ื“ ืžืฉืœื•ืฉืช ื”ื›ืชื™ื‘ื™ื ื•ืืคื™ืœื• ื”ืชื™ืขื•ื“ ื”ืจืฉืžื™ ืœื ื‘ื—ืจ ื”ืžืœืฆื” ื‘ืจื•ืจื”. ื›ืš ื™ื•ืฆื ืฉืžืฆื“ ืื—ื“ ื›ืฉืžืชื—ื™ืœื™ื ืœืœืžื•ื“ ืืช ื”ืคืจื™ื™ืžื•ื•ืจืง ืื ื—ื ื• ืฆืจื™ื›ื™ื ืœื‘ื—ื•ืจ ื›ืชื™ื‘ ืžืกื•ื™ื, ืื‘ืœ ืœืื•ืจืš ื”ื“ืจืš ื‘ื›ืชื™ื‘ื” ืื ืœื ื ื™ืคืชื— ืœื”ื›ื™ืจ ืืช ืฉื ื™ ื”ื›ืชื™ื‘ื™ื ื”ืื—ืจื™ื ื™ื”ื™ื” ืœื ื• ืžืื•ื“ ืงืฉื”. ื‘ื“ื™ื•ืง ื‘ืฉื‘ื™ืœ ื–ื” ืื ื™ ืจื•ืฆื” ืœื”ืฆื™ืข ืชืจื’ื•ืžื•ืŸ ืžื”ื™ืจ ื‘ื™ืŸ ืฉืœื•ืฉืช ื”ื›ืชื™ื‘ื™ื - ื‘ื”ืžืฉืš ื”ืคื•ืกื˜ ืชืžืฆืื• ืืช ืื•ืชื” ืงื•ืžืคื•ื ื ื˜ื” ื›ืชื•ื‘ื” ืฉืœื•ืฉ ืคืขืžื™ื, ื›ืœ ืคืขื ื‘ื’ื™ืฉื” ืื—ืจืช, ื•ื›ืš ืชื•ื›ืœื• ืœืจืื•ืช ืืช ื”ื“ื•ืžื” ื•ื”ืฉื•ื ื” ื‘ื™ืŸ ื”ื’ื™ืฉื•ืช ื•ืื ื™ ืžืงื•ื•ื” ืฉื’ื ืœื”ืจื’ื™ืฉ ื™ื•ืชืจ ื‘ื ื•ื— ืœืชืจื’ื ื‘ื™ื ื™ื”ืŸ. ## ื’ื™ืฉื” 1 ื•ื™ื• ืงืœืืกื™ ื‘ืฉื‘ื™ืœ ื”ืชืจื’ื•ืžื•ืŸ ืฉืœื™ ืื ื™ ืจื•ืฆื” ืœื›ืชื•ื‘ ืงื•ืžืคื•ื ื ื˜ื” ืฉืœ Counter ืฉืžืฆื™ื’ื” ื›ืคืชื•ืจ ื•ืขืœื™ื• ืžืกืคืจ ื”ืคืขืžื™ื ืฉืœื—ืฆื• ืขืœื™ื•, ื•ืžื“ืœื™ืงื” ื’ื ืฉืขื•ืŸ ื›ืš ืฉื›ืœ ืฉื ื™ื” ืฉืขื•ื‘ืจืช ื‘ืื•ืคืŸ ืื•ื˜ื•ืžื˜ื™ ื™ืจื“ 1 ืžื”ืขืจืš. ืชื™ื‘ื•ืœ ืื—ืจื•ืŸ ื”ื•ื ืœื”ื•ืกื™ืฃ ืืคืฉืจื•ืช ืœืงื•ื“ ื—ื™ืฆื•ื ื™ ืœื”ืขื‘ื™ืจ ืืช ื”ืขืจืš ื”ืจืืฉื•ื ื™ ืฉืœ ื” Counter ื•ื‘ื›ืžื” ืœื”ื’ื“ื™ืœ ืืช ื”ืขืจืš ื‘ื›ืœ ืœื—ื™ืฆื” ื‘ืชื•ืจ Properties. ื‘ื›ืชื™ื‘ ื”ืงืœืืกื™ ืฉืœ Vue ืื ื™ ื›ื•ืชื‘ ืืช ื”ืงื•ืžืคื•ื ื ื˜ื” ื‘ืงื•ื‘ืฅ ืขื ืกื™ื•ืžืช Vue. ื‘ืœื•ืง ื”ืกืงืจื™ืคื˜ ื‘ืงื•ื‘ืฅ ืฆืจื™ืš ืœื™ื™ืฆื ืื•ื‘ื™ืงื˜ ืฉื™ื’ื™ื“ ืœ Vue ืื™ืš ืœื™ืฆื•ืจ ืืช ื”ืงื•ืžืคื•ื ื ื˜ื” ื‘ืืžืฆืขื•ืช ืžืชื•ื“ื•ืช ืขื ืฉืžื•ืช ืžื™ื•ื—ื“ื™ื ืฉ Vue ื™ื•ื“ืข ืœื”ืกืชื›ืœ ืขืœื™ื”ื. ื”ื ื” ื”ืงื•ื“:
<script>
export default {
  data() {
    return {
      value: this.start,
    }
  },

  props: {
    start: Number,
    step: Number,
  },

  methods: {
    inc() {
      this.value += this.step;
    }
  },

  mounted() {
    this.timer = setInterval(() => {
      this.value -= 1;
    }, 1000);
  },

  unmounted() {
    clearInterval(this.timer);
  }

};
</script>

<template>
  <div>
    <button @click="inc">{{value}}</button>
  </div>
</template>

<style scoped>
</style>
ื›ืœ ื”ืžืคืชื—ื•ืช ื‘ืื•ื‘ื™ืงื˜ ื”ื ืฉืžื•ืช ืฉืžื•ืจื™ื ืฉืœ Vue: 1. ื”ืžืคืชื— data ืžื’ื“ื™ืจ ืžืฉืชื ื™ื ืจื™ืืงื˜ื™ื‘ื™ื™ื ืฉืงื•ื“ ื”ื˜ืžืคืœื™ื™ื˜ ื™ื•ื›ืœ ืœื”ืฉืชืžืฉ ื‘ื”ื. 2. ื”ืžืคืชื— props ืžื’ื“ื™ืจ ืื™ื–ื” ืžืืคื™ื™ื ื™ื ื™ื’ื™ืขื• ืžื‘ื—ื•ืฅ ื‘ืชื•ืจ Properties. 3. ื”ืžืคืชื— methods ืžื’ื“ื™ืจ ืคื•ื ืงืฆื™ื•ืช ืฉืงื•ื“ ื”ื˜ืžืคืœื™ื™ื˜ ื™ื•ื›ืœ ืœื”ืฉืชืžืฉ ื‘ื”ืŸ. 4. ื”ืžืคืชื—ื•ืช mounted, unmounted ื ืงืจืื™ื Lifecycle Events ื•ื”ื ืžืืคืฉืจื™ื ืœื”ืจื™ืฅ ืงื•ื“ ืื•ื˜ื•ืžื˜ื™ืช ื›ืฉืงื•ืจื” ืžืฉื”ื• - ืœืžืฉืœ ื›ืฉืงื•ืžืคื•ื ื ื˜ื” ื ื›ื ืกืช ืœืžืกืš ืื• ื™ื•ืฆืืช ืžื”ืžืกืš (ื•ื™ืฉ ืขื•ื“ ื”ืจื‘ื” ืžื”ื). ื‘ื’ืœืœ ืฉื›ืœ ืคืขื•ืœื” ื ื›ืชื‘ืช ื‘ืคื•ื ืงืฆื™ื” ื ืคืจื“ืช, ื‘ืื•ืคืŸ ืื•ื˜ื•ืžื˜ื™ ื”ืžืฉืชื ื” ื”ืžื™ื•ื—ื“ this ืžืชื™ื—ืก ืœืื•ื‘ื™ืงื˜ Vue ืฉ"ืžืื—ื“" ืืช ื›ืœ ื”ื’ื™ืฉื” ืœืงื•ืžืคื•ื ื ื˜ื”. ื‘ืคื•ื ืงืฆื™ื” inc ื”ืฉืชืžืฉืชื™ ื‘ this.value ื›ื“ื™ ืœื’ืฉืช ืœืžืฉืชื ื” value ืฉื”ื•ื’ื“ืจ ื‘ืชื•ืš data. ื‘ืคื•ื ืงืฆื™ื” unmounted ื”ืฉืชืžืฉืชื™ ื‘ this.timer ืฉื”ื•ื’ื“ืจ ื‘ืคื•ื ืงืฆื™ื” mounted. ื‘ืงื™ืฆื•ืจ ื›ืœ ื”ืžืชื•ื“ื•ืช ื”ืžื™ื•ื—ื“ื•ืช ื™ื›ื•ืœื•ืช ืœืฉืžื•ืจ ืžื™ื“ืข ืขืœ ืื•ืชื• this. ื’ื ื•ื™ื• ืขืฆืžื• ื™ืฉืžื•ืจ ืขืœื™ื• ืžื™ื“ืข, ืœืžืฉืœ ื”ื•ื ื™ืฉืžื•ืจ ืขืœื™ื• ืืช ื›ืœ ื”ืฉื“ื•ืช ื‘ืื•ื‘ื™ืงื˜ data ื•ืืช ื›ืœ ื” Properties ืฉืขื‘ืจื• ืœืงื•ืžืคื•ื ื ื˜ื”. ## ื’ื™ืจืกื” 2 - ืžืขื‘ืจ ืœ Composition API ื‘ืขื™ื” ืื—ืช ืฉืงืœ ืœืจืื•ืช ืขื ื”ื›ืชื™ื‘ ื”ืงืœืืกื™ ื”ื™ื ืฉืฆืจื™ืš ืžื ื’ื ื•ืŸ ืžื™ื•ื—ื“ ื›ื“ื™ ืœืฉืชืฃ "ืœื•ื’ื™ืงื” ื”ืงืฉื•ืจื” ืœ State" ื‘ื™ืŸ ืžืกืคืจ ืงื•ืžืคื•ื ื ื˜ื•ืช. ืœื•ื’ื™ืงื” ื”ืงืฉื•ืจื” ืœืกื˜ื™ื™ื˜ ื–ื” ืœื•ื’ื™ืงื” ืฉืžื•ืจื›ื‘ืช ื’ื ืžืคื•ื ืงืฆื™ื•ืช, ื’ื ืžืฉื“ื•ืช ืžื™ื“ืข ื‘ data ื•ื’ื ืžืื™ืจื•ืขื™ ืžื—ื–ื•ืจ ื—ื™ื™ื. ืœื“ื•ื’ืžื” ืื ื”ื™ื™ืชื™ ืจื•ืฆื” ืœืงื—ืช ืืช ื”ืจืขื™ื•ืŸ ืฉืœ ืื™ื ื˜ืจื•ื•ืœ ืฉื›ืœ ืฉื ื™ื” ืžื•ืจื™ื“ ืขืจืš ืฉืœ ืžืฉืชื ื” ื‘ืื—ื“ ื•ืœื”ืฉืชืžืฉ ื‘ื• ื‘ืงื•ืžืคื•ื ื ื˜ื” ื ื•ืกืคืช, ืื– ื‘ื›ืชื™ื‘ ื”ืงืœืืกื™ ืœื ื‘ืจื•ืจ ืื™ืš ืื ื™ ื™ื›ื•ืœ ืœืงื—ืช ืืช ื”ื—ืœืง ื”ื–ื” ื‘ื”ืชื ื”ื’ื•ืช ืฉืœ ื”ืงื•ืžืคื•ื ื ื˜ื” ื”ื—ื•ืฆื” ืžื”ืงื•ืžืคื•ื ื ื˜ื” ื•ืœื”ืฉืชืžืฉ ื‘ื• ื‘ืžืงื•ื ืื—ืจ. ื”ื™ื• ื›ืœ ืžื™ื ื™ ื“ืจื›ื™ื ืœื”ืชืžื•ื“ื“ ืขื ื”ืกื™ืคื•ืจ ื”ื–ื” ืœืื•ืจืš ื”ืฉื ื™ื ืื‘ืœ ื”ื“ืจืš ืฉื”ืชื™ื™ืฆื‘ื” ื‘ืชื•ืจ ืคื™ืชืจื•ืŸ ืžื•ืžืœืฅ ื ืงืจืืช Composition API. ื”ืจืขื™ื•ืŸ ืฉืœื” ื”ื•ื ืœืชืช ืœื ื• ื™ื•ืชืจ ืฉืœื™ื˜ื” ืขืœ ืžื” ืฉืงื•ืจื” ื‘ื™ืฆื™ืจืช ื”ืงื•ืžืคื•ื ื ื˜ื” ื•ืœื”ืคื•ืš ืืช ื›ืœ ื”ืžืคืชื—ื•ืช ื”ืžื™ื•ื—ื“ื™ื ืฉืจืื™ื ื• ืœืคื•ื ืงืฆื™ื•ืช ืฉืื ื—ื ื• ืฆืจื™ื›ื™ื ืœืงืจื•ื ืœื”ืŸ ื‘ืฆื•ืจื” ื™ื–ื•ืžื”. ื ืงื•ื“ืช ื”ื›ื ื™ืกื” ืฉืœื ื• ืœืงื•ืžืคื•ื ื ื˜ื” ืชื”ื™ื” ืขื›ืฉื™ื• ืคื•ื ืงืฆื™ื” ื‘ื•ื“ื“ืช ื‘ืฉื setup. ื’ื ื‘ Composition API ืขื“ื™ื™ืŸ ืžืฉืชืžืฉื™ื ื‘ืžืคืชื— ืžื™ื•ื—ื“ ื‘ืฉื props ื‘ืฉื‘ื™ืœ ืœื”ื’ื“ื™ืจ ืืช ื”ืžืืคื™ื™ื ื™ื ืฉืื ื—ื ื• ืžืงื‘ืœื™ื ืžื‘ื—ื•ืฅ, ืื‘ืœ ื›ืœ ืฉืืจ ื”ื”ืชื ื”ื’ื•ืช ื ื›ื ืกืช ืœืชื•ืš ืงื•ื“ ืฉืื ื—ื ื• ืžืจื™ืฆื™ื ื‘ืคื•ื ืงืฆื™ื” ืฉื ืฉืžืจืช ื‘ืžืคืชื— ื”ืžื™ื•ื—ื“ setup. ื”ืงื•ื“ ื ืจืื” ื›ืš:
<script>
import { ref, reactive, onMounted, onUnmounted } from 'vue';

export default {
  props: {
    start: Number,
    step: Number,
  },
  setup(props) {
    const data = reactive({ value: props.start });
    const inc = function() {
      console.log(data);
      data.value += props.step;
    }
    let timer;

    onMounted(() => {
      timer = setInterval(() => {
        data.value -= 1;
      }, 1000);
    });

    onUnmounted(() => {

ToCode
1 419
# ื”ื›ื™ ื˜ื•ื‘ื” ื‘ืฆื•ื•ืช ืื ืืช ื›ื‘ืจ ื”ื›ื™ ื˜ื•ื‘ื” ื‘ืฆื•ื•ืช ื‘ืžื” ืฉืืช ืขื•ืฉื”, ืื ื›ื‘ืจ ื”ื™ื•ื ื›ืœ ืžื™ ืฉืฆืจื™ืš ืžืฉื”ื• ื‘ืชื—ื•ื ืฉืœืš ืžื’ื™ืข ืœืฉืื•ืœ ืื•ืชืš, ืื ืืช ื”ื™ื—ื™ื“ื” ืฉื™ื›ื•ืœื” ืœื˜ืคืœ ื‘ื›ืœ ื”ืชืงืœื•ืช ื”ืืœื”, ื•ื”ืขื•ืœื ื‘ืœืขื“ื™ื™ืš ื™ืชืžื•ื˜ื˜ ืื– ืื ื™ ืžืชืงืฉื” ืœื”ืืžื™ืŸ ืฉืœื ืชืฆืœื™ื—ื™ ืœืžืฆื•ื ืœืคื—ื•ืช ืขื•ื“ ืžืงื•ื ืื—ื“ ืฉื™ืงื‘ืœ ืื•ืชืš, ืžืงื•ื ืฉื‘ื• ืื•ืœื™ ื›ื‘ืจ ืœื ืชื”ื™ื™ ื”ื›ื™ ื˜ื•ื‘ื” ื‘ืฆื•ื•ืช, ืžืงื•ื ืฉื‘ื• ืื•ืœื™ ื™ืฉืœืžื• ืœืš ืื—ืจืช, ื•ืื•ืœื™ ื”ืื ืฉื™ื ื™ื”ื™ื• ืื—ืจื™ื, ื•ืื•ืœื™ ื”ืขื‘ื•ื“ื” ืชื”ื™ื” ืฉื•ื ื”, ืžืงื•ื ืขื ื‘ืŸ ืื“ื ื—ื“ืฉ ืฉื™ื”ื™ื” ื”ื›ื™ ื˜ื•ื‘ ื‘ืฆื•ื•ืช ื•ืฉืืคืฉืจ ื™ื”ื™ื” ืœืœืžื•ื“ ืžืžื ื• ื“ื‘ืจื™ื ื—ื“ืฉื™ื. ื›ื™ ื‘ืกื•ืฃ ื”ื™ื•ื, ื”ืชื—ื•ืฉื” ื”ื˜ื•ื‘ื” ืฉืœ ื”ื”ื™ืฉื’ ืœื ืžื’ื™ืขื” ืžืœืคืชื•ืจ ืขื•ื“ ืชืงืœื”, ืืœื ืžืœื”ื™ื•ืช ืžืขื•ื“ื›ื ืช, ืžืœืœืžื•ื“ ื˜ื›ื ื™ืงื•ืช ื—ื“ืฉื•ืช ื•ืžื”ืชื—ื•ืฉื” ืฉื™ืฉ ืขื•ื“ ืœืืŸ ืœื”ืชืคืชื—.

ToCode
1 419
# ืžื” ืœืขืฉื•ืช ื›ืฉื’ื™ืœื™ืช ืฉื™ืฉ ื“ืจืš ื™ื•ืชืจ ื˜ื•ื‘ื”? ื”ืชืฉื•ื‘ื” ื”ืงืœื”- ืœืฉื ื•ืช. ืื™ืŸ ืฉื•ื ืชื™ืจื•ืฅ ืœื”ืžืฉื™ืš ืœื”ืฉืชืžืฉ ื‘ componentDidUpdate, componentWillUnmount ื• componentDidMount ื‘ืจื™ืืงื˜ ืื ืืชื” ื™ื•ื“ืข ืื™ืš ืœื”ืฉืชืžืฉ ื‘ useEffect. ื•ืื™ืŸ ืฉื•ื ืชื™ืจื•ืฅ ืœื”ืžืฉื™ืš ืœื›ืชื•ื‘ var ืื—ืจื™ ืฉืืชื” ื™ื•ื“ืข ืขืœ let ื• const. ื•ืขื“ื™ื™ืŸ- ื”ื—ื™ื™ื ื”ืืžื™ืชื™ื™ื ืงืฆืช ื™ื•ืชืจ ืžืืชื’ืจื™ื. ืื™ ืืคืฉืจ ืœืจื•ืฅ ืขืœ ืคืจื•ื™ืงื˜ ืฉืœื ื•ืœื”ืชื—ื™ืœ ืœืฉื ื•ืช ืืช ื›ืœ ื”ืžืงื•ืžื•ืช ืฉื›ืชื‘ื• ื‘ื”ื var ืœ let ืื• const, ื›ื™ ื‘ืคืจื•ื™ืงื˜ ืžืกืคื™ืง ื’ื“ื•ืœ ืœื ื ืฆื ืžื–ื”. ืื™ ืืคืฉืจ ืœื”ืคื•ืš ืืช ื›ืœ ื”ืงื•ืžืคื•ื ื ื˜ื•ืช ืจื™ืืงื˜ ืžื›ืชื™ื‘ ืงืœืืกื™ื ืœื›ืชื™ื‘ ืคื•ื ืงืฆื™ื•ืช ื• Hooks ื‘ื™ื•ื ืื—ื“. ื”ืžืœืฆื” ื™ื•ืชืจ ืžืจื•ื›ื›ืช ื”ื™ื ืœืขืฉื•ืช ืืช ื”ื”ืชืืžื•ืช ืจืง ืขืœ ืงื•ื“ ื—ื“ืฉ ืฉื›ื•ืชื‘ื™ื, ื•ื’ื ื”ื™ื ืœื ืชืžื™ื“ ื™ืฉื™ืžื”. ืœืคืขืžื™ื ื ื•ื— ื‘ืงื•ื“ ื—ื“ืฉ ืœืขืฉื•ืช ืฉื™ืžื•ืฉ ื—ื•ื–ืจ ื‘ืงื•ื“ ื™ืฉืŸ, ื•ืœื˜ื•ื‘ืช ื”ืขื ื™ื™ืŸ ืฆืจื™ืš ืœืขื‘ื•ื“ ื›ืžื• ืฉืขื‘ื“ื• ืคืขื. ื•ืœืคืขืžื™ื ืงื•ื“ ื—ื“ืฉ ืžืฉืชืžืฉ ื‘ Data ื™ืฉืŸ ืื• ืฆืจื™ืš ืœื”ื™ื•ืช ืขืงื‘ื™ ืขื ืฆื•ืจืช ืขื‘ื•ื“ื” ื™ืฉื ื”, ื•ืื– ืฉื•ื‘ ืื™ ืืคืฉืจ ืœืฉื ื•ืช ื•ืœืชืงืŸ ื˜ืขื•ื™ื•ืช. ื‘ืžืงื•ื ืœืื›ื•ืœ ืืช ื”ืœื‘ ื›ืœ ืคืขื ืฉื’ื™ืœื™ืชื ื“ืจืš ื˜ื•ื‘ื” ื™ื•ืชืจ ื•ืœื”ืชืขืฆื‘ืŸ ืฉืื™ ืืคืฉืจ ืœื™ื™ืฉื ืื•ืชื”, ื›ื“ืื™ ืœื‘ื ื•ืช ืœืขืฆืžื›ื ืžืขืจื›ืช ื›ืœืœื™ ืชื—ื–ื•ืงื” ืœืคืจื•ื™ืงื˜ ืฉืชืขื–ื•ืจ ืžืฆื“ ืื—ื“ ืœื ืœื”ืชื™ืฉ ืืช ืขืฆืžื›ื ืื‘ืœ ืžืฆื“ ืฉื ื™ ื›ืŸ ืชืขื•ื“ื“ ืฉื›ืชื•ื‘ ื•ืชื ื•ืขื” ืงื“ื™ืžื”. ืœื“ื•ื’ืžื” ืืคืฉืจ ืœื”ื—ืœื™ื˜ ืฉ: 1. ืคืขื ื‘ื—ื•ื“ืฉ ืžืงื“ื™ืฉื™ื ื™ื•ื ืœืฉื“ืจื•ื’ ืชืœื•ื™ื•ืช. 2. ืคืขื ื‘ืฉื‘ื•ืข ืžืงื“ื™ืฉื™ื ืฉืขืชื™ื™ื ืœ Refactoring ืฉืœ ืงื•ื“ ื›ื“ื™ ืฉื™ื”ื™ื” ืงืœ ื™ื•ืชืจ ืœืฉืœื‘ ืื•ืชื• ื‘ืฉื™ื˜ื•ืช ืขื‘ื•ื“ื” ื—ื“ืฉื•ืช. 3. ืœืคื ื™ ืฉืžืชืงื ื™ื ื‘ืื’ ืžืงื“ื™ืฉื™ื ืฉืขื” ืœื›ืชื™ื‘ืช ื‘ื“ื™ืงื” ืื•ื˜ื•ืžื˜ื™ืช ืฉืžื•ื•ื“ืืช ืืช ื”ื‘ืื’ ื”ื–ื” ื•ืืช ื”ืชื™ืงื•ืŸ. ืื ืœื ื”ืกืคืงื ื• ื‘ืฉืขื” ืžื•ื•ืชืจื™ื ืขืœ ื”ื‘ื“ื™ืงื”. 4. ื›ืœ ื™ื•ื ืžืงื“ื™ืฉื™ื ืจื‘ืข-ืฉืขื” ืœืงืจื™ืืช ืžืืžืจ ืžืงืฆื•ืขื™ ื›ื“ื™ ืœื”ื™ื—ืฉืฃ ืœืฉื™ื˜ื•ืช ืขื‘ื•ื“ื” ื—ื“ืฉื•ืช ื•ื˜ื•ื‘ื•ืช ื™ื•ืชืจ. 5. ืคืขื ื‘ืจื‘ืขื•ืŸ ื”ื•ืœื›ื™ื ืœื›ื ืก ืื• ืœืงื•ืจืก ืžืงืฆื•ืขื™ ื›ื“ื™ ืœื”ื™ื—ืฉืฃ ืœืฉื™ื˜ื•ืช ืขื‘ื•ื“ื” ื—ื“ืฉื•ืช ื•ื˜ื•ื‘ื•ืช ื™ื•ืชืจ ื‘ืฆื•ืจื” ืžืจื•ื›ื–ืช. ื›ืœืœื™ ืขื‘ื•ื“ื” ืžืกื•ื“ืจื™ื ืฉืžืฉืœื‘ื™ื ืืช ื”ืœื™ืžื•ื“ ื•ื”ื”ืชืžืงืฆืขื•ืช ื‘ืชื•ืš ื”ื™ื•ื ื™ื•ื ื”ื ื”ืžืคืชื— ืœื”ืชืคืชื—ื•ืช ืžืงืฆื•ืขื™ืช ืฉืœื ืชืœื•ื™ื” ื‘ืžื•ื˜ื™ื‘ืฆื™ื” - ื•ื”ื ืฉื™ืืคืฉืจื• ืœื›ื ื•ืœืคืจื•ื™ืงื˜ ื‘ืืžืช ืœื’ื“ื•ืœ ืœืื•ืจืš ื–ืžืŸ.

ToCode
1 419
# ืžื™ื ื™ืžืœื™ื–ื ืื™ื–ื” ืžื–ืœ, ื™ืฉ HDMI. ื–ืืช ื”ื™ืชื” ื”ืžื—ืฉื‘ื” ื”ืจืืฉื•ื ื” ืฉืœื™ ื›ืฉื”ื’ืขืชื™ ืœื›ื™ืชืช ื”ื”ื“ืจื›ื” ืขื ื”ืžื—ืฉื‘ ื•ืžืชืื HDMI ื™ื—ื™ื“. ื ื›ื•ืŸ HDMI ื–ื” ื›ื‘ืจ ื“ื™ ืกื˜ื ื“ืจื˜ ืื‘ืœ ืขื“ื™ื™ืŸ ื™ืฉ ืงื™ืจื•ืช ืขื ื—ื™ื‘ื•ืจื™ VGA ื•ื”ื“ื‘ืจ ื”ืื—ืจื•ืŸ ืฉืืชื” ืจื•ืฆื” ื–ื” ืœื”ื’ื™ืข ืœืงื•ืจืก ื‘ืœื™ ื”ืžืชืื ื”ื ื›ื•ืŸ. ืžืฆื“ ืฉื ื™ ื–ื” ืœืงื— ืจืง ื›ืžื” ืฉื ื™ื•ืช ืื—ืจื™ ืฉื—ื™ื‘ืจืชื™ ืืช ื”ืžื—ืฉื‘ ื‘ืฉื‘ื™ืœ ืœืื‘ื“ ืืช ื”ืžืฆื‘ ืจื•ื—. ื”ืžืงืจืŸ ืขื ื” HDMI ื”ืชื—ื™ืœ ืœื”ื‘ื”ื‘. ื” IT ื“ื•ื•ืงื ื”ื™ื• ืจื’ื•ืขื™ื ื•ืืžืจื• ืฉื›ื‘ืจ ืชืงื•ืคื” ืฉื™ืฉ ืœื”ื ื‘ืขื™ื•ืช ืขื ื”ืžืงืจืŸ ื”ื–ื” ื•ื”ืžืœื™ืฆื• ืœืขื‘ื•ืจ ื›ื™ืชื”. ืขื‘ืจื ื• ืจืง ื‘ืฉื‘ื™ืœ ืœื’ืœื•ืช ืฉื’ื ื‘ื›ื™ืชื” ื”ื—ื“ืฉื” ื”ืžืงืจืŸ ืžื”ื‘ื”ื‘ ื•ืื– ื ืคืœ ืœื™ ื”ืืกื™ืžื•ืŸ ืฉืื•ืœื™ ื”ื‘ืขื™ื” ื‘ื›ืœืœ ื‘ื”ื’ื“ืจื•ืช ื”ืžื—ืฉื‘. ื”ื•ืจื“ืช ื” Refresh Rate ืœ 30 ื”ืจืฅ ืชื™ืงื ื” ืืช ื”ื›ืœ, ืื‘ืœ ืขื›ืฉื™ื• ื›ื‘ืจ ื”ื™ื™ื ื• ื‘ื›ื™ืชื” ื”ืฉื ื™ื”. ืžื” ื”ืฆืขื“ ื”ื‘ื? ื—ื•ื–ืจื™ื ืœืžืงืจืŸ ื”ืจืืฉื•ืŸ ืื• ื ืฉืืจื™ื? ื” Debugging ืฉืœ ื”ืžืงืจืŸ ืœื ื”ื™ื” ืฉื•ื ื” ืžื”ืจื‘ื” ืกืฆื™ื ื•ืช Debugging ืฉืื ื™ ืขื•ื‘ืจ ื‘ืชื•ืจ ืžืคืชื—: ืžื ืกื™ื ืžืฉื”ื• ืงื˜ืŸ, ื•ืื– ืขื•ื“ ืื—ื“, ื•ืื– ืขื•ื“ ืื—ื“ ืขื“ ืฉื‘ืกื•ืฃ ืžื’ื™ืขื™ื ืœื’ื™ืจืกื” ืฉืœ ื”ืžืขืจื›ืช ืฉืขื•ื‘ื“ืช. ืื‘ืœ ืขื•ื‘ื“ืช ื–ื” ืœื ืžืกืคื™ืง. ืžื™ื ื™ืžืœื™ื–ื ื‘ืงื•ื“ ืื•ืžืจ ืฉืื ื—ื ื• ืจื•ืฆื™ื ืœื”ื›ื ื™ืก ืœืžืขืจื›ืช ืจืง ืืช ืžื” ืฉื”ืžืขืจื›ืช ืฆืจื™ื›ื”. ื”ื›ื ืกืช "ื ื™ืกื•ื™ื™ื" ืฉืœื ื‘ืืžืช ืขื–ืจื• ืขืœื•ืœื” ืœื”ื•ืกื™ืฃ ืขื•ื“ ื‘ืื’ื™ื ื•ืขื•ื“ ืกื™ื‘ื•ืš ืœืงื•ื“, ืฉืื—ืจื™ ื–ื” ื™ื”ื™ื” ืœื ื• ืงืฉื” ืœื”ื™ืคื˜ืจ ืžื”ื. ื”ื ืงื•ื“ื” ืฉื”ืžืขืจื›ืช ืขื•ื‘ื“ืช ืื™ื ื” ื ืงื•ื“ืช ื”ืกื™ื•ื. ืื—ืจื™ื” ืฆืจื™ืš ืœื–ื”ื•ืช ืžื” ื‘ื“ื™ื•ืง ืงืจื” ืฉื, ืœืžื” ื”ื™ื ืœื ืขื‘ื“ื” ืงื•ื“ื ื•ืื™ื–ื” ืฉื™ื ื•ื™ ื‘ื“ื™ื•ืง ื”ื•ื ื–ื” ืฉืื—ืจืื™ ืœื–ื” ืฉื”ืงื•ื“ ื”ืชื—ื™ืœ ืœืขื‘ื•ื“, ื•ื‘ืกื•ืฃ ืœื”ืžืฉื™ืš ื•ืœื—ืคืฉ ืืช ื”ื“ืจืš ื”ืคืฉื•ื˜ื” ื•ื”ืžื“ื•ื™ืงืช ื‘ื™ื•ืชืจ ืœื‘ืฆืข ืืช ืื•ืชื• ืฉื™ื ื•ื™. ืขื‘ื•ื“ื” ืžื“ื•ื™ืงืช ื”ื™ื ืžื”ืžืืคื™ื™ื ื™ื ืฉืœ ืžืชื›ื ืชื™ื ื˜ื•ื‘ื™ื ื•ืžื™ื ื™ืžืœื™ื–ื ื‘ืงื•ื“ ื”ื™ื ืžืืคื™ื™ืŸ ื˜ื•ื‘ ืฉืœ ืžืขืจื›ื•ืช ื˜ื•ื‘ื•ืช. ืืœื” ืฉื ื™ ื“ื‘ืจื™ื ืฉืœื ืฉื•ื•ื” ืœื”ืชืคืฉืจ ืขืœื™ื”ื.