[筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 5

章節連結

前端框架御三家之一的 Vue,在 2020 年第四季迎來的第三代版本,代號為 One Piece。雖說已略為上手 2.0 版,決定藉由 HiSKIO 2020 Vue3 專業職人 的課程,來加速自己的熟悉程度。這篇會筆記下 Vue 3.0 的中關於 watch, lifecycle 和結合 Axios 的用法 ,以及自己開發上的一些補充。
vue.js logo vue


課程相關資訊

[連結]:https://hiskio.com/courses/286/lectures/20884

本篇範圍:Chapter 4 ( JavaScript ES6 ) ,一共有 12 篇

請注意:本系列文章為個人對應課程的消化吸收後,所整理出來的內容。換言之,並不一定會包含全部的課程內容,也有可能會添加其他資源來說明。


筆記

  • 1. Watch 的函式要傳入 (要被監控的值,function (新值, 原本的值){……}),後方的 callback function 也可以使用 =>
    2. 不過,若你要監控的值是 reactive 的,那你的監控值要是 () => data.<key> 的寫法,才能夠被修改
    3. reactive 可以深層監控,並回傳整個物件
    4. watch 的 deep 是可以進行深層監控的,但會每一個 key 都掃描,會很耗費資源
    5. watchEffect 可以在一開始就執行,且可以使用 ref / reactive 的資料。若沒有在 callback 的函式中執行的,那是沒有辦法監控的。另外, watchEffect 是可以被中斷的。
    6. LifeCycle Diagram:官方文件 Lifecycle Diagram
  • setup => 過往 Vue 2.X 的 created ()
  • onBeforeMount => DOM 渲染前執行
  • onMounted => DOM 渲染後執行
    onBeforeUpdate => 資料更新 DOM 前執行
    onUpdated => 資料更新 DOM 後執行
  • onBeforeUnmount => 組件銷毀前執行
  • onUnmounted => 組件銷毀後執行

7. 會建議在 onMounted() 階段才打 api ,畢竟此時才有實體的 DOM 元素可以存取


  • 程式碼範例

系列文章

  • [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 7
  • [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 6
  • [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 5
  • [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 4
  • [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 3
  • [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 2
  • [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 1
  • 按讚加入粉絲團

    延伸閱讀

    GA瀏覽人氣:9