前端大 hook 時代， 從 Mixins 到 Composition API

Vue.js Taiwan 007 webinar by LINE TODAY UIT - Yu-Hsin Chen
https://vuejs.kktix.cc/events/v-tw-meetup-007

Transcript

1. 前端⼤ hook 時代，
   從 Mixins 到
   Composition API
   LINE TODAY UIT
   Yu-Hsin Chen
   2020.06.24
   

   View Slide

2. Composition
   API
   Upgrade to
   Vue3
   Hooks in Vue
   ⼤綱
   

   View Slide

3. 內容
   ⼤綱
   Upgrade to
   Vue3
   Composition
   API
   Upgrade to
   Vue3
   Hooks in Vue
   

   View Slide

4. Q. Vue3 能⽤到正式產
   品了嗎？
   A. 能，⼀定能！
   

   View Slide

5. Q. 推薦 Vue3 ⽤到正式
   產品了嗎？
   A.嗯….
   

   View Slide

6. Vue3 正式版本發布還沒
   滿⼀年…
   Source From :
   https://www.hk01.com/%E7%86%B1%E7%88%86%E8%A9%B1%E9%A1%8C/292267/%E7%B6%93%E5%85%B8%E9%87%91%E5%8F%A5-%E4%BB%96%E5%8F%AA%E6%98%AF%E5%8
   0%8B%E5%AD%A9%E5%AD%90%E5%91%80-%E9%81%8E%E5%B9%B4%E7%84%A1%E9%99%90loop-%E5%8E%9F%E8%A3%9D%E5%8A%87%E5%A0%85%E6%90%9E%E7%AC%91
   

   View Slide

7. From https://www.jetbrains.com/lp/devecosystem-2020/java/
   

   View Slide

8. From
   https://juejin.cn/post/6962867528909799454
   

   View Slide

9. Vue 2.7
   From
   https://v3.vuejs.org/guide/introduction.html
   

   View Slide

10. From
    hNps://v3.vuejs.org/guide/introducOon.html
    

    View Slide

11. Q. What is Vue 3?
    A. Composition API
    and Other new features
    

    View Slide

12. @vue/composition-api
    From
    https://github.com/vuejs/composition-api
    

    View Slide

13. Hold on,
    Class Components Users
    

    View Slide

14. Ideal Path
    Vue 2.x
    Þ Vue 2.7 (with @vue/composition-api)
    Þ Vue 3.x
    

    View Slide

15. From
    https://www.yuque.com/vueconf/mkwv0c/xqyxix
    

    View Slide

16. ⼤綱
    Composition
    API
    Upgrade to
    Vue3
    Hooks in Vue
    

    View Slide

17. From
    https://www.yuque.com/vueconf/mkwv0c/sqffko
    

    View Slide

18. What need to solve
    Mixins
    Reuse logic
    between
    components. HOC
    

    View Slide

19. Solve a problem, but…
    - Namespace confliction
    - Unclear relationships
    - Extra component layers
    

    View Slide

20. Options API ComposiCon API
    From https://medium.com/nerd-for-tech/vue-composition-api-a-first-glance-b90bb259ab9a
    

    View Slide

21. From https://www.zweitag.de/blog/vue-composition-api-introduction/
    Options API Composition API
    

    View Slide

22. From
    https://www.yuque.com/vueconf/mkwv0c/sqffko
    

    View Slide

23. ⼤綱
    Composition
    API
    Upgrade to
    Vue3
    Hooks in
    Vue
    

    View Slide

24. Options API Composition API
    From
    hNps://codesandbox.io/s/composiOon-api-simple-demo-forked-q47x7?file=/src/MoneyCounterComposiOon.vue
    

    View Slide

25. From
    https://www.yuque.com/vueconf/mkwv0c/sqffko
    

    View Slide

26. From
    https://www.yuque.com/vueconf/mkwv0c/sqffko
    

    View Slide

27. From
    https://www.yuque.com/vueconf/mkwv0c/sqffko
    

    View Slide

28. Recommend starting your
    Vue hooks journey Today
    

    View Slide

29. LINE TECH FRESH
    https://engineering.linecorp.com/zh-hant/blog/tech-fresh-2020/ 29
    

    View Slide

30. TECH FRESH 履歷投遞 06/15 ~ 07/14
    

    View Slide