>[success] # Setup -- 组合API 入口 1. `setup()`作为一个新的组件选项，是 `Composition API`（**组合API**）的入口，编写组件逻辑将在setup函数中完成 2. `setup`' 类似`data()`需要**返回一个对象** ，返回值被称作 **render context**,这个**对象将属性暴露在模板上**,即**对象中的属性或方法在模板中可以直接使用** * 返回对象中的方法会与`methods`中的方法合并成，组件对象的方法,如果有重名 `setup`优先 * 一般不要混合使用: `methods`中可以访问`setup`提供的属性和方法, 但在`setup`方法中不能访问`data`和`methods ` * `setup` 一般不能是一个`async`函数: 因为返回值不再是**return的对象**, 而是`promise`,唯一可以使用`async setup()`的情况是，该组件是[Suspense](https://cn.vuejs.org/guide/built-ins/suspense.html)组件的后裔 3. `setup` 函数有两个参数`props`和`context`，`setup(props, context) / setup(props, {attrs, slots, emit})` * `props`是setup函数的第一个形参，`setup `函数中的 `props `是响应式的，当传入新的 `prop `时，它将被更新。因此注意`props `是响应式的，**你不能使用 ES6 解构，因为它会消除 `prop `的响应性**,当然如果你非要解构他使用[toRefs()](https://cn.vuejs.org/api/reactivity-utilities.html#torefs)和[toRef()](https://cn.vuejs.org/api/reactivity-utilities.html#toref)这两个工具函数 ~~~ export default { props: { title: String // 和setup 下面的写法是等同的 }, setup(props) { console.log(props.title) // 和上面写法是等同的 } } ~~~ * `context`，我们也称之为是一个`SetupContext`，它里面包含四个属性`attrs`,`slots`,`emit`,`expose ` * `attrs`: **包含没有在props配置中声明的属性的对象, 相当于 this.$attrs** * `slots`: **父组件传递过来的插槽, 相当于 this.$slots** * `emit`: **用来分发自定义事件的函数, 相当于 this.$emit** * `expose ` ：**限制对子组件实例的访** ~~~ export default { setup(props, context) { // 透传 Attributes（非响应式的对象，等价于 $attrs） console.log(context.attrs) // 插槽（非响应式的对象，等价于 $slots） console.log(context.slots) // 触发事件（函数，等价于 $emit） console.log(context.emit) // 暴露公共属性（函数） console.log(context.expose) // 让组件实例处于 “关闭状态” // 即不向父组件暴露任何东西 expose() const publicCount = ref(0) const privateCount = ref(0) // 有选择地暴露局部状态 expose({ count: publicCount }) } } ~~~ >[danger] ##### 注意事项 1. `setup`不可以使用`this`，所以不可以通过`this `去调用一下选项中的值例如`data`,`computed`,`methods`,`refs`,仅能使用暴露出来的值如`props`,`attrs`,`slots`,`emit` 2. `props ` 是响应式的，你不能使用 ES6 解构，它会消除 prop 的响应性 3. 虽然`setup `返回值可以直接在`template `模板使用，**但值不具备响应式**，无论是`vue2.x` 或者 `vue3.x `想让数据具备响应式的前提都是需要去进行一个包裹，`setup`的返回值想具备响应式需要配合其他`api `包裹 >[danger] ##### 综合案例 1. 这个案例运行后的效果`name`属性和`print`方法都成功渲染在模板上，但`name`却不能根据**input输入响应式的改变，想让数据进行响应后续需要将数据变成响应api** ~~~ <template> <div> {{name}} <input v-model="name" /> </div> </template> <script> export default { name: 'test', setup(prop, ctx) { const name = 'z' return { name } }, } </script> ~~~ * 效果如图  >[danger] ##### 复杂案例 1. 为了让值可以变成响应式 包裹一层`ref`,将数据收集，[参考](https://sfc.vuejs.org/#eNqNVFFv0zAQ/ismQkonNYl4jboK/gPiZeEhNG6XKYkt2ymgKhJCvEyIFcEQSB2ISZvWl8JAaAKqqX+mSce/4OwkbVI6IC+27y7ffXf+zgPtDqVmP8aarbUEDmngCtx2IgRf64ZhIN9D6Y+L7OtxdrSfHo3TycvF9Nl8ekEZoRzNv0+yg9N0+DYdfcwmJ+mXD/OfB8gVgnEEh+zJGUKGUeJ1dv3AYzgyBPEI6hsh8XCw7WiRG2JHg1Swly5HK/5YsphfzhaH41/Td1efTrLhq+zscgUrv8EASRCUJEUqq5YLIltWpTo48g7zqYC9H1LCBCrj70pqXUZCpJtLEGmUTdKX4QPEcBclRWTuciL8SDk93HXjAIJyMpKZjXRotN6UUdLWIYAT4UhwuwxT5kpCiJWmpFg5FjFtbNWiScRFXvi25NO4tbVyMohnUTW85FIAKvBVDti2rGVXZIfE4wC3waZWranlpRuhS809TiJQjAJ3Cgd3tGUtjgYtkWdH2xWCctuyeLcjW7jHTcJ6FuxMFkfCD7GJeWg8YOQhxwyAHa3gpzAsMPYxM6AnHmaY/Q1zLfQPXAkLVSZQyvrFblK/5/dRJ3A5B1VCpwVcVl2YfkRjgey+G8QYYpSa78kDaPm2coJVrWBt3MR9QNgCn1UF4QERsslyKbULmdcVu9LrZo2pcbTRjr5iod8vGolDX8psR4+pB2j2hpBcXAqkCdpWA9xEkhQs8n+U1JRnWSjbf52+OE+HT7M353VJkgCbAenlcBVFVn0qwzU+lfYan+QCrhqTq9lhOoKH5zk8S+vDUbYfBqSRXwDabq8PhQRtbOgOlC5/MYXLeliY6qIrvIrhqbHI+5EOP8+np9n4OHs/W4y+wROZP2D/ms6S7f9MaD6fiHcIxd5qTJPfEX8J3g==) * 父 ~~~html <template> <!-- id 并没有在子组件props 中接受因此属于 attrs 属性 --> <children-todo v-model="name" id="todo"> <!-- 使用默认插槽 --> {{ name }} </children-todo> </template> <script> import childrenTodo from './components/children-todo.vue' import { ref } from 'vue' export default { name: 'App', components: { childrenTodo, }, setup() { const name = ref(1) return { name, } }, } </script> <style></style> ~~~ * 子 ~~~html <template> <div class="content"> <input :value="modelValue" @input="inputVal($event)" /> <slot></slot> </div> </template> <script> export default { props: ['modelValue'], emits: ['update:modelValue'], setup(props, { attrs, slots, emit }) { // 打印参数 console.log(props) console.log(attrs) console.log(slots) console.log(emit) // 返回事件 const inputVal = (event) => { emit('update:modelValue', event.target.value) } // 返回参数可以模板直接使用 return { inputVal, } }, } </script> <style scoped></style> ~~~ * 参数打印  >[info] ## 和渲染函数一起使用 ~~~ import { h, ref } from 'vue' export default { setup() { const count = ref(0) return () => h('div', count.value) } } ~~~ >[info] ## 官方位置 [组合式 API：setup()](https://cn.vuejs.org/api/composition-api-setup.html#usage-with-render-functions)