1、重构响应式系统
①使用Proxy（/ˈprɒksi/）替换Object.defineProperty，
Proxy优势：
可直接监听数组类型的数据变化
监听的目标为对象本身，不需要像Object.defineProperty一样遍历每个属性，有一定的性能提升
可拦截apply、ownKeys、has等13种方法，而Object.defineProperty不行
直接实现对象属性的新增/删除
2、新增Composition API，更好的逻辑复用和代码组织
①为什么要新增Composition API
Vue2.0中，随着功能的增加，组件变得越来越复杂，越来越难维护，而难以维护的根本原因是Vue的API设计迫使开发者使用 watch，computed，methods选项组织代码，而不是实际的业务逻辑。
另外Vue2.0缺少一种较为简洁的低成本的机制来完成逻辑复用，虽然可以minxis完成逻辑复用，但是当mixin变多的时候，会使得 难以找到对应的data、computed或者method来源于哪个mixin，使得类型推断难以进行。
所以Composition API的出现，主要是也是为了解决Option API带来的问题，第一个是代码组织问题，Compostion API可以让开 发者根据业务逻辑组织自己的代码，让代码具备更好的可读性和可扩展性，也就是说当下一个开发者接触这一段不是他自己写的代 码时，他可以更好的利用代码的组织反推出实际的业务逻辑，或者根据业务逻辑更好的理解代码。
第二个是实现代码的逻辑提取与复用，当然mixin也可以实现逻辑提取与复用，但是像前面所说的，多个mixin作用在同一个组件 时，很难看出property是来源于哪个mixin，来源不清楚，另外，多个mixin的property存在变量命名冲突的风险。而 Composition API刚好解决了这两个问题。
3、重构 Virtual DOM
模板编译时的优化，将一些静态节点编译成常量
slot优化，将slot编译为lazy函数，将slot的渲染的决定权交给子组件
模板中内联事件的提取并重用（原本每次渲染都重新生成内联函数）
代码结构调整，更便于Tree shaking，使得体积更小
使用Typescript替换Flow
一、目录解构
vue-cli2.0和vue-cli3.0在目录解构方面不同
vue-cli3.0移除了配置文件目录，config和build文件夹
同时移除了static静态文件夹，新增了public文件夹，打开层级目录还会发现，index.html移动到public中
二、配置项
3.0 config文件已经被移除，但是多了.env.production和env.development文件，除了文件位置，实际配置起来和2.0没什么不同
没了config文件，跨域需要配置域名时，从config/index.js 挪到了vue.config.js中，配置方法不变
三、渲染
Vue2.x使用的虚拟Dom实现的渲染
Vue3.0不论是原生的html标签还是vue组件，他们都会通过h函数来判断，如果是原生html标签，在运行时直接通过Virtual Dom来 直接渲染，同样如果是组件会直接生成组件代码
四.数据监听
Vue2.x大家都知道使用的是es5的object.defineproperties中getter和setter实现的，
而vue3.0的版本，是基于Proxy进行监听的，其 实基于proxy监听就是所谓的lazy by default，什么意思呢，就是只要你用到了才会监听，可以理解为‘按需监听’，官方给出的诠释 是：速度加倍，同时内存占用还减半。
五、按需引入
Vue2.x中new出的实例对象，所有的东西都在这个vue对象上，这样其实无论你用到还是没用到，都会跑一变。
而vue3.0中可以用ES module imports按需引入，如：keep-alive内置组件、v-model指令，等等
六、创建文件
2.0：vue init webpack
3.0：vue create 进入工程文件夹，创建项目。
七、3.0版本新增了生命周期钩子函数
beforeUnmount // 卸载组件实例之前调用
Unmount // 卸载组件实例之后调用
errorCaptured //当捕获一个来自子孙组件的错误时被调用
renderTracked //跟踪虚拟 DOM 重新渲染时调用
renderTriggered //当虚拟 DOM 重新渲染被触发时调用
当执行到对应的生命周期时，就调用对应的钩子函数：
<script>
import {
onBeforeMount,
onMounted,
onBeforeUpdate,
onUpdated,
onBeforeUnmount,
onUnmounted,
ref
} from 'vue'
export default {
setup () {
// 其他的生命周期
onBeforeMount (() => {
console.log("App ===> 相当于 vue2.x 中 beforeMount")
})
onMounted (() => {
console.log("App ===> 相当于 vue2.x 中 mounted")
})
// 注意，onBeforeUpdate 和 onUpdated 里面不要修改值
onBeforeUpdate (() => {
console.log("App ===> 相当于 vue2.x 中 beforeUpdate")
})
onUpdated (() => {
console.log("App ===> 相当于 vue2.x 中 updated")
})
onBeforeUnmount (() => {
console.log("App ===> 相当于 vue2.x 中 beforeDestroy")
})
onUnmounted (() => {
console.log("App ===> 相当于 vue2.x 中 destroyed")
})
return {
}
}
}
</script>
