「这是我参与2022首次更文挑战的第30天，活动详情查看：2022首次更文挑战」
之前在写代码时看到一个提示，是vue2的项目，于是乎，我满怀期望，又带着点绝望（绝望的是要是vue2都能用compositionApi的话，那vue3的新特性不就不是setup了吗）地enter了一下。 出现了代码，运行。
幸好，嗯报错了，找不到这个导出。 哎，果然vue2还是不能用setup,但是这个defineComponent不能用和setup不能有关系吗？ 当然是————没干系，于是改成正常的export default{setup(){}} 。 嗯，彻底放心了，里面的代码没生效。这个defineComponent是用于结合Ts使用，有利于推测组件类型，返回的是一个构造函数。
好了切入正题， 正题就是怎么回答vue3有什么变化。下面是我大概能说出来的。
变化
-
更好的ts支持 , 语法提示更加友好，用ts重写了大量代码，符合函数式编程，因为这有利于类型推断。
-
更利好tree shaking , 按需引入， 遵循 esm 模块规则， 更多的用函数实现。
-
组件支持多个根节点，减少不必要的包裹元素，减少渲染压力， 使用了fragment重叠虚拟根节点（因为fragment不对应dom节点）
-
customer render h不在作为参数传入，而是全局，这个其实也是api简化。
-
composition api 不引入新的概念和特性， 用引入函数来实现响应式。 这个要是具体说就麻烦了。组合Api 更新适用什么？ 似乎不太好描述。还需一个例子。
类似官网上的例子，大概意思就是，有一套完整的逻辑，按之前的写法，需要在data里面声明所需变量， 在method里面声明所需方法和事件回调，在mounted里面进行初始化，在unmounted里面，解除强引用。
如果使用组合Api就跟原生的写法基本一致，可以直接写在一起。 这种情况就是所谓有利于更好组织代码。另外就是复用性， 写在setup里的代码不依赖this,就是一个函数，可完全抽离复用。
当然了，也可能选项式APi更适合你的逻辑。
setup 也会造成一些问题，响应式数据需要用ref reactive来构建，采用解构会丢失响应（这是必然的，代理是代理整个 对象，解构出来就绕过代理了）
组合api日常使用问题
时机
setup中避免使用this，setup 的调用发生在 data property、computed property 或 methods 被解析之前，所以它们无法在 setup 中被获取 。相对的， return 的内容都会暴露给组件的其余部分和模板，也就是说响应式数据会去到data,函数会去到method。
data computed watch以及生命周期
这些东西都可以单独写出来了，而且更灵活（也可能更混乱）。
import {onMounted ,onBeforeMount ,onUpdated, onBeforeUpdate, onUnmounted, ref, watchEffect, reactive,computed} from 'vue'
其中watch和watcheffect的区别可以说是，盯住多少的区别。 watch只盯住一个属性，这个属性变了，就去做点什么。更加专一，有新老值对比
watcheffect,只要在我监视范围的依赖（回调中用到的响应式数据）发生了变化，就去做点什么， 所以没有新老值。
生命周期的使用看一眼就知道了。
data 就是reatcivity的产物
用ref reatcive 。创建响应式对象，就是注意ref的返回值的value属性才是我们想要的，这很好理解，因为只有引用类型才能被监控。
torefs 解决解构3导致的响应式丢失的问题
解构意味着绕开了代理，不经过代理直接操作源对象，所以丢失了响应式。 这就需要torefs来帮忙了。也可能用不到
const books = reactive([ {title:'百年孤独',author:'das'}, {title:'百年汉阳造',author:'qwdas'}, ]) return toRefs(books) ;
其实vue3还有诸多变化，在官网的迁移指南 里都能找到
