> 本篇讲解Vue3.x Vue Composition API 中 setup函数特性. `setup`函数是Vue Composition API的入口. 即Composition API 均需在setup中使用. # setup(props, context)组件选项 setup是新的组件选项,它是Composition API的入口. ## 调用时间 在创建组件实例时，在初始组件解析之后调用setup。在生命周期方面，它在`beforeCreate`钩子之前调用 ## 使用的模板 如果设置返回一个对象，对象上的属性将会合并到组件模板的呈现上下文中 ``` <template> <div>{{ count }} {{ object.foo }}</div> </template> <script> import { ref, reactive } from 'vue' export default { setup() { const count = ref(0) const object = reactive({ foo: 'bar' }) // expose to template return { count, object } } } </script> ``` ## 使用渲染函数 JXS setup也可以返回一个render函数，它可以直接利用在相同范围内声明的反应状态: ```javascript import { h, ref, reactive } from 'vue' export default { setup() { const count = ref(0) const object = reactive({ foo: 'bar' }) return () => h('div', [count.value, object.foo]) } } ``` ## Arguments 该函数接收到的第一个参数是props, 第二个参数为context 1. props: 组件声明props 2. context (Object) 1. attrs 2. emit 3. slots ### 1.props `props`对象是响应式的(`reactive`), 当传入的新的props对象时会对其进行更新,并且可以通过`watchEffect`或`watch`监听改变. `props`对象不支持解构,解构会导致失去响应性： ``` export default { props: { name: String }, setup({ name }) { watchEffect(() => { console.log(`name is: ` + name) // Will not be reactive! }) } } ``` 在开发过程中，`props`对象对于用户域代码是不可变的(如果用户代码试图修改它，它会发出警告)。 ### 2.context 第二个参数提供了一个上下文对象, 相当于vue2.x中this,但却仅包含attrs、slots、emit## 二级标题 ``` const MyComponent = { setup(props, context) { context.attrs context.slots context.emit } } ``` `attrs`和`slot`是内部组件实例上对应值的代理。这确保了即使在更新之后，它们也总是公开最新的值，这样我们就可以对它们进行重构，而不用担心访问陈旧的引用 > 注意: setup执行期间尚未创建组件实例,因此setup内`this=undefined`