vue3新特性

公司现在开发的项目是vue3开发的，属于边开发边上手吧，一直没有全面了解vue3，趁着开发任务不多的情况下，简单记录下，后期会继续补充。

为什么使用vue3？

比如我们在页面写个计数器，需要涉及部分有data里面定义数据，computed里面计算缓存，methods里面定义方法，有么有想过一个问题？一个计数器功能就要涉及三个部门，如果后续有新的功能是不是也得涉及三个甚至三个以上部分，再加上有相互依赖的功能，代码岂不是会越来越庞大难于维护。

但是vue2也给出了解决方案，Mixin，但是也会遇到让人苦恼的问题
1、命名冲突
2、外部不知道定义变量的作用
3、逻辑重用到其他组件会出现问题。

关于上面问题，就不举例了，文章的重点是vue3~

但是vue3就不会这样，后面会讲到自定义hook，可以实现业务逻辑整合在一起的效果。

vue3的composition API

setup 执行时机

**setup 执行时机是在 beforeCreate 之前执行，详细的可以看后面生命周期讲解。
**
具体可以手动打印一下，我这里就不展示了。

setup 参数
1、props: 组件传入的属性
2、context

setup 中接受的props是响应式的， 当传入新的 props 时，会及时被更新。 所以不可以使用 ES6 解构，解构会消除它的响应式
那在开发中我们想要使用解构，还能保持props的响应式，有没有办法解决呢？后面说到的toRefs可以解决。

context是因为vue3不能直接访问this对象，所以context中就提供了this中最常用的三个属性：attrs、slot 和emit，分别对应 Vue2.x 中的 $attr属性、s$