章節連結
前端框架御三家之一的 Vue,在 2020 年第四季迎來的第三代版本,代號為 One Piece。雖說已略為上手 2.0 版,決定藉由 HiSKIO 2020 Vue3 專業職人 的課程,來加速自己的熟悉程度。這篇會簡單介紹 Composition API,並試著整合外掛套件 Swiper.js。
課程相關資訊
[連結]:https://hiskio.com/courses/286/lectures/20884
本篇範圍:Chapter 1 ( 課前試撥集 ) ,一共有 12 篇
請注意:本系列文章為個人對應課程的消化吸收後,所整理出來的內容。換言之,並不一定會包含全部的課程內容,也有可能會添加其他資源來說明。
內容
1. 掛載點改為 Vue.createApp(App).mount(“#app”) 的寫法
2. 運用 composition API 和 { ref } 的語法,並回傳值到模板上
3. 底層改用 Proxy ,和原先的 Object.defineProperty 不同。不過 Proxy 目前無 Polyfill 可支援,若有 IE11 相關的需求,那就無法使用 Vue 3
4. ref 語法內,會有 value: “something” 來儲存值
5. composition API,可單純將 vue 模板綁定的值回傳即可,也不需要寫 this 了。感覺上,會越發像原生的 JavaScript
整合其他套件需注意事項
以 Swiper 輪播套件為例子,詳請可閱讀這篇:[指南] Vue 整合最新版本的 Swiper 輪播套件