1.首先3.x是组合式API (composition) ，2.x是组合式API（options）个人理解更像是选项卡
2.为什么要选择3.x总结一下几点：
1.项目如果要求使用ts那么一定要用3.x，会对ts有更好的支持
2.更贴近原生js，方便开发，速度更快，体积更小
3.底层使用了proxy监听函数变化放弃了defineProperty，proxy是原生的更快，proxy代理是ES6新出的属性相当于对象访问前的拦截，具有get, 和set两个方法，取值和设置值时触发
4.提高代码的可复用性
3.生命周期钩子函数
1 2.x
beforeCreat 创建组件之前执行
created 创建组件之后执行
beforeMount 组件挂载之前执行
mounted 组件挂载之后执行
beforeUpdate 数据更新之前执行
updated 数据更新之后执行
beforrDestory 销毁组件之前执行
destoryed 销毁之后执行
3.x
setup 函数取代了2.x的 beforeCreat和created函数
onBeforeMount 组件挂载前执行
onMounted 组件挂载后执行
onBeforeUpdate 数据更新前执行
onUpdated 数据更新后执行
onBeforeUnMount 销毁前执行
onUnMounted 销毁执行
*注意：3.x里面的钩子函数可以重复使用
4.声明响应式变量
1 复杂类型用reactive定义类型
2 简单类型用ref定义
3.需要单独监听响应式对象里面的某一个属性用toRef
4.需要监听响应式对象全部属性toRefs
*注意：1.响应式变量不能直接解构，解构、扩展运算符...出来的数据只是普通数据，不具备响应式功能
2.ref简单类型响应式数据设置值需要 key.value 进行设置，模板里面使用不需要写value
3.toRef使用方法toRef(对象名称，key),并且函数返回的数据需要 变量名.value 进行设置,toRefs使用方法toRefs(对象名称)
4.以上都会关联原数据
5.watch监听
1.用法基本跟2.x一样，watch接受三个参数
第一个要监听的属性名称
第二个监听到变化之后的回调函数，回调里面的参数返回监听到的新值和旧值
第三个参数是watch的配置，是否深度监听，第一次是否执行等
2.watch返回一个监听器函数，函数执行停止监听
*注意：
1.只能监听响应式声明的数据、函数返回的值或一个数组里面包含了以上三种数据
2.监听简单数据类型第一个参数直接传入需要监听的数据变量，监听复杂数据类型第一个参数需要传入一个函数并且return出相对应要监听的属性，监听ref声明属性如果传入函数必须要加.value
3.修改ref定义的对象不会触发监听函数，只有在修改整个对象时才会触发
wtch(
属性名或函数（函数需要return出需要监听的值），
（改便后的值，改变前的值）==>{
监听到变化后的函数
}，
{
监听器配置
}
)
以上监听器待补充
