vue3中的setup是什么

vue3相比于vue2的特点就是多了组合式api，而代码上最直观的体现就是多了一个setup函数。
它是vue3的一个新的配置项。组件中的数据，方法等，都写在了setup函数中。
模板中使用的方法，数据，都要通过setup去return出去才可以使用
setup函数中使用数据不需要this了，这是写习惯vue2的人经常会遇到的问题。

  1.   export default{
  2.     setup(){
  3.       let num2 = 0
  4.       let changeHandle = ()=>{
  5.         cosnole.log(111)
  6.       }
  7.       return {num2,changeHandle}
  8.     }
  9.   }

vue3的ref函数详解

vue3 提供了ref方法，通过ref方法返回的数据，在vue3中是响应式的数据，它是一个对象，我们称之为引用对象。
在vue3的模板中，可以直接使用引用对象的值。但是在vue3的函数中如果想要读写引用对象，都要取它的value值。

  1. <template>
  2.     <div>我的年龄：{{age}}</div>
  3.     <div @click="add"> 增加年龄</div>
  4. </template>
  6. <script>
  7. import {ref} from 'vue'
  8. export default {
  9.     setup () {
  10.         let age = ref(18)
  11.         let add = ()=>{
  12.             age.value ++
  13.         }
  14.         return {age,add}
  15.     }
  16. }
  17. </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>