总的一个大纲已经列出来了。
1. 改写响应式的实现逻辑
Vue2是通过Object.defineProperty()来拦截数据，将数据转换成getter/setter的形式，在访问数据时调用getter函数，在修改数据时调用setter函数。
缺陷：不能检测数组和对象的变化
参考文献：
为什么vue2不能检测数组和对象的变化？
Vue3基于ES6新增的Proxy对象实现数据代理以及通过Reflect对源数据进行操作，它解决了Vue2中无法追踪数据新增或删除属性的问题。另外，Proxy可以直接监听数组，无需像Vue2响应式那样需要重写数组方法进行拦截。
2. 使用Composition API替换Options API
Options 的缺陷
-
反复横跳
一个功能往往需要在不同的 vue 配置项中定义属性和方法，比较分散，需求简单还好，清晰明了；但是需求复杂之后，就会多出watch，computed，provide等配置，这个 .vue 文件也会逐渐增大，且一个 methods 中可能包含 10-20 个方法，你往往分不清哪个方法对应着哪个功能。当维护过超过200行的 .vue 组件，新增或者修改一个需求，就需要分别在data，methods，computed里修改 ，滚动条反复上下移动，称之为『反复横跳』 -
mixins 和 this
反复横跳的本质，在于功能的分块组织，以及代码量太大了，如果我们能把代码控制在一屏，自然就解决了，vue2 里的解决方案，是使用 mixin 来混合，比如我们抽离一个 counter.js。这样确实拆分了代码，但是有一个贼严重的问题，就是不打开 counter.js，App.vue 里的 this上，count，add这些属性，是完全不知道从哪来的，你不知道是mixin，还是全局install，还是Vue.prototype.count设置的，数据来源完全模糊，调试爽死你，这也是 option 的一个大问题，this是个黑盒，template 里写的 count 和 double，完全不知道从哪来的。 -
mixin 命名冲突的问题。
Vue3 中的 Composition API 就是用来解决这个问题的：通过组合的方式，把零散在各个data，methods的代码，重新组合，一个功能的代码都放在一起维护，并且这些代码可以单独拆分成函数 。
3. 性能优化
3.1 优化Vdom
Vue2 每次更新 diff, 都是全量对比
Vue3 则只对比带有标记的, 大大减少了非动态内容的对比消耗。
3.2 patch flag 优化静态树
patch flag 的强大之处在于，当你的 diff 算法走到 _createBlock 函数的时候，会忽略所有的静态节点，只对有标记的动态节点进行对比，而且在多层的嵌套下依然有效。patch flag 的出现还是让 Vue3 的 Vdom 的性能得到了很大的提升，尤其是在针对大组件的时候。
3.3 Tree shaking
简单来讲，就是在保持代码运行结果不变的前提下，去除无用的代码。
在 Vue2 中，无论我们使用什么功能，它们最终都会出现在生产代码中。主要原因是 Vue 实例在项目中是单例的，捆绑程序无法检测到该对象的哪些属性在代码中被使用到。
而 Vue3 源码引入 tree shaking 特性，将全局 API 进行分块。如果你不使用其某些功能，它们将不会包含在你的基础包中。
比如你要用 watch 就是 import { watch } from ‘vue’ 其他的 computed 没用到就不会给你打包减少体积。
4. 新增组件和写法支持
- 支持 render JSX 写法
- 新增 Suspense
- 支持多 v-model 写法
- 新增 Teleport
5. 页面生命周期
