VUE 3.0 新特性之 Composition API（组合式API）

在vue2.0项目中使用的是 选项API 写法 

• 代码风格：data选项写数据，methods选项写函数...，一个功能逻辑的代码分散。
• 优点：易于学习和使用，写代码的位置已经约定好
• 缺点：代码组织性差，相似的逻辑代码不便于复用，逻辑复杂代码多了不好阅读。

 什么是组合API写法 Compositon API? 

• 代码风格：一个功能逻辑的代码组织在一起（包含数据，函数...）
• 优点：功能逻辑复杂繁多情况下，各个功能逻辑代码组织再一起，便于阅读和维护
• 缺点：需要有良好的代码组织能力和拆分逻辑能力。

组合API-setup函数

使用细节：

• setup 是一个新的组件选项，作为组件中使用组合API的起点。
• 从组件生命周期来看，它的执行在组件实例创建之前vue2.x的beforeCreate执行。
• 这就意味着在setup函数中 this 还不是组件实例，this 此时是 undefined
• 在模版中需要使用的数据和函数，需要在 setup 返回。

 组合API-生命周期

• setup 创建实例前
• onBeforeMount 挂载DOM前
• onMounted 挂载DOM后
• onBeforeUpdate 更新组件前
• onUpdated 更新组件后
• onBeforeUnmount 卸载销毁前
• onUnmounted 卸载销毁后

总结： 组合API的生命周期钩子有7个，可以多次使用同一个钩子，执行顺序和书写顺序相同。

组合API-reactive函数 

• reactive是一个函数，它可以定义一个复杂数据类型，成为响应式数据。

组合API-toRef函数 

• toRef是函数，转换响应式对象中某个属性为单独响应式数据，并且值是关联的。

使用场景：有一个响应式对象数据，但是模版中只需要使用其中一项数据。 

组合API-toRefs函数 

• toRefs是函数，转换响应式对象中所有属性为单独响应式数据，对象成为普通对象，并且值是关联的

使用场景：剥离响应式对象（解构|展开），想使用响应式对象中的多个或者所有属性做为响应式数据。 

组合API-ref函数 

• ref函数，常用于简单数据类型定义为响应式数据
  • 再修改值，获取值的时候，需要.value
  • 在模板中使用ref申明的响应式数据，可以省略.value

使用场景：当你明确知道需要的是一个响应式数据 对象 那么就使用 reactive 即可，

                  其他情况使用ref。