Vue.jsを数ヶ月使ってみて遭遇した問題とその解決策

 Vue.jsを数ヶ月使ってみて遭遇した問題とその解決策

Data Binding JS Night
〜データバインディングなんでもLT大会@LINEオフィス〜

691a3d84d76ff8bf3f9a0c614d722369?s=128

positiveflat

May 27, 2015
Tweet

Transcript

  1. Vue.jsΛ਺ϲ݄࢖ͬͯΈͯૺ۰ͨ͠໰୊ͱͦͷղܾࡦ Data Binding JS Night
 ʙσʔλόΠϯσΟϯάͳΜͰ΋LTେձ@LINEΦϑΟεʙ גࣜձࣾϓϨΠυ Yohei Noda @positiveflat

    2015/05/27 https://plaid.co.jp/
  2. ࣗݾ঺հ ໊લ: Yohei Noda
 ॴଐ: גࣜձࣾϓϨΠυ
 twitter: @positiveflat 2014೥12݄ʹIBMΛୀ৬
 2015೥1݄ΑΓגࣜձࣾϓϨΠυʹjoin


    ϦΞϧλΠϜWeb઀٬πʔϧ ͷ։ൃʢओʹϑϩϯτΤ ϯυʣ
  3. ͸͡Ίʹ…Vue.jsͷ؆୯ͳ঺հ • ΠϯλϥΫςΟϒwebΠϯλʔϑΣʔεΛߏங͢ΔͨΊͷMVVM(Model, View, ViewModel) ΫϥΠΞϯτϑϨʔϜϫʔΫ • ૒ํ޲σʔλόΠϯσΟϯά • σΟϨΫςΟϒͱͯ͠ɺDOMͷॲཧΛΧελϚΠζͯ͠ఏڙͰ͖Δɻ

    • σʔλͷఆٛ΍DOMͷߏஙͳͲΛ·ͱΊͯɺͦͷ෦඼Λίϯϙʔωϯτͱͯ͠࡞੒ ͢Δ͜ͱ͕Ͱ͖Δɻ • ܰྔ • γϯϓϧͰֶशίετ͕௿͍ • ͨͩ͠…ES5४ڌͷϒϥ΢βαϙʔτΛલఏͱ͍ͯ͠ΔͷͰɺIE8͸αϙʔτ֎
  4. ͸͡Ίʹ…Vue.jsͷ؆୯ͳ঺հ • el • data • compiled • ready •

    methods …
  5. ͸͡Ίʹ…Vue.jsͷ؆୯ͳ঺հ HTML {{hoge}}ͷΑ͏ͳه๏Ͱ $data ҎԼͷϓϩύςΟʹΞΫηεՄೳ

  6. ʮγϯϓϧͰ৭ʑ؆୯ʹ࡞Εָͯͦ͠͏ɻʯ Vue.jsͷ࠷ॳͷҹ৅

  7. ͔֬ʹͦ͏Ͱ͕ͨ͠ɺ ࡉ͔͍໰୊ʹͿ͔ͭΓ·ͨ͠ɻ

  8. ໰୊1. $dataʹ஋Λ଍ͯ͠΋มߋ͕ݕ஌͞Εͳ͍ HTML 
 JavaScript

  9. ໰୊1. $dataʹ஋Λ଍ͯ͠΋มߋ͕ݕ஌͞Εͳ͍ [ղܾࡦ]
 $add, $delete (, $set)Λ࢖͏
 …ͪΌΜͱdocumentΛಡΜͰ͍ͳ͍ͱͿ͔ͭΔ໰୊ɻ
 
 “Due

    to the limitations of ES5, Vue cannot detect properties directly added to or deleted from an Object, so use this method and vm.$delete when you need to do so.”
  10. ໰୊1. $dataʹ஋Λ଍ͯ͠΋มߋ͕ݕ஌͞Εͳ͍ [ৄࡉ]
 Vue.js 0.11.*͸ECMAScript 5४ڌͷϒϥ΢βΛαϙʔτ͍ͯ͠ΔͷͰɺObject ʹ஋͕௥Ճ͞Εͯ΋ݕ஌͞Εͳ͍ɻ௨ৗ͸$dataͷԼͷϓϩύςΟʹgetter/ setterΛ෇༩͍ͯͦ͠ΕΛVue͕؂ࢹ͍ͯ͠Δ͕ɺ௚઀஋Λ௥Ճ͢Δͱ෇༩͞ Εͳ͍ɻ͜ͷ੍໿͕ͳ͘ͳΔͱɺObject.observe()ͱ͔͕࢖͑ΔΑ͏ʹͳΔ͔ ΋?

    # Object.observer()͸ɺมߋΛ؂ࢹͯ͠objectͷมߋཤྺΛอ࣋͢Δ͜ͱ͕Ͱ ͖Δ
  11. ໰୊2. $dataͷԼͷσʔλ͕େ͖͘ɾਂ͘ͳΔͱ ٸܹʹ஗͘ͳΔ [ৄࡉ] • ໰୊1ͷ܁Γฦ͕ͩ͠ɺVue.js͸ES5४ڌͷϒϥ΢βΛαϙʔτ ͍ͯ͠ΔͨΊɺObject.observe()Λ࢖Θͣʹɺgetter/setterΛ؂ࢹ ͍ͯ͠Δɻ • ಺෦తʹ͸ɺ$dataͷԼʹ͋ΔObjectͷgetter,

    setterΛ؂ࢹͯ͠ __proto__ҎԼΛॻ͖׵͍͑ͯΔɻ • Αͬͯɺ$dataͷԼͷ஋͕มΘΔ͚ͩͰɺେྔͷ__proto__Λॻ͖ ׵͑Δ͜ͱʹͳΔͨΊ஗͘ͳΔɻ
  12. ໰୊2. $dataͷԼͷσʔλ͕େ͖͘ɾਂ͘ͳΔͱ ٸܹʹ஗͘ͳΔ ͱ͍͏͜ͱͰɺ $dataҎԼ͸Ͱ͖Δ͚ͩܰͨ͘͠΄͏͕Αͦ͞͏ɻ

  13. ໰୊3. select optionͷtext͕؆୯ʹऔಘͰ͖ͳ͍ • JavaScript • html …valueͰ͸ͳ͘ɺtextͷ”໨ࠇ۠”΍”ौ୩۠”Λද͍ࣔͨ͠


  14. ໰୊3. select optionͷtext͕؆୯ʹऔಘͰ͖ͳ͍ [ղܾࡦ]
 ؆୯ͳΞΫηεͷํ๏͕ͳ͍ͷͰɺ
 computedͰoptionsͷarrayͷத͔ΒஞҰݕࡧ͢Δ

  15. ໰୊4. selectͷdefault஋͕html͔ΒࢦఆͰ͖ͳ͍ HTML “selected”ଐੑΛ෇༩͢Ε͹Α͔͕ͬͨɺɺ ෇༩Ͱ͖ͳ͍ʢoptions=“”Λ࢖༻ͤͣʹoptionΛҰͭͣͭॻ͍ͨ৔߹΋ಉ༷ʣ


  16. ໰୊4. selectͷdefault஋͕html͔ΒࢦఆͰ͖ͳ͍ [ղܾࡦ] ؆୯ɻ୯७ʹɺv-modelͷ஋ʹॳظ஋Λ΋ͨͤͯ΍Ε͹ྑ͍

  17. ·ͱΊ • Vue.js͸ɺ࣮૷͕γϯϓϧͳׂʹ൚༻ੑ͕ߴ͍ɻ • ॳΊͷࠒʹͿ͔ͭͬͨ໰୊΋ຊ೔঺հͨ͠Ґͷ͍ܰ΋ͷͰɺ׳Εͯ͠·͑ ͹ॻ͖΍͍͢ɻ • ࣍ͷόʔδϣϯָ͕͠Έɻ

  18. ࠷ޙʹগ͠એ఻

  19. גࣜձࣾϓϨΠυͰ͸ɺ ΤϯδχΞΛืूதͰ͢ʂ

  20. Thank you! Yohei Noda @positiveflat