Options API 选择式API

  1. vue2中 逻辑被拆分成
  • components 子组件
  • props 父传子的标签
  • data 组件变量
  • computed 属性计算
  • watch 响应数据的变化
  • methods 方法
  • 生命周期函数 beforcreate created等

有一定的框架，约定了书写的方式，显得很整洁。（vue3 有新的一套书写框架）

  1. vue2逻辑复用方式
  • Mixin（命名空间冲突、逻辑不清晰、不易复用）
  • scoped slot 作用域插槽（配置项多，代码分裂、性能差，少用）
  1. vue3中的变化
  • 组合式API+函数式编程
  • 组件间逻辑共享

vue3现在是beta 公测版本，以后很多bug，目前不适合实际工程开发

Composition API 组合式API

  • 组合式API，函数式编程
  • 组件间逻辑共享

由于vue2中逻辑被拆分了很多个地方。vue3使用组合式API，能将同一个逻辑关注点相关代码收集在一起。 将同一个功能的变量声明，生命周期函数，computed，watch等都写在一起。 官方例子：什么是组合式API？

setup组件选择

新的 setup 选项在组件被创建之前执行，一旦 props 被解析完成，它就将被作为组合式 API 的入口。

调用时机： 创建组件实例，然后初始化props，紧接着就调用setup函数。从生命周期钩子的视角来看，它会在beforeCreate钩子之前被调用

在 setup 中你应该避免使用 this，因为它不会找到组件实例。setup 的调用发生在 data property、computed property 或 methods 被解析之前，所以它们无法在 setup 中被获取

setup 选项是一个接收 props 和 context 的函数，我们将在之后进行讨论。此外，我们将 setup 返回的所有内容都暴露给组件的其余部分 (计算属性、方法、生命周期钩子等等) 以及组件的模板。