iT邦幫忙

2021 iThome 鐵人賽

DAY 28
0
Modern Web

別再說我不會框架,網頁 Vue 起來!系列 第 28

擁抱組合疊疊樂 Composition API [序]

前言

為了解決 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
  }
}

compare

圖摘自Getting Started with Vue 3: Composition API

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

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


setup 啟動元件

可接收 propscontext ,要記得要把狀態和事件透過 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

未完待續

每日一句:
死線爆炸 /images/emoticon/emoticon02.gif


上一篇
路由把關者- Navigation Guards
下一篇
擁抱組合疊疊樂 Composition API [續]
系列文
別再說我不會框架,網頁 Vue 起來!30

1 則留言

0
juck30808
iT邦新手 3 級 ‧ 2021-10-14 12:11:09

恭喜即將邁入完賽~/images/emoticon/emoticon08.gif

我要留言

立即登入留言