setup()函数
setup() 钩子是在组件中使用组合式 API 的入口，通常只在以下情况下使用：
- 需要在非单文件组件中使用组合式 API 时。
- 需要在基于选项式 API 的组件中集成基于组合式 API 的代码时。
其他情况下，都应优先使用 <script setup> 语法。
基本使用
我们可以使用响应式 API 来声明响应式的状态，在 setup() 函数中返回的对象会暴露给模板和组件实例。其它的选项也可以通过组件实例来获取 setup() 暴露的属性
<script> import { ref } from 'vue' export default { setup() { const count = ref(0) // 返回值会暴露给模板和其他的选项式 API 钩子 return { count } }, mounted() { console.log(this.count) // 0 } } </script> <template> <button @click="count++">{{ count }}</button> </template>
请注意在模板中访问从 setup 返回的 ref 时，它会自动浅层解包，因此你无须再在模板中为它写 .value。当通过 this 访问时也会同样如此解包。
setup() 自身并不含对组件实例的访问权，即在 setup() 中访问 this 会是 undefined。你可以在选项式 API 中访问组合式 API 暴露的值，但反过来则不行。
18_composition/03_composition_setup_base.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>组合式API</title> </head> <body> <div id="app"> {{ count }} <button @click="add">加1</button> </div> </body> <script src="../lib/vue.global.js"></script> <script> const { ref, onMounted } = Vue Vue.createApp({ setup () { const count = ref(0) const add = () => { count.value += 1 } onMounted(() => { console.log(1111) }) return { count, add } }, data () { return { count: 10 } }, methods: { add () { this.count += 10 } }, mounted () { console.log('2222') } }).mount('#app') </script> </html>
生命周期先执行 组合式API 后执行选项式API，其余以组合式API为优先
