Vue3一次就上手

Transcript

1. Vue3 ㇐次就上手 milkmidi 2020-11-05
2. milkmidi (奶綠茶) Positive Grid 資深前端工程師 (強力徵前端工程師中，快來當我的同事) milkmidi@gmail.com https://www.facebook.com/milkmidifans
3. 問：如何 Vue3 ㇐次就上手 答：只要把 2 改成 3，就好了
4. 程式進入點
5. v-model component props 更名 vue2 v-model props : ['value'] v-model 更新是 $emit('input') vue3 v-model props : ['modelValue'] v-model 更新是 $emit('update:modelValue')
6. 更新用 更新用 同 vue3 移除 .sync, 統㇐使用 v-model:[name]
7. lifecycle 更名
8. 不會觸發更新 可以直接寫 Reactivity in depth
9. 無 Teleport
10. 無 Fragments
11. Vue3 composition-api 超香
12. composition - reactive
13. 適合用到 這樣寫就有點麻煩 composition - ref 適合用到 也不錯寫喔 Kuro 大說：使用 ref, template 裡都不需要寫 value
14. composition - ScriptSetup 二種寫法，大大滿足
15. composition - ScriptSetup setup props, import component
16. 新的 不需要像 加 會自動判斷，讚 這裡只 所以 更新時並不會發生 略 watch and watchEffect
17. composition - livecycle
18. composition custom hooks
19. 不能這樣寫 composition custom hooks
20. composition custom hooks
21. css variables
22. Vue3 有二個功能目前做不到
23. IE 不能動
24. Vue3 Render 只能在指定的 DOM 裡 Vue2 可以直接取代指定的 DOM https://www.gogoro.com/tw/
25. 當然也是可以把 Vue3 寫爛掉
26. 這裡叫不到 裡的 這裡可以呼叫 裡的 看呀，這裡也不用加 data + setup 混搭
27. 學習不需要為公司、⾧官或同事， 不需要為別人，只為你自己。 五倍紅寶石 高見龍
28. 奶綠茶的粉絲團 https://www.facebook.com/milkmidifans