可以确定的是是兼容版本的也就是说我们再日常工作中可以在Vue3中使用的相关语法但是当你真正开始使用Vue3写项目时你会发现他比方便的多
生命周期对比3.0生命周期
|2.0周期名称|3.0周期名称|说明||beforeCreate|setup|组件创建之前||created|setup|组件创建完成||beforeMount|onBeforeMount|组件挂载之前||mounted|onMounted|组件挂载完成||beforeUpdate|onBeforeUpdate|数据更新，虚拟DOM打补丁之前||updated|onUpdated|数据更新，虚拟DOM渲染完成||beforeDestroy|onBeforeUnmount|组件销毁之前||destroyed|onUnmounted|组件销毁后|Vue3的一大特性函数----setup
1、
beforeCreate：表示组件刚刚被创建出来，组件的data和methods还没有初始化好setupCreated：表示组件刚刚被创建出来，并且组件的data和methods已经初始化好
2、setup函数是CompositionAPI（组合API）的入口
3、在setup函数中定义的变量和方法最后都是需要return出去的不然无法再模板中使用
二、setup函数的注意点：1、由于在执行setup函数的时候，还没有执行Created生命周期方法，所以在setup函数中，无法使用data和methods的变量和方法
2、由于我们不能在setup函数中使用data和methods，所以Vue为了避免我们错误的使用，直接将setup函数中的this修改成了undefined
3、setup函数只能是同步的不能是异步的
用法1:结合ref使用
templatedivid="app"{{name}}p{{age}}/pbutton@click="plusOne()"+/button/div/templatescriptimport{ref}from'vue'exportdefault{name:'app',data(){return{name:'北京'}},setup(){//名字constname=ref('小李')//年纪constage=ref(18)//方法functionplusOne(){++//想改变值或获取值必须.value}//必须返回模板中才能使用return{name,age,plusOne}}}/script用法2：代码分割
OptionsAPI和CompositionAPI
OptionsAPI约定：
我们需要在props里面设置接收参数在setup中没有this
我们需要在data里面设置变量
我们需要在computed里面设置计算属性
我们需要在watch里面设置监听属性
我们需要在methods里面设置事件方法
你会发现OptionsAPi都约定了我们该在哪个位置做什么事，这反倒在一定程度上也强制我们进行了代码分割。现在用CompositionAPI，不再这么约定了，于是乎，代码组织非常灵活，我们的控制代码写在setup里面即可。
setup函数提供了两个参数props和context,重要的是在setup函数里没有了this,在中，访问他们变成以下形式：=》
我们没有了this上下文，没有了OptionsAPI的强制代码分离。CompositionAPI给了我们更加广阔的天地，那么我们更加需要慎重自约起来。
对于复杂的逻辑代码，我们要更加重视起CompositionAPI的初心，不要吝啬使用CompositionAPI来分离代码，用来切割成各种模块导出。
我们期望是这样的：
importuseAfrom'./a'importuseBfrom'./b'importuseCfrom'./c'exportdefault{setup(props){let{a,methodsA}=useA()let{b,methodsB}=useA()let{c,methodsC}=useC()return{a,methodsA,b,methodsB,c,methodsC}}}3：data()变为setUp()1、生命周期的函数只能写在setUp中
2、provide/inject只能写在setUp
就算setup内容代码量越来越大，但是始终围绕着大而不乱，代码结构清晰的路子前进。
总结：首先，在中，生命周期是从vue中导出的，我们需要用到哪些，就导出哪些。
vue提供这么多的生命周期，有几个是我们常用的？在大多数的组件中，我们用不到生命周期。即便是页面级别的应用，可能用到最多的是onMounted即可。
当然，那些绑定时间的操作会用到解绑，因此会用到onUnmounted。其它的生命周期，正常情况下是基本用不到的。
所以，通过引入使用的这种设定，可以减少我们的最终编译的项目的体积。而且，这样的引入使用，更加的逻辑清晰。
其次，除setup之外，其他的生命周期函数，都是在setup里面直接书写函数即可。
ref函数ref是一个函数，它接受一个参数，返回的就是一个神奇的响应式对象。我们初始化的这个0作为参数包裹到这个对象中去，在未来可以检测到改变并作出对应的相应。
templateh1{{count}}/h1h1{{double}}/h1button@click="increase"+1/button/templatescriptlang="ts"import{computed,ref,reactive,toRefs}from'vue'interfaceDataProps{count:numberdouble:numberincrease:()=void}exportdefault{name:'App',setup(){constdata:DataProps=reactive({count:0,increase:()={++},double:computed(()=*2)})constrefData=toRefs(data)return{refData}}}/scriptreactive函数reactive函数import{ref,computed,reactive,toRefs}from'vue'interfaceDataProps{count:number;double:number;increase:()=void;}setup(){constdata:DataProps=reactive({count:0,increase:()={++},double:computed(()=*2)})constrefData=toRefs(data)return{refData}}侦测变化-watch函数watch文档templateh1{{count}}/h1h1{{double}}/h1button@click="increase"+1/buttonbutton@click="updateGreeting"updateGreeting/button/templatescriptlang="ts"import{computed,ref,reactive,toRefs,watch}from'vue'interfaceDataProps{count:numberdouble:numberincrease:()=void}exportdefault{name:'app',setup(){constdata:DataProps=reactive({count:0,increase:()={++},double:computed(()=*2)})constgreetings=ref('')constupdateGreeting=()={+='Hello'}watch([greetings,()=],(newValue,oldValue)={(newValue)(oldValue)+='updated'+})constrefData=toRefs(data)return{refData,greetings,updateGreeting}}}/scriptwatch简单应用watch(data,()={='updated'+})//watch的两个参数，代表新的值和旧的值watch(,(newValue,oldValue)={('old',oldValue)('new',newValue)='updated'+})//watch多个值，返回的也是多个值的数组watch([greetings,data],(newValue,oldValue)={('old',oldValue)('new',newValue)='updated'++})//使用getter的写法watchreactive对象中的一项watch([greetings,()=],(newValue,oldValue)={('old',oldValue)('new',newValue)='updated'++})结尾
