vue3中的setup到底是什么？
组合式api几乎都要写在setup里，学习vue3的第一步就是学习setup，如果开始的时候没有拿下setup，后面会越学越乱。
一.setup概述
setup是vue3中一个新的配置项，组件中所用到的数据、方法、计算属性，均配置在setup中。
在Vue 2中，我们通常使用 data 和 methods 来定义组件的数据和方法。
<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这些配置项是同级的，所以，我们应该这样把它加进去：
<script lang="ts">
export default{
name:"cat",
// 数据
data(){
return{
name:"清清ww",
age:"3"
}
},
// 方法
methods:{
changeName(){
this.name = "大头"
},
changeAge(){
this.age = "4"
}
},
// setup
setup(){
}
}
</script>那么它有什么用呢？
data、methods是vue2中选项式Api的写法，既然有的新的组合式Api，新的配置项setup，那之前的数据和方法就不应该放在旧的配置项中了，它们应该被写入新的配置项setup中，像这样;
<script lang="ts">
import { ref } from "vue"
export default{
name:"cat",
// setup
setup(){
// 数据
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中定义的响应式数据和函数。
<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.安装插件
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>本文结束~
原文地址：https://blog.csdn.net/m0_59873661/article/details/143512380
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！