vue3 學習筆記
一、選項式API 和 組合式API 區別
在一個 vue 檔案內，會有 data、methods、watch 等等用來定義屬性和方法，共同來處理頁面邏輯，這種方式稱為 Options API。
業務處理的比較分散，data 和 methods會包含很多屬性和方法，很難分清哪個屬性對應哪個方法。所以 vue3 新增 setup 寫組合式API。
組合式api 就是一個功能所定義的 api 會放在一起。
二、setup
setup 特性
1、 用來寫組合式 api，相當於取代了 beforeCreate ，會在 creted 之前執行。
2、setup 內部的屬性和方法，必須 return 暴露出來，將屬性掛載到例項上，否則沒有辦法使用。
3、setup 內部是不存在 this ，列印下 this 返回結果 是undefined 。
4、setup 內部資料不是響應式的。可以配合reactive、ref 實現響應式
5、setup不能呼叫生命週期相關函式，但生命週期函式可以呼叫setup內的函式
例如setup () { const color = inject('info') return { color, } }
使用 on開頭的生命週期函式來註冊鉤子函式，只能在 setup 期間同步使用，因為它們依賴全域性內部狀態來定位當前元件例項，不在當前元件下呼叫函式時會丟擲錯誤。
import { onMounted } from "vue";export default{ setup(){ const a = 0 return{ a }, onMounted(()=>{ console.log("執行"); }) }}setup 與鉤子函式並列時，setup 不能呼叫生命週期相關函式，但生命週期可以呼叫 setup 相關的屬性和方法。this.$options.setup() 返回物件包含了 setup 內的所有屬性和方法。
<template> <button @click="log">點我</button></template><script>export default{ setup(){ const a = 0 return{ a } }, methods:{ log(){ console.log( this.$options.setup() );//返回一個物件 } }}</script>setup 引數
props 表示父元件給子元件傳值，props 是響應式的，當傳入新的 props 時，自動更新props: { msg: String, ans: String, }, setup(props,context){ console.log(props)} }
因為 props 是響應式的，不能使用 ES6 解構，會消除prop的響應特性，此時需要借用 toRefs 解構import { toRefs } from "vue"; const { msg，ans } = toRefs(props)
context 上下文環境，其中包含了 屬性、插槽、自定義事件三部分setup(props,context){ const { attrs,slots,emit } = context // attrs 獲取元件傳遞過來的屬性值， // slots 元件內的插槽 // emit 自定義事件 子元件}
attrs 是一個非響應式物件，經常用來傳遞樣式屬性。
slots 是一個 proxy 物件，其中 slots.default() 獲取到的是一個數組，陣列長度由元件的插槽決定，陣列內是插槽內容。
setup 內不存在this, emit 用來替換之前 this.$emit，用於子傳父時，自定義事件觸發。