拥抱组合叠叠乐 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
  }
}

图摘自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

未完待续

每日一句:
死线爆炸