Vue.js 2.0について

2016-07-22 Tokyo Otaku Mode 社内勉強会資料

Transcript

1. VUE 2.0 2016-07-22 Tokyo Otaku Mode 社内勉強会資料 新舘邦貴 k_niidate@tokyootakumode.com
2. 注意 この資料は2016-07-22 時点の情報です。 Vue 2.0 はリリー ス直前なため、 最新情報は随時変わっているのでご注意くだ さい。
3. 公式アナウンス Virtual-DOM の採用 (React でもおなじみの) パフォー マンス改善 サー バサイドレンダリング 仮想ブラウザ無しでユニットテストできる http://vuejs.org/2016/04/27/announcing­2.0/
4. 1.x 系はしばらくはサポー トされる。 We are also not forgetting about 1.x! 1.1 will be released alongside 2.0 beta, with an LTS period of 6­ month critical bug fixes and 9­month security updates. It will also ship with optional deprecation warnings to get you prepared for upgrading to 2.0. Stay tuned!
5. 何が変わるか https://github.com/vuejs/vue/issues/2873
6. DOM Virtual DOM 化 render new replace deprecated, components now must have exactly one root element.
7. LIFECYCLE HOOKS beforeMount new mounted new beforeUpdate new updated new activated new (for keep-alive) deactivated new (for keep-alive) ready deprecated, use mounted (there's no longer the guarantee to be in- document) activate deprecated, moved into vue-router beforeCompile deprecated, use created compiled deprecated, use mounted attached deprecated, use custom in-dom check in other hooks detached deprecated, same as above
8. 初期化周りが変わる模様。 V-DOM 化の影響と思われる。 特に ready deprecated, use mounted (there's no longer the guarantee to be in- document) attached deprecated, use custom in-dom check in other hooks あたりは影響がありそう。 たぶん、jQuery のプラグインを初期化したり、 呼び出したりしているところは 書き換えが必要になってくるのでは?
9. DATA vm.$get deprecated, just retrieve values directly vm.$set deprecated, use Vue.set vm.$delete deprecated, use Vue.delete vm.$eval deprecated, no real use vm.$interpolate deprecated, no real use vm.$log deprecated, use devtools
10. vm.$set deprecated, use Vue.set Vue.set and Vue.delete cannot work on Vue instances. It is now mandatory to properly declare all top-level reactive properties in the data option. examples/tree.js そのまま書き換えできるので、 直していきましょう。 同じような機能を整理し たのと、 次で説明するstore パター ンを推していく流れと思われる。 http://vuejs.org/guide/reactivity.html http://jp.vuejs.org/guide/reactivity.html # o l d v m . $ s e t ( ' p r o p e r t y ' , v a l u e ) ; # n e w V u e . s e t ( t h i s . m o d e l , ' c h i l d r e n ' , v a l u e ) ;
11. EVENTS vm.$dispatch deprecated, use global event bus or Vuex. (see below) vm.$broadcast deprecated, same as above
12. これはTOM にとってでかい。 現状のTOM のVue を使ったコー ドでは $dispatch と $broadcast は結構使われて いる。 一覧に表示したアイテムからカー トに入れるところ Wishlist のハー トマー クのOn/Off カー トの状態変更 など、 コンポー ネントをまたがっているところがヤバい。 どこがイベントを発しているのか、 どこが受け取ってどのようなデー タの流れ になっているのか、 理解しがたいコー ドになりがち。
13. いろんなコンポー ネントが非同期に動作して、 互いに影響を与えている。
14. Store パター ン、Vuex 推し。 http://jp.vuejs.org/guide/reactivity.html http://vuejs.org/guide/application.html#State­Management http://vuex.vuejs.org/en/data­flow.html
16. v a r s t o r e = { s t a t e : { m e s s a g e : ' H e l l o ! ' } , a c t i o n A : f u n c t i o n ( ) { t h i s . s t a t e . m e s s a g e = ' a c t i o n A t r i g g e r e d ' } , a c t i o n B : f u n c t i o n ( ) { t h i s . s t a t e . m e s s a g e = ' a c t i o n B t r i g g e r e d ' } } v a r v m A = n e w V u e ( { d a t a : { p r i v a t e S t a t e : { } , s h a r e d S t a t e : s t o r e . s t a t e } } ) v a r v m B = n e w V u e ( { d a t a : { p r i v a t e S t a t e : { } , s h a r e d S t a t e : s t o r e . s t a t e } } )
17. コー ドを綺麗にするしかない。
18. DOM vm.$appendTo deprecated, just use native DOM API on vm.$el. vm.$before deprecated vm.$after deprecated 直接DOM のAPI を使う。V-DOM 化の影響。 jQuery を使うとしたら、 みたいなことをすることになるでしょう。 $ ( v m . $ e l ) ;
19. DIRECTIVES v-for argument order updates: (value, index) in arr, (value, key, index) in obj $index and $key deprecated ES6 的な書き方になるということ。 < l i v ­ f o r = " ( i t e m , i n d e x ) i n i t e m s " > { { i t e m . t e x t } } < / l i >
20. v-ref now just a special attribute as ref v-el deprecated (merged with ref) v-ref is now no longer a directive: it is now a special attribute similar to key and transition: Dynamic ref bindings are now also supported: ころころ変わっているが、 結果的にはシンプルになる方向。 < ! ­ ­ b e f o r e ­ ­ > < c o m p v ­ r e f : f o o > < / c o m p > < ! ­ ­ a f t e r ­ ­ > < c o m p r e f = " f o o " > < / c o m p > < c o m p : r e f = " d y n a m i c R e f " > < / c o m p >
21. OTHER BREAKING CHANGES v-model changes v-model no longer cares about initial inline value before after デー タを持つのはエレメントではない、 ということ。 < t e x t a r e a v ­ m o d e l = " v a l " > h e l l o w o r l d < / t e x t a r e a > d a t a ( ) { r e t u r n { v a l : ' h e l l o w o r l d ' } } < t e x t a r e a v ­ m o d e l = " v a l " > < / t e x t a r e a >
23. まとめ ベー タフェー ズだがまだ全貌が見えない Vue のguide の思想に従って作っていれば問題は少ない( なっていないので直 しましょう)