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

章節連結

課程相關資訊
筆記
系列文章

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

本篇範圍：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 元素可以存取

程式碼範例

const { ref, reactive, watch } = Vue;
const App = {
  setup() {
    const data = ref({ user: {} });
    watch(
      data,
        (newVal) => {
           console.log(newVal);
         },
      { deep: true }
    );

     setTimeout(() => {
        data.value.user["name"] = "mike";
     }, 1000);

     return {};
   },
};