vue3.0-composition.Api
阿新 • • 發佈：2021-06-27
setup
// component
export default {
setup(props, context){
// 該函式在元件屬性被賦值後立即執行，早於所有生命週期鉤子函式
// props 是一個物件，包含了所有的元件屬性值
// context 是一個物件，提供了元件所需的上下文資訊
}
}
context物件的成員
| 成員 | 型別 | 說明 |
|---|---|---|
| attrs | 物件 | 同vue2的this.$attrs |
| slots | 物件 | 同vue2的this.$slots |
| emit | 方法 | 同vue2的this.$emit |
生命週期函式
| vue2 option api | vue3 option api | vue 3 composition api |
|---|---|---|
| beforeCreate | beforeCreate | 不再需要，程式碼可直接置於setup中 |
| created | created | 不再需要，程式碼可直接置於setup中 |
| beforeMount | beforeMount | onBeforeMount |
| mounted | mounted | onMounted |
| beforeUpdate | beforeUpdate | onBeforeUpdate |
| updated | updated | onUpdated |
| beforeDestroy | 改 beforeUnmount | onBeforeUnmount |
| destroyed | 改unmounted | onUnmounted |
| errorCaptured | errorCaptured | onErrorCaptured |
| - | 新renderTracked | onRenderTracked |
| - | 新renderTriggered | onRenderTriggered |
新增鉤子函式說明：
| 鉤子函式 | 引數 | 執行時機 |
|---|---|---|
| renderTracked | DebuggerEvent | 渲染vdom收集到的每一次依賴時 |
| renderTriggered | DebuggerEvent | 某個依賴變化導致元件重新渲染時 |
DebuggerEvent:
- target: 跟蹤或觸發渲染的物件
- key: 跟蹤或觸發渲染的屬性
- type: 跟蹤或觸發渲染的方式
composition api相比於option api有哪些優勢？
從兩個方面回答：
- 為了更好的邏輯複用和程式碼組織
- 更好的型別推導
有了composition api，配合reactivity api，可以在元件內部進行更加細粒度的控制，使得元件中不同的功能高度聚合，提升了程式碼的可維護性。對於不同元件的相同功能，也能夠更好的複用。
相比於option api，composition api中沒有了指向奇怪的this，所有的api變得更加函式式，這有利於和型別推斷系統比如TS深度配合。