vue2 Options 与 vue3 Composition
Options API
vue2中如何组织代码的：我们会在一个vue文件中data，methods，computed，watch中定义属性和方法，共同处理页面逻辑
缺点： 一个功能往往需要在不同的vue配置项中定义属性和方法，比较分散，项目小还好，清晰明了，但是项目大了后，一个methods中可能包含很多个方法，往往分不清哪个方法对应着哪个功能
优点：新手入门会比较简单
Composition API
在vue3 Composition API 中，代码是根据逻辑功能来组织的，一个功能的所有api会放在一起（高内聚，低耦合），这样做，即时项目很大，功能很多，我们都能快速的定位到这个功能所用到的所有API，而不像vue2 Options API 中一个功能所用到的API都是分散的，需要改动，到处找API的过程是很费时间的
缺点：学习成本可能会增加，以前的思维方式也要转变
优点：Composition API 是根据逻辑相关性组织代码的，提高可读性和可维护性，基于函数组合的 API 更好的重用逻辑代码（在vue2 Options API中通过Mixins重用逻辑代码，容易发生命名冲突且关系不清）
此处引用动画来直观感受一下吧 ~
diff 升级
Vue2.x 的核心Diff算法采用了双端比较的算法，同时从新旧children的两端开始进行比较，借助key值找到可复用的节点，再进行相关操作。相比React的Diff算法，同样情况下可以减少移动节点次数，减少不必要的性能损耗，更加的优雅
Vue3.x 借鉴了 ivi算法和 inferno算法。在创建VNode时就确定其类型，以及在mount/patch的过程中采用位运算来判断一个VNode的类型，在这个基础之上再配合核心的Diff算法，使得性能上较Vue2.x有了提升。(实际的实现可以结合Vue3.x源码看，该算法中还运用了动态规划的思想求解最长递归子序列)
vue3 新增
setup() 函数
它为基于 Composition API 的新特性提供了统一的入口。 在Vue3中，定义 methods、watch、computed、data数据 等都放在了 setup() 函数中
- 执行时机
setup()函数会在created()生命周期之前执行。
- 接收props数据
setup() 函数的第一个参数是 props ，组件接收的 props 数据可以在 setup() 函数内访问到。
setup(props) {
console.log(props.p1)
}
- context上下文对象
context 是 setup() 的第二个参数，它是一个上下文对象，可以通过 context 来访问Vue的实例 this 。
setup(props,context) {
console.log(this)
console.log(context)
}
注意：在 setup() 函数中访问不到Vue的 this 实例
