组合式api几乎都要写在setup里，学习vue3的第一步就是学习setup，如果开始的时候没有拿下setup，后面会越学越乱。
一.setup概述
setup是vue3中一个新的配置项，组件中所用到的数据、方法、计算属性，均配置在setup中。
在Vue 2中，我们通常使用 data 和 methods 来定义组件的数据和方法。
javascript"><template><div class="container"><p>我的名字：{{ name }}</p><p>我的年龄：{{ age }}</p><button @click="changeName">更改名字</button><button @click="changeAge">更改年龄</button></div>
</template><script lang="ts">export default{name:"cat",data(){return{name:"清清ww",age:"3"}},methods:{changeName(){this.name = "大头"},changeAge(){this.age = "4"}}}
</script>而在Vue 3中，这些内容都应该被写入 setup 函数中。既然setup是一个新的配置项，那它应该是和data、methods这些配置项是同级的，所以，我们应该这样把它加进去：
javascript"><script lang="ts">export default{name:"cat",// 数据data(){return{name:"清清ww",age:"3"}},// 方法methods:{changeName(){this.name = "大头"},changeAge(){this.age = "4"}},// setupsetup(){}}
</script>那么它有什么用呢？
data、methods是vue2中选项式Api的写法，既然有的新的组合式Api，新的配置项setup，那之前的数据和方法就不应该放在旧的配置项中了，它们应该被写入新的配置项setup中，像这样;
javascript">
<script lang="ts">
import { ref } from "vue"export default{name:"cat",// setupsetup(){// 数据const name = ref("清清ww") // 保证数据是响应式的const age = ref("3")// 方法function changeName (){name.value = "大头"}function changeAge (){age.value = "4"}return { name , age ,changeName ,changeAge}}}
</script>注意setup函数在组件实例被创建之前调用，因此它不能访问this上下文。所有的响应式数据和函数都应该在setup函数内部定义。如果打印出this，会发现它是undefined。
二.setup返回值
setup 函数的返回值会暴露给模板和其他选项式API，如
computed、watch等。
在上面的例子中，如果不把 name , age ,changeName ,changeAge这些 return 出去的话，那么模板中是不能用的。
三.setup与optionsApi
问题1：data和methods可以同时存在吗？
可以。
问题2：data可以读取setup里的数据吗？
可以。因为setup的创建周期比data执行的早。
问题3：setup可以读取data里的数据吗？
不行。因为上文说了，setup中不能用this。
也就是说，如果不想完全迁移到Composition API，setup 函数可以与选项式API共存，但要注意它们之间的优先级和覆盖规则。简单来说，旧的可以访问新的，新的不能访问旧的。
四.setup语法糖
当setup中定义的变量或者方法过多的时候，你就会发现把他们一个一个的return出去是很麻烦的，因此，就有了setup语法糖。使用 <script setup> 标签，我们可以省略 setup 函数的调用，并且可以直接在模板中使用setup中定义的响应式数据和函数。
javascript"><script lang="ts">export default{name:"cat",}
</script><script lang="ts" setup>
import { ref } from "vue";// 数据const name = ref("清清ww") // 保证数据是响应式的const age = ref("3")// 方法function changeName (){name.value = "大头"}function changeAge (){age.value = "4"}
</script>问题1：这两个script标签可以写在一起吗？
不行。一个是专门配置组合式Api的，一个是专门配置组件名字的。
问题2：可是两个看着太难受了，如果非要写在一起呢？
那就借助插件.
1.安装插件
javascript">npm i vite-plugin-vue-setup-extend -D2.在vite.config.js中引入
import VueSetupExtend from 'vite-plugin-vue-setup-extend'3.在vite.config.js中调用
plugins: [vue(),VueSetupExtend()
]然后就可以在script标签中加上name属性;
<script lang="ts" setup name="cat">
import { ref } from "vue";// 数据const name = ref("清清ww") // 保证数据是响应式的const age = ref("3")// 方法function changeName (){name.value = "大头"}function changeAge (){age.value = "4"}
</script>本文结束~
