๐ย Reference
๐ย Chapter
watchEffect
๋ watch
์ ๋ฌ๋ฆฌ ๋ช
์์ ์ผ๋ก ๊ฐ์ ๋์์ ์ง์ ํ ํ์๊ฐ ์๋ค.
watchEffect
๋ ์ ์๋๋ ์ฆ์ ์ฝ๋ฐฑ ํจ์๋ฅผ ํ ๋ฒ ์คํํ๋ค.ref
, reactive
, computed
)์ ์๋์ผ๋ก ์ข
์์ฑ์ผ๋ก ๊ธฐ๋กํ๋ค.watchEffect
์ ์ฝ๋ฐฑ ํจ์๋ ์ฆ์ ๋ค์ ์คํ๋๋ค.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)