选项API写法和组合API写法

vue2是用的选项API语法（Options ApI）：数据和方法相分离

• 咱们在vue2.x项目中使用的就是 选项API 写法（Options ApI）
  • 代码风格：data选项写数据，methods选项写函数...，一个功能逻辑的代码分散。
• 优点：易于学习和使用，写代码的位置已经约定好
• 缺点：代码组织性差，相似的逻辑代码不便于复用，逻辑复杂代码多了不好阅读。
• 补充：虽然提供mixins用来封装逻辑，但是出现数据函数覆盖的概率很大，不好维护。

vue3使用的是组合式写法（Compositon API）：一个功能逻辑的代码组织在一起

• 咱们在vue3.0项目中将会使用 组合API 写法
  • 代码风格：一个功能逻辑的代码组织在一起（包含数据，函数...）
• 优点：功能逻辑复杂繁多情况下，各个功能逻辑代码组织再一起，便于阅读和维护
• 缺点：需要有良好的代码组织能力和拆分逻辑能力，PS：大家没问题。
• 补充：为了能让大家较好的过渡到vue3.0的版本来，也支持vue2.x选项API写法

组合api之setup函数：

setup 是一个新的组件选项，作为组件中使用组合API的起点。

在模版中需要使用的数据和函数，需要在 setup 返回，所以一定要有return。

vue3中没有this

setup在组件初始化之前执行，它返回的数据和函数可在模版使用。

认识vue3.0生命周期钩子函数（7个）

setup 创建实例前

onBeforeMount 挂载DOM前

onMounted 挂载DOM后

onBeforeUpdate 更新组件前

onUpdated 更新组件后

onBeforeUnmount 卸载销毁前

onUnmounted 卸载销毁后

组合API的生命周期钩子有7个，可以多次使用同一个钩子，执行顺序和按照上述书写顺序执行。

组合API-reactive函数

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