Vue: ์ฒ˜์Œ ๋‹ค์‹œ ๋ Œ๋”๋ง ํ•  ๋•Œ ๊ตฌ์„ฑ ์š”์†Œ๊ฐ€ ์‚ฌ๋ผ์ง

์— ๋งŒ๋“  2017๋…„ 08์›” 15์ผ  ยท  5์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: vuejs/vue

๋ฒ„์ „

2.4.2

๋ณต์ œ ๋งํฌ

http://jsfiddle.net/yMv7y/3265/

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

JSFiddle์—์„œ L15์˜ setTimeout ๊ฐ€ 2 ์ดˆ ํ›„์— ์™„๋ฃŒ ๋  ๋•Œ๊นŒ์ง€ ๊ธฐ๋‹ค๋ฆฝ๋‹ˆ๋‹ค.

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

CustomElA๊ฐ€ ์—ฌ์ „ํžˆ DOM์— ์žˆ์–ด์•ผํ•ฉ๋‹ˆ๋‹ค.

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

CustomElA๋Š” ๋‹ค์‹œ ๋ Œ๋”๋ง ํ•  ๋•Œ DOM์—์„œ ์ œ๊ฑฐ๋ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์„ธ ๋ฒˆ์งธ ๋‹ค์‹œ ๋ Œ๋”๋ง์‹œ ๋‹ค์‹œ ๋‚˜ํƒ€๋‚ฉ๋‹ˆ๋‹ค (L16์˜ JSFiddle์—์„œ setTimeout ๋Œ€์‹  setInterval ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ํ…Œ์ŠคํŠธ ๋จ).


JSfiddle์€ Vue v2.4.0์„ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์ง€๋งŒ v2.4.2์˜ ๋ฒ„๊ทธ๋ฅผ ๋กœ์ปฌ์—์„œ ํ™•์ธํ–ˆ์Šต๋‹ˆ๋‹ค.

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

๋ฒ„๊ทธ ์ธ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ์‹ ๊ณ  ํ•ด ์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค. 2.1.4์—์„œ ๋„์ž… ๋œ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ๋ฌธ์ œ๋Š” vnodes ํŒจ์น˜ ์ค‘์— ๋ฐœ์ƒํ•˜๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

ํŽธ์ง‘ : vnode ํŒจ์น˜ ์ค‘ init ์—์„œ _isDestroyed ๊ฐ€ false ์ธ ๊ฒƒ์ฒ˜๋Ÿผ ๋ณด์ด๋ฏ€๋กœ mount๋ฅผ ํ˜ธ์ถœํ•˜์ง€ ์•Š๊ณ  ๋…ธ๋“œ ํŠธ๋ฆฌ์—์„œ ์‚ฌ๋ผ์ง‘๋‹ˆ๋‹ค.

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

๋ฒ„๊ทธ ์ธ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ์‹ ๊ณ  ํ•ด ์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค. 2.1.4์—์„œ ๋„์ž… ๋œ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ๋ฌธ์ œ๋Š” vnodes ํŒจ์น˜ ์ค‘์— ๋ฐœ์ƒํ•˜๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

ํŽธ์ง‘ : vnode ํŒจ์น˜ ์ค‘ init ์—์„œ _isDestroyed ๊ฐ€ false ์ธ ๊ฒƒ์ฒ˜๋Ÿผ ๋ณด์ด๋ฏ€๋กœ mount๋ฅผ ํ˜ธ์ถœํ•˜์ง€ ์•Š๊ณ  ๋…ธ๋“œ ํŠธ๋ฆฌ์—์„œ ์‚ฌ๋ผ์ง‘๋‹ˆ๋‹ค.

์ด ๋ฌธ์ œ๋Š” ํ•ด๊ฒฐ๋˜์—ˆ์ง€๋งŒ ์Šฌ๋กฏ์„ ๊ฐ์‹ธ๋Š” ์š”์†Œ๋ฅผ ๋ณ€๊ฒฝํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์š”์†Œ๊ฐ€ "๋Œ€์ฒด"๋œ ๊ฒƒ์œผ๋กœ ๊ฐ„์ฃผ๋˜์–ด ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ํฌํ•จํ•œ ๋ชจ๋“  ์Šฌ๋กฏ ์ฝ˜ํ…์ธ ๊ฐ€ ํŒŒ๊ดด ๋œ ๋‹ค์Œ ๋‹ค์‹œ ์ƒ์„ฑ๋ฉ๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ ๋ถˆํ–‰ํžˆ๋„ vdom ํŒจ์น˜๊ฐ€ ์ž‘๋™ํ•˜๋Š” ๋ฐฉ์‹์ด๋ฉฐ ๋ณ€๊ฒฝ๋˜์ง€ ์•Š์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

ํ—‰ํ—‰
๊ณ ๋งˆ์›Œ์š”. ๋‹ค์Œ ๋ฆด๋ฆฌ์Šค์— ๋Œ€ํ•œ ์•ผ๊ตฌ์žฅ ๋‚ ์งœ๊ฐ€ ์žˆ์Šต๋‹ˆ๊นŒ?

๋˜ํ•œ ๋‹ค์Œ ๋ฆด๋ฆฌ์Šค๊ฐ€ ์–ธ์ œ ๋ฐœ์ƒํ• ์ง€ ๊ถ๊ธˆํ•˜๊ฑฐ๋‚˜ ๊ทธ๋™์•ˆ์ด ๋ฒ„์ „์„ ์„ค์น˜ํ•  ๋ฐฉ๋ฒ•์ด ์žˆ์Šต๋‹ˆ๊นŒ? ๊ฐ์‚ฌ.

@ Tolmark12 ๋Š” ์ €์žฅ์†Œ๋ฅผ ๋ณต์ œํ•˜๊ณ  ํŒŒ์ผ์„ ๋นŒ๋“œํ•˜๊ณ  npm link ๋ฅผ ์‹คํ–‰ํ•˜์—ฌ vue ๐Ÿ˜‰์˜ ๋กœ์ปฌ ๋ฒ„์ „์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

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