Vue3组合式API入门（一）

一、为了解决多业务线交叉、难以维护的复杂场景，Vue3认为以业务分割逻辑代码更合理。

例如：当前组件有一个显示某个用户的仓库列表的视图。此外，我们还希望有搜索和筛选功能。在Vue2.x中代码大致如下。

// src/components/UserRepositories.vue

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 () {
      // 使用 `this.user` 获取用户仓库
    }, // 1
    updateFilters () { ... }, // 3
  },
  mounted () {
    this.getUserRepositories() // 1
  }
}

如果不熟悉该段代码的人第一次阅读，需要不停在 data、methods、computed 以及各个生命周期中来回查找相关业务代码，如果业务更复杂，代码的碎片化会更严重，导致难以维护。

如果能够将同一个逻辑关注点相关代码收集在一起会更好。而这正是组合式 API 使我们能够做到的。

二、组合式API的基础用法

先来写一段简单的组合式API代码：

<script lang="ts">
import { defineComponent, ref, reactive, toRefs } from 'vue'

export default defineComponent({
    setup() {
        let name = ref('')
        let age = ref(0)
        let obj = reactive({
            name: name.value,
            age: age.value
        })

        return toRefs(obj)
    },
})
</script>

（1） setup

　　1.1 setup(props, context)

　　　　新的 setup 选项在组件创建之前执行，一旦 props 被解析，就将作为组合式 API 的入口。

　　　　在 setup 中你应该避免使用 this，因为它不会找到组件实例。

　　　　setup 的调用发生在 data property、computed property 或 methods 被解析之前，所以它们无法在 setup 中被获取。

　　1.2 参数介绍： 

　　　　第一个参数 props ：

　　　　　　setup 函数中的第一个参数是 props。props 是响应式的。但不可以解构，否则会失去响应性。

　　　　　　如果需要解构 props，建议使用 refs （后文介绍）

　　　　第二个参数 context ：

　　　　  const { attrs, slots, emit } = context // Attributes，插槽，触发事件

　　　　　　非响应式，可直接解构： setup(props, { attrs, slots, emit })

　　　　　　请注意，与 props 不同，attrs 和 slots 是非响应式的。如果你打算根据 attrs 或 slots 更改应用副作用，那么应该在 onUpdated 生命周期钩子中执行此操作。

　　　　

　　另外在 Vue3 中，beforeCreate 和 created 钩子函数将不再适用，其他钩子有略微改动，参考下图

    

（2） ref 、reactive 、torefs

　　2.1 ref

　　　　ref 接收参数并将其包裹在一个带有 value property 的对象中返回，然后可以使用该 property 访问或更改响应式变量的值

　　  let name = ref('')
　　  let age = ref(0)

　　  return {
     　　name,
　　  　　age
　　  }

　　2.2 reactive

　　　　如果将对象分配为 ref 值，则通过 reactive 方法使该对象具有高度的响应式。

　　  setup() {
          let name = ref('')
          let age = ref(0)
          let obj = reactive({
              name: name.value,
              age: age.value
          })
          return toRefs(obj)
      }

　　2.3 toRefs

　　　　将响应式对象转换为普通对象，其中结果对象的每个 property 都是指向原始对象相应 property 的 ref。

　  　const state = reactive({
      　　foo: 1,
      　　bar: 2
　  　})
　  　const stateAsRefs = toRefs(state)
　  　// ref 和原始 property 已经“链接”起来了
　  　state.foo++
　  　console.log(stateAsRefs.foo.value) // 2
　  　stateAsRefs.foo.value++
　  　console.log(state.foo) // 3

以上内容参考自 介绍 | Vue.js (vuejs.org)