setup是vue3新增的composition api，在之前vue2.x都是采用options api。setup的调用时机为在初始化属性之后，在beforeCreate之前。(在新的vue3中，废弃了beforeCreate和created这两个生命周期的钩子)。

参数

setup方法接收两个参数，分别为props属性和context上下文。

setup(props, context) {
    ...
    return {}
}

props

props为接收父组件传递的属性，注意点：不采用解构方式获取属性，不论是在setup函数里面还是在参数中解构，原因是这样的操作会丧失响应式的特点。错误示例如下：

setup({ xx }, context) {
    return {}
}

setup(props, context) {
    const { xxx } = props
    return {
        xxx
    }
}

context

context包括attrs属性，slot插槽，以及emit方法。与props不同的是，这些属性或方法是可以通过解构方法获取，不论是在参数里还是在函数体内。

setup(props, { attrs, solt, emit }) {
    return {}
}

setup(props, context) {
    const { attrs, solt, emit } = context
    return {}
}

emit方法可以往父组件派发一个事件处理方法,与之前vue2.x不同的是,vue3没有this这一概念，所以事件派发的方式是不一样的。

setup(props, { attrs, solt, emit }) {
    emit(事件, 参数1, 参数2, ...)
    return {}
}

返回值

在vue2.x中,template模板中的数据是和options api中的data方法返回值。template模板中绑定的方法在options api中的methods定义。而在在vue3中，template模板中的数据和方法通由setup方法返回return暴露出来。

With the template

<template>
  <div>{{ readersNumber }} {{ book.title }}</div>
</template>

<script>
  import { ref, reactive } from 'vue'
  export default {
    setup() {
      const readersNumber = ref(0)
      const book = reactive({ title: 'Vue 3 Guide' })
      
      return {
        readersNumber,
        book
      }
    }
  }
</script>

其实响应式是视场景情况而定的，当数据不发生变化，不一定需要用到ref和reactive这两个api。

With render function

视图的展示不一定得通过template模板，也可以通过setup方法配合composition api h()方法实现。

<script>
import { h, ref, reactive } from 'vue'
export default {
  setup() {
    const readersNumber = ref(0)
    const book = reactive({ title: 'Vue 3 Guide' })
    return () => h('div', [readersNumber.value, book.title])
  }
}
</script>

h方法接收3个参数（type, props ，children）并返回一个“虚拟节点”，通常缩写为VNode：一个普通对象，其中包含向 Vue 描述它应该在页面上呈现什么样的节点的信息，包括任何子节点的描述。