Vue3 学习笔记 - Composition API

1 认识CompositionAPI

Options API的弊端

在Vue2中 编写组件的方式是Options API

Options API的一大特点就是在 对应的属性 中编写 对应的功能模块

如 data定义数据 methods中定义方法 computed中定义计算属性 watch中监听属性改变 也包括生命周期钩子

这种代码有很大的弊端:

当我们 实现某一个功能 时 这个功能 对应的代码逻辑 会被 拆分到各个属性 中

当组件变得更大更复杂时 逻辑关注点的列表 就会增长, 那么 同一个功能的逻辑就会被拆分的很分散;

尤其对于那些一开始 没有编写这些组件的人 来说 这个组件的代码 是难以阅读和理解的

认识Composition API

为了使用Composition API 我们需要一个可以实际使用它(编写代码)的地方

在Vue组件中,这个位置就是 setup函数

setup其实就是组件的另外一个选项:

这个选项强大到我们可以用它来替代之前所编写的大部分其他选项

如 methods computed watch data 生命周期等

2 Setup函数的基本使用

setup函数的参数

它主要有两个参数:props和context

prop=>父组件传递过来的属性 放到 props对象中, 我们在setup中如果需要使用 直接通过props参数获取:

对于 定义props的类型, 我们还是 和之前的规则是一样的,在props选项中定义

并且 在templ