在之前的vue学习过程中，主要是通过定义vue组件的各种field，例如data function，computed object， methods object等来组织vue组件的逻辑。但是当逻辑越来越复杂的时候，这种组织vue组件的方式就不太可行。

setup component option是一个在vue组件被创建之前就被执行的函数，因此在setup option内部是没有this的，该函数内部职能访问props，该组件的方法、计算属性、state等都不可以访问。

那么setup函数就相当于替代了生命周期函数中的created和beforeCreate这两个周期函数。

在setup内部需要定义数据，并返回一个对象，对象包括在vue组件的template中需要用到的数据的集合。

响应式数据

const+ref

const数据的定义就相当于原来组件的data field，但是由于setup内部就是普通的JavaScript语句，不会实现reactive response，因此需要用到ref，常见的定义形式为const newHeroRef = ref("");。

在使用ref包裹的const时，需要时调用newHeroRef.value获取引用本身，否则newHeroRef只是一个对象。

什么时候使用ref？当我们需要在setup中时刻监听某一个数据的时候。

const+ref的替换就是const state = reactive({})，对象内部就是响应式数据。这么做的好处在于更新数据时只需要state.data更新，并且从setup function返回的时候只需要返回state全体对象。

什么时候使用reactive？当我们需要在setup中时刻监听某一批数据的时候。

const数据同样可以用来定义computed field。具体定义方式为const heroCount = computed({ get: () => {return dcHeros.value.length;}, });，传入对象，对象内部有getter和setter（自定义）。

function的定义就相当于原来组件的methods field中除了生命周期函数的部分。同样需要在setup return语句中返回该函数。