๐Ÿ“šย Reference


๐Ÿ“œย Chapter


watch

computed

watchEffect


watchEffect - ํ•ต์‹ฌ ์›๋ฆฌ


watchEffect๋Š” watch์™€ ๋‹ฌ๋ฆฌ ๋ช…์‹œ์ ์œผ๋กœ ๊ฐ์‹œ ๋Œ€์ƒ์„ ์ง€์ •ํ•  ํ•„์š”๊ฐ€ ์—†๋‹ค.

import { ref, watchEffect } from 'vue';

const count = ref(0);
const multiplier = ref(2);

watchEffect(() => {
  // ์ฝœ๋ฐฑ ๋‚ด์—์„œ count.value์™€ multiplier.value์— ์ ‘๊ทผํ•˜๋ฉด, 
  // watchEffect๋Š” ์ด ๋‘ ๊ฐ€์ง€๋ฅผ ์ž๋™์œผ๋กœ ๊ฐ์‹œ ๋Œ€์ƒ์œผ๋กœ ๋“ฑ๋กํ•ฉ๋‹ˆ๋‹ค.
  const result = count.value * multiplier.value;
  console.log(`๊ณ„์‚ฐ ๊ฒฐ๊ณผ: ${result}`);
});

// 1. ์ดˆ๊ธฐ ์‹คํ–‰ ์‹œ: "๊ณ„์‚ฐ ๊ฒฐ๊ณผ: 0" (0 * 2)

count.value = 5;      // 2. count ๋ณ€๊ฒฝ -> ์ฝœ๋ฐฑ ์žฌ์‹คํ–‰: "๊ณ„์‚ฐ ๊ฒฐ๊ณผ: 10" (5 * 2)
multiplier.value = 3; // 3. multiplier ๋ณ€๊ฒฝ -> ์ฝœ๋ฐฑ ์žฌ์‹คํ–‰: "๊ณ„์‚ฐ ๊ฒฐ๊ณผ: 15" (5 * 3)

watchEffect - ์‚ฌ์šฉ ๋ชฉ์ 