Vue3组合式API之Setup

组合式API诞生背景

使用过vue2.x开发过项目的人应该都清楚了其弊端，当一个组件功能较多的时候尤为明显。2.x版本的vue对于刚接触这个框架的人十分友好，简明的结构和易懂的使用方法很快就能上手。但是问题来了，当一个组件功能很多，每个功能的数据、方法以及生命钩子函数等等堆在了一起，当我们想去看某个功能的逻辑过程时，是极其繁琐的，你需要不断地上下查找编辑器的有关代码。

Setup

为了解决上面那个弊端，vue3提出了组合式api，简单地说就是把一个功能逻辑涉及到的数据、方法、生命周期、侦听器等等都收集在一起，使功能一目了然，易于维护。而实现组合的区域就被定在了setup()中，setup函数运行时机在beforeCreate生命周期钩子函数之前，我们可以进行验证：

import { defineComponent } from 'vue'
export default defineComponent({
  created () {
    console.log('created')
  },
  beforeCreate() {
    console.log('beforeCreate')
  },
  setup () {
    console.log('setup')
    return {}
  }
})

结果：

基于此又可以推断在setup中是无法获取data、methods、conputed中的数据的，这也失去了使用this的意义，并且官方文档中强调在 setup() 内部，this 不是该活跃实例的引用，因为 setup() 是在解析其它组件选项之前被调用的，所以 setup() 内部的 this 的行为与其它选项中的 this 完全不同。

setup接受两个参数props和context

props是父组件传过来的数据，context则是该组件的三个属性构成的对象
下面在setup中获取props对象中的数据
子组件

<template>
  <h1>{{ name + age }}</h1>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  props: {
    name: {
      type: String,
      default: ''
    },
    age: {
      type: Number,
      default: 0
    }
  },
  setup (props) {
    console.log(props.name)
    console.log(props.age)
    console.log(props)
    return {
      name: props.name,
      age: props.age
    }
  }
})

父组件

<template>
  <HelloWorld name="Lucky" :age="18"/>
</template>

直观的可以看到setup可以访问props对象的数据并且渲染至模板中

setup 函数中的 props 是响应式的，当父组件传入的 prop 时，子组件也会更新，但是很多时候我们都习惯es6的代码简化写法，比如说把props进行结构，如下

  setup ({ name, age }) {
    return {
      name: name,
      age: age
    }
  }

注意：以上写法可以访问到props的值，但是会失去响应性，之后父组件传过来的值如果发生改变的话子组件将不发生改变，这里不能使用 ES6 解构，它会消除 prop 的响应性

如果需要解构 prop，可以在 setup 函数中使用 toRefs 函数来完成此操作，如下

import { defineComponent, Refs } from 'vue'
export default defineComponent({
	...
	...
	...
  setup (props) {
  const { name, age } = toRefs(props)
    return {
      name: name,
      age: age
    }
  }
})

这样数据就保持了响应性

context是该组件的三个属性构成的对象，这三个属性分别为Attribute属性名attrs，插槽slots和触发事件emit

  setup (props, context) {
    console.log(context.attrs)
    console.log(context.slots)
    console.log(context.emit)
    return {}
  }

context 是一个普通的 JavaScript 对象，不是响应式的，在setup中可以对 context 使用 ES6 解构，如下

  setup (props, { attrs, slots, emit }) {
    console.log(attrs)
    console.log(slots)
    console.log(emit)
    return {}
  }

在setup中可以使用生命周期钩子函数，但是写法上和组件的有所区别，如下

选项式 API	Hook inside setup
beforeCreate	Not needed*（无需定义）
created	Not needed*（无需定义）
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeUnmount	onBeforeUnmount
unmounted	onUnmounted
errorCaptured	onErrorCaptured
renderTracked	onRenderTracked
renderTriggered	onRenderTriggered
activated	onActivated
deactivated	onDeactivated

在组合式api中还可以定义侦听器、计算属性，可以把单个功能分割出来制成组合函数等等，更多详细用法还请看官方文档Vue3组合式api