前言

最近也是在开始学习 vue3，发现和 vue2 差别也挺大的，在 vue2 的基础上进行了升级，带来了更好的性能以及更简洁的语法和更易用的 API

在 vue2 中，编写组件的方式是 Options API，而在 vue3 中则是 Composition API，Options API 又被称为选项式 API，在对象里的 data，methods 等等都是一个个选项，这样编写的代码有很多弊端：

1. 代码分散在多个选项中，难以阅读和理解，特别是处理复杂逻辑时

（试过在几百行的代码里看的头晕晕）

2.命名冲突：所有选项都在同一层级下定义，当选项过多时，可能会存在命名冲突的问题

3.代码复用性差，当多个组件需要共用某些逻辑时，使用 Options API 实现代码复用会比较困难

Composition API

而 Composition API 帮助我们将逻辑相关代码都收集在了一起

使用 Composition API 编写的代码，都在setup()函数里，它是组件中使用 Composition API 的入口，

setup()函数有两个参数，props 和 context，props 是父组件传递过来的参数，context 是一个包含了当前组件实例以及一些有用属性和方法的对象：

1. attrs: 组件上的非 prop 属性(prop 没接收的属性)

2. slots: 父组件传递过来的插槽

3. emit: 定义和触发自定义事件的方法

setup()函数也有返回值，返回的值可以在模板中使用，也就是说可以通过 setup 的返回值代替 options API 中的 data，绑定的方法也是直接在 setup()函数里定义并返回就行了

ref 和 reactive

但是如果想通过方法去修改变量的时候，虽然会发生改变，但是页面上的数据却不会发生改变，因为这个变量只是一个普通的变量而不是响应式的，想要使变量变成一个响应式变量需要从 vue 内部引入两个函数reactive和ref

这两个函数都可以将一个变量变成一个响应式变量，区别就在于ref 用于创建单一的响应式数据，如 string,number,boolean 类型的数据，使用 ref 创建的响应式数据时，需要使用.value来获取和修改值，因为ref返回的是一个包装过的对象，而不是原始值，但是在 template 模板中不需要.value

reactive则用于创建一个响应式对象，接受参数必须是对象的形式，在组件中使用 reactive 创建的响应式对象时，可以直接访问和修改属性的值不需要通过.value来获取和修改值

readonly

readonly 接受一个对象 (不论是响应式还是普通的) 或是一个ref，返回一个原值的只读代理，意思就是只能读取不能修改

computed

vue3 中 computed 和 vue2 中的 computed 用法类似，但是需要引入使用，都是根据依赖的数据自动计算出一个新值，并在依赖数据发生变化时自动更新，并且返回的也是一个ref对象

watch 和 watchEffect

在 Composition API 中，监听数据变化是通过 watch 和 watchEffect 来监听的

watch 需要指定要监视的数据，watch 的回调函数接收两个参数，新值和旧值

watchEffect 自动收集数据的依赖，并且只能是响应式数据，而且不需要指定监视的数据，并且 watchEffect 在初始化时会立即执行一次，将回调函数里面的响应式数据收集起来并建立响应式依赖关系，通过收集响应式数据，自动追踪响应式数据的变化

watchEffect 清除副作用

watchEffect((onCleanup) => {
  // 对异步操作进行处理  onCleanup(() => {    // cancel操作  });});

watchEffect 停止侦听

当不再需要侦听器时，可以停止侦听，在调用watchEffect方法时，将返回一个stop方法，该方法可用于停止侦听器

生命周期钩子

生命周期钩子也需要引入，并且首字母大写并且加上 on 开头，例如原来 vue2 中的 mounted 在 vue3 中是 onMounted，updated 变成了 onUpdated 等等，但是没有 beforeCraete 和 created 这两个生命周期了，统统放在 setup 里了，因为 setup 比 beforeCraete 和 created 调用的还要早

最后

当然，除了这些常用的 api 还有许多不常用的 api，都可以在官网里找到说明，也有示例的代码