Composion API

原因

• 處理大型應用時，解決代碼的共享和重用問題
• 讓代碼變得更緊湊，能夠將同一個邏輯關注點相關代碼收集在一起

compositon-api 相關函數和屬性

• setup
• ref和reactive
• watch和watchEffect
• computed
• 生命週期鉤子
  
  

setup

setup 接收兩個參數，一個是prop, 另一個是context。
用法：

export default {
  props: {
    title: String
  },
  setup(props) {
    console.log(props.title) //這裏的props是響應式的
  }
}

這裏的props是響應式的，但是不能直接使用ES6解構，比如 const {title} = props ，這樣會消除prop的響應性。需要藉助 toRefs來實現，如 const {title} = toRefs(props)，如果是可選屬性，只能使用const title = toRef(props,'title')。toRefs和toRef需要使用前要先引入。

context

// MyBook.vue

export default {
  setup(props, context) {
    // Attribute (非響應式對象)
    console.log(context.attrs)

    // 插槽 (非響應式對象)
    console.log(context.slots)

    // 觸發事件 (方法)
    console.log(context.emit)
  }
}

context是非響應性的，可以放心使用ES6變量解析。

在 setup 中你應該避免使用 this，因爲它不會找到組件實例。setup 的調用發生在 data property、computed property 或 methods 被解析之前，所以它們無法在 setup 中被獲取。

//To be continue

參考：
Vue3官方文檔 - 組合式 API 介紹

原文地址： https://hi.cellmean.com/p/519bb02905c5

本文在 CC BY-NC-SA 4.0 許可 下發布

• 署名 - 您可以複製、發行、展覽、表演、放映、廣播或通過信息網絡傳播本作品，但必須 署名作者 並添加鏈接到 原文地址。
• 非商業性使用 — 您不得將本作品用於商業目的。
• 相同方式共享 — 如果您再混合、轉換或者基於本作品進行創作，您必須基於與原先許可協議相同的許可協議 分發您貢獻的作品。