vue3中的setup是什么
vue3相比于vue2的特点就是多了组合式api，而代码上最直观的体现就是多了一个setup函数。 它是vue3的一个新的配置项。组件中的数据，方法等，都写在了setup函数中。 模板中使用的方法，数据，都要通过setup去return出去才可以使用 setup函数中使用数据不需要this了，这是写习惯vue2的人经常会遇到的问题。
export default{
setup(){
let num2 = 0
let changeHandle = ()=>{
cosnole.log(111)
}
return {num2,changeHandle}
}
}
vue3的ref函数详解
vue3 提供了ref方法，通过ref方法返回的数据，在vue3中是响应式的数据，它是一个对象，我们称之为引用对象。 在vue3的模板中，可以直接使用引用对象的值。但是在vue3的函数中如果想要读写引用对象，都要取它的value值。
<template>
<div>我的年龄：{{age}}</div>
<div @click="add"> 增加年龄</div>
</template>
<script>
import {ref} from 'vue'
export default {
setup () {
let age = ref(18)
let add = ()=>{
age.value ++
}
return {age,add}
}
}
</script>
vue3中的reactive函数介绍
reactive用来定义对象类型的响应式数据。基本类型的数据，我们习惯用ref定义响应式，对象类型的，我们用reactive定义。 reactive对象处理的响应式，是深层的，不管对象嵌套多少层，都会变成响应式的。 reactive也可以处理数组，并且可以通过修改数组下标的方式去修改数据（vue2不支持的） 我们通常可以把所有的数据放到data里，通过reactive变成响应式的，方便修改。
<template>
<div>我的年龄：{{data.age}}</div>
<div v-for="(item,index) in data.cando" :key="index">{{item}}</div>
<div @click="add"> 增加年龄</div>
</template>
<script>
import {reactive, ref} from 'vue'
export default {
setup () {
let data = reactive({
name:'zhangsan',
age:18,
cando:['吃饭','睡觉','打豆豆'],
})
let add = ()=>{
data.age ++
data.cando[0] = '学习'
}
return {data,add}
}
}
</script>
