前言

為了解決 Vue.js 2x 元件之間無法重複使用邏輯和程式碼，而出現了 Composition API。
composition API 將跨元件共用的屬性包起來，需要使用的元件再引入。

以前不好嗎?

邏輯會散落在各處，例如: props computed data methods。

ex:

export default {
  components: { RepositoriesFilters, RepositoriesSortBy, RepositoriesList },
  props: {
    user: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      repositories: [], // 1
      filters: { ... }, // 3
      searchQuery: '' // 2
    }
  },
  computed: {
    filteredRepositories () { ... }, // 3
    repositoriesMatchingSearchQuery () { ... }, // 2
  },
  watch: {
    user: 'getUserRepositories' // 1
  },
  methods: {
    getUserRepositories () {
      // using `this.user` to fetch user repositories
    }, // 1
    updateFilters () { ... }, // 3
  },
  mounted () {
    this.getUserRepositories() // 1
  }
}

圖摘自Getting Started with Vue 3: Composition API

為了要查看一個功能而要一直上下滑動，變得難維護。

在這樣的情況下，可以使用 Composition API 將同一功能的程式碼寫在同一個區塊中。

setup 啟動元件

可接收 props 和 context ，要記得要把狀態和事件透過 return 回傳出去。

ex:

import { fetchUserRepositories } from '@/api/repositories'

// inside our component
setup (props) {
  let repositories = []
  const getUserRepositories = async () => {
    repositories = await fetchUserRepositories(props.user)
  }

  return {
    repositories,
    getUserRepositories // functions returned behave the same as methods
  }
}

• props 是響應式的，傳入新 prop，會被更新
• context 提供 attrs、slots、emit 三種屬性

ex:

export default {
  setup(props, context) {
    // Attributes (Non-reactive object, equivalent to $attrs)
    console.log(context.attrs)

    // Slots (Non-reactive object, equivalent to $slots)
    console.log(context.slots)

    // Emit events (Function, equivalent to $emit)
    console.log(context.emit)

    // Expose public properties (Function)
    console.log(context.expose)
  }
}

當 setup 執行完畢，元件實體還沒被建立，能取得的屬性如下:

• props
• attrs
• slots
• emit

也就是說，無法取得以下屬性

• data
• computed
• methods
• refs

ref

在 Vue 3.0 可以利用 ref() 讓變數回傳一個響應式的物件
ex:

import { ref } from 'vue'

const counter = ref(0)

傳入的值會成為這個物件的 value 屬性
ex:

import { ref } from 'vue'

const counter = ref(0)

console.log(counter) // { value: 0 }
console.log(counter.value) // 0

counter.value++
console.log(counter.value) // 1

未完待續

每日一句:
死線爆炸