Vue: beforeDestroy์—์„œ ์†Œํ’ˆ์„ ๋ณ€๊ฒฝํ•  ๋•Œ Vue๊ฐ€ ๊ฐ์‹œ์ž๋ฅผ ํ˜ธ์ถœํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

์— ๋งŒ๋“  2018๋…„ 05์›” 23์ผ  ยท  3์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: vuejs/vue

๋ฒ„์ „

2.5.16

์žฌ์ƒ์‚ฐ ๋งํฌ

https://jsfiddle.net/86s8qufj/

์žฌํ˜„ ๋‹จ๊ณ„

  1. ์žฌ์ƒ์‚ฐ ๋งํฌ ์—ด๊ธฐ
  2. ์ฝ˜์†” ์—ด๊ธฐ
  3. "TestComponent ํ† ๊ธ€" ๋ฒ„ํŠผ์„ ํด๋ฆญํ•ฉ๋‹ˆ๋‹ค.
    ์ด๋ ‡๊ฒŒ ํ•˜๋ฉด TestComponent๊ฐ€ ์ƒ์„ฑ๋ฉ๋‹ˆ๋‹ค.
  4. ์ž…๋ ฅ์—์„œ ๋ฌด์–ธ๊ฐ€๋ฅผ ๋ณ€๊ฒฝํ•ด ๋ณด์‹ญ์‹œ์˜ค. ์ฝ˜์†”์—์„œ 'in testInfo watcher'๋ฅผ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋Š” testInfo watcher๊ฐ€ ํ˜ธ์ถœํ–ˆ์Œ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค.
  5. "Toggle TestComponent" ๋ฒ„ํŠผ์„ ๋‹ค์‹œ ํด๋ฆญํ•˜์‹ญ์‹œ์˜ค.
    ์ด๊ฒƒ์€ TestComponent๋ฅผ ํŒŒ๊ดดํ•ฉ๋‹ˆ๋‹ค.
    beforeDestroy ํ›„ํฌ์—์„œ 'testInfo' ์†์„ฑ์„ ๋ณ€๊ฒฝํ•ฉ๋‹ˆ๋‹ค.
    ๊ทธ๋Ÿฌ๋‚˜ ์ฝ˜์†”์—์„œ๋Š” 'In beforeDestroy' ๋ฐ 'In testInfo watcher' ๋Œ€์‹  'In beforeDestroy'๋งŒ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋ฌด์—‡์„ ๊ธฐ๋Œ€ํ•ฉ๋‹ˆ๊นŒ?

beforeDestory ํ›„ํฌ์—์„œ ๋ณ€๊ฒฝํ•  ๋•Œ 'testInfo' ์†์„ฑ์— ๋Œ€ํ•œ ๊ฐ์‹œ์ž๊ฐ€ ํ˜ธ์ถœ๋  ๊ฒƒ์œผ๋กœ ์˜ˆ์ƒํ•ฉ๋‹ˆ๋‹ค.

์‹ค์ œ๋กœ ๋ฌด์Šจ ์ผ์ด ์ผ์–ด๋‚˜๊ณ  ์žˆ์Šต๋‹ˆ๊นŒ?

beforeDestroy ํ›„ํฌ์—์„œ 'testInfo' ์†์„ฑ์„ ๋ณ€๊ฒฝํ–ˆ์ง€๋งŒ watcher๊ฐ€ ํ˜ธ์ถœ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

๋ฌธ์„œ์—์„œ ์–ธ๊ธ‰ํ•˜๋Š” ๊ฒƒ์ด ์ข‹์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์ด์ œ "Vue ์ธ์Šคํ„ด์Šค๊ฐ€ ํŒŒ๊ดด๋˜๊ธฐ ์ง์ „์— ํ˜ธ์ถœ๋ฉ๋‹ˆ๋‹ค. ์ด ๋‹จ๊ณ„์—์„œ ์ธ์Šคํ„ด์Šค๋Š” ์—ฌ์ „ํžˆ ์™„์ „ํžˆ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค."

๋ชจ๋“  3 ๋Œ“๊ธ€

๋˜ํ•œ ํŒŒ๊ดด๋œ ํ›„ํฌ์— testInfo๋ฅผ ๊ธฐ๋กํ•˜๋ ค๊ณ  ํ•˜๋ฉด ์ƒˆ ๊ฐ’์ด ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ๊ฐœ์ฒด๋Š” ํŒŒ๊ดด๋˜์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค....

beforeDestroy ๋Š” Vue ์ธ์Šคํ„ด์Šค๋ฅผ ๋ถ„ํ•ดํ•˜๊ธฐ ์ง์ „์— ๋ฐœ์ƒํ•˜๋ฏ€๋กœ ์ธ์Šคํ„ด์Šค๊ฐ€ ํŒŒ๊ดด๋˜๋ฉด ๊ฐ์‹œ์ž๊ฐ€ ํŠธ๋ฆฌ๊ฑฐํ•˜์ง€ ์•Š๋Š” ๊ฒƒ์ด ์ •์ƒ์ž…๋‹ˆ๋‹ค(๋Œ€๋ถ€๋ถ„์˜ ๊ฐ์‹œ์ž ๊ธฐ๋Šฅ์ด ๋ฌดํšจํ™”๋จ).
๋ฐ์ดํ„ฐ๋ฅผ ๋ณ€๊ฒฝํ•˜๋Š” ๋Œ€์‹  beforeDestroy ํ›„ํฌ์—์„œ ์ง์ ‘ ๊ฐ์‹œ์ž๋ฅผ ํ˜ธ์ถœํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

๋ฌธ์„œ์—์„œ ์–ธ๊ธ‰ํ•˜๋Š” ๊ฒƒ์ด ์ข‹์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์ด์ œ "Vue ์ธ์Šคํ„ด์Šค๊ฐ€ ํŒŒ๊ดด๋˜๊ธฐ ์ง์ „์— ํ˜ธ์ถœ๋ฉ๋‹ˆ๋‹ค. ์ด ๋‹จ๊ณ„์—์„œ ์ธ์Šคํ„ด์Šค๋Š” ์—ฌ์ „ํžˆ ์™„์ „ํžˆ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค."

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰