Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Vue.js Taiwan 007 webinar by LINE TODAY UIT - Yu-Hsin Chen


June 24, 2021

More Decks by line_developers_tw2

Other Decks in Technology


  1. 前端⼤ hook 時代, 從 Mixins 到 Composition API LINE TODAY

    UIT Yu-Hsin Chen 2020.06.24
  2. Composition API Upgrade to Vue3 Hooks in Vue ⼤綱

  3. 內容 ⼤綱 Upgrade to Vue3 Composition API Upgrade to Vue3

    Hooks in Vue
  4. Q. Vue3 能⽤到正式產 品了嗎? A. 能,⼀定能!

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

  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

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

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

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

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

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

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

  13. Hold on, Class Components Users

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  28. Recommend starting your Vue hooks journey Today

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

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