Vue3组合式API之Setup

组合式API诞生背景

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

Setup

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

import{ defineComponent}from'vue'exportdefaultdefineComponent({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'exportdefaultdefineComponent({
  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'exportdefaultdefineComponent({.........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中还可以定义侦听器、计算属性，可以把单个功能分割出来制成组合函数等等，更多详细用法还请看官方文档Vue3组合式api