$30 off During Our Annual Pro Sale. View Details »

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

前端大 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

line_developers_tw2

June 24, 2021
Tweet

More Decks by line_developers_tw2

Other Decks in Technology

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