setup
- Vue3.0新增的配置项，值为一个函数
- setup是所有Composition API的
- 组件中所用到的：数据，方法等等，均需要配置在setup函数中
- setup函数的两种返回值：
- 若返回是一个对象，对象中的属性，方法，在模板中军可以直接使用
- 若返回一个渲染函数，则可以自定义渲染内容
- setup的两个注意点：
- setup的执行时机：在beforeCreate之前执行一次，this是undefined
- setup的参数：
- props：值为对象，包含外部传递过来，且组件内部申明接收了的属性
- context：上下文对象
- attrs：值为对象，包含组件外部传递过来，但是没有在props中配置中申明的属性，相当于this.$attrs
- slots：收到的插槽的内容，相当于this.$slots
- emit：分发自定义时间的函数，闲的刚玉this.$emit。（值得注意的是，Vue3中使用emit，需要使用emits去接收父组件传过来的数据，和props差不多）
PS：
- 尽量不要与Vue2的配置项混用：
- Vue2配置项(data,methods,computed...)中可以访问到setup中的属性，方法。
- 但在setup中不能访问到Vue2中的配置
- 如果有重名，setup优先
- setup函数不能是一个async函数，因为返回值不在是一个return的对象，而是promise，模板看不到return对象中的属性
<template>
<h1>{{name}}</h1>
<button @click="sayHi"></button>
</template>
<script>
exprot default {
name: 'App',
setup(props,context) {
const name = "景天" // 不是响应式的数据
function sayHi() {
console.log(`Hi,我是${name}`)
}
// 返回值是一个对象
return {
name,
sayHi
}
// 返回值是一个渲染函数
return () => h('h1','这是渲染函数渲染的内容')
}
}
</script>
