生命周期
Vue3 的生命周期
-
setup() :开始创建组件之前，在beforeCreate和created之前执行。创建的是data和method
-
onBeforeMount() : 组件挂载到节点上之前执行的函数。
-
onMounted() : 组件挂载完成后执行的函数。
-
onBeforeUpdate(): 组件更新之前执行的函数。
-
onUpdated(): 组件更新完成之后执行的函数。
-
onBeforeUnmount(): 组件卸载之前执行的函数。
-
onUnmounted(): 组件卸载完成后执行的函数
-
onActivated(): 被包含在中的组件，会多出两个生命周期钩子函数。被激活时执行。
-
onDeactivated(): 比如从 A 组件，切换到 B 组件，A 组件消失时执行。
-
onErrorCaptured(): 当捕获一个来自子孙组件的异常时激活钩子函数。
vue2 和vue3 生命周期对比
Vue2--------------vue3
beforeCreate -> setup()
created -> setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
activated -> onActivated
deactivated -> onDeactivated
errorCaptured -> onErrorCaptured
新增的以下2个方便调试 debug 的回调钩子（只能在开发环境调试使用）：
onRenderTracked: 状态跟踪，它会跟踪页面上所有响应式变量和方法的状态（setup函数return返回的值）页面只要有update，它就会跟踪，然后生成一个event对象，通过event对象 我们可以查找程序的问题所在
onRenderTriggered: 状态触发，它不会跟踪每一个值，而是给出变化值的信息，并且新值和旧值都会明确的展示出来，它只跟着发生变化的值，这样我么吧可以对程序进行精准的调试
- beforeCreate和created变成了setup
- BeforeDestroy变成了onBeforeUnmount
- destroyed变成了onUnmounted 尤大神的介绍是mount比Destroy更形象，也和beforeMount相对应。他是一个卸载的过程，并不是一个销毁的过程，语义化理解更好
原理
vue2 的双向数据绑定是利⽤ES5 的⼀个 API ，Object.definePropert()对数据进⾏劫持 结合 发布订阅模式的⽅式来实现的。
vue3 中使⽤了 es6 的 ProxyAPI 对数据代理，通过 reactive() 函数给每⼀个对象都包⼀层 Proxy，通过 Proxy 监听属性的变化，从⽽ 实现对数据的监控。
Composition API(组合式API)和Options API(选项式API)
options API（Vue2） 开发出来的vue应用如左图所示。它的特点是理解容易，好上手。因为各个选项都有固定的书写位置（比如数据就写到data选项中，操作方法就写到methods中，等等），应用大了之后，相信大家都遇到过来回上下找代码的困境。
composition API(Vue3) 开发的vue应用如右图所示。它的特点是特定功能相关的所有东西都放到一起维护，比如功能A相关的响应式数据，操作数据的方法等放到一起，这样不管应用多大，都可以快读定位到某个功能的所有相关代码，维护方便设置，如果功能复杂，代码量大，我们还可以进行逻辑拆分处理。
