vue基础知识：由浅入深了解组合式API的应用

今天，我们将继续分享vue的基本知识：从浅到深理解组合API的应用。

react推出hook后，vue还在vue3中添加了组合API。鉴于这个时间间隔，我有理由认为组合API和hook有一些关系。然而，在我的具体使用中，我没有发现这两种方法有太多的相似之处，但鉴于vue自动发布后与react之间的量子力学关系，估计很多人会问这两种方法之间的异同。在我能分辨出异同之前，简单介绍一下vue的组合API。

组合API

当vue3.0发布时，组合API也随着发布会进入了公众的视野。官方网站将原来的使用方法命名为选项API。同时，官方网站还明确表示，选项API是由组合API实现的，因此vue的主要推广方向应该是组合API。

从语法到词法，再到运行状态，我学习框架的方法。然后从语法开始学习，还是以官网为例。

1. //代码一
2. <script setup> 
3.     import { ref, onMounted } from ‘vue’ 
4.     // 响应式状态 
5.     const count = ref(0) 
6.     // 用于修改状态并触发更新的函数 
7.     function increment() { 
8.         count.value  
9.     }
10.     // 生命周期钩 
11.     onMounted(() => { 
12.         console.log(`The initial count is ${count.value}.`)
13.     })
14. </script>
15. <template>
16.     <button @click=“increment”>Count is: {{ count }}</button> 
17. </template>

可以看出，组合API和原选项API仍然不同，原选项API可以直接使用生命周期、变量声明等内置方法，组合API需要在使用前引入。

首先，这不是vue3.0版本的组合API写法，而是vue3.2版本发布时的语法糖，但也是我个人推荐的方法。毕竟如果不推荐，这种语法糖是不会产生的。3.0版本的写法有些繁琐，但大致相同。

1. //代码二
2. import { reactive } from ‘vue’ 
3. export default {
4.     // `setup` 专门用于组合式 API 特殊的钩子函数 
5.     setup() { 
6.         const state = reactive({ count: 0 })
7.         // 暴露 state 到模板
8.         return { state }
9.     }
10. }

这是最初组合API的写作方法。与新版语法糖相比，只有一个setup和一个变量return，这个setup是我认为组合API的核心。

setup

最初的响应API setup 函数作为入口函数， setup函数必须返回两种类型的值：一种是对象，另一种是函数。

当 setup 当函数返回对象时，对象中的数据或方法可以在 在template中使用，相当于data函数中的变量。当 当setup函数返回函数时，函数将被用作 render 函数。

然而，可以预见，当页面数据量增加时，setup函数会变得巨大，return的内容也会扩展。因此，vue3.2的语法糖省略了setup函数的包裹，而是直接将setup放入script中，其中的代码相当于放入setup函数中，也省略了return的步骤。虽然没有写setup函数，但这个代码的本质是执行setup函数。

变量声明

执行setup函数后，内部变量将直接暴露给组件，并由组件使用。以上面代码1中的count为例。count被声明后，可以放入template中，也可以通过increment函数修改后在页面中更新。这是通过ref的方法，但在ref之前，我们应该谈谈组合API生命对象的方法。

代码2中的state是reactive方法声明的对象。reactive和ref一样，用于声明变量。只有通过这两种方法，声明后的变量才能实现响应性更新。这其实是vue为了让用户简单而造成的复杂，具体来说比较复杂，我就简单说说吧。

vue3仍然是一个响应架构，通过监控声明的变量来收集变量的修改，已经实现了响应更新的功能。对vue3有一定了解的用户都知道vue3使用proxy，但proxy只能作为对象代理。如果使用原始类型，比如string和number，就没有办法了。因此，为了监控原始类型的数据，vue3使用ref来声明原始类型，从而将原始类型变成对象。看来ref声明后的原始类型还是一样的。事实上，我们修改的是这个变量的value值，而不是这个对象值。

组合API的另一点是不能直接修改声明的变量值。

组合API的另一点是无法直接修改声明的变量值。以代码1为例，无论是否count = 3还是count=ref(3)都会导致显示无法更新。同样，代码二中state的修改也不能直接通过state=reactive({a:23})或者state = {a:23}修改方法。

虽然ref也可以用于生活对象，但仍然不推荐，毕竟，仍然按照文档的方式写作，以实现最方便的维护，毕竟，比维护他人的坏代码更不舒服的是维护自己的坏代码。

当 ref 当被访问为模板中的顶层属性时，它们会自动“解包”，因此不需要使用 .value。因此，在代码1中，template中的count不需要写count.value。

回到组合API，变量修改后，组合API和选项API，不能立即更新显示，所以要获得变量修改后的页面元素需要nextick，使用与vuenextick相同，不再重复。

与选项式API相比，目前的优势

从代码1和代码2可以看出，组合API不需要将变量放入data，函数放入method，这样相关的变量和函数就可以放在一起。开发选项API时，当页面数据量大时，在method写函数时忘记变量名，需要滑入data查看，然后滑回method继续写函数。组合API不能完全避免，但可以大大减少这种情况的发生。

生命周期

生命周期官网的图片还是挺完整的，基本和选项API差不多，就是改名字，去掉create，改用setup。

Vue2.x	Vue3
beforeCreate	setup
created
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeDestroy	onBeforeUnmount
destroyed	onUnmounted

我从这篇文章中找到了一个对比列表，一般可以一一对应。我不会重复生命周期的逻辑。因为用法不同，我会根据代码一个一个错误的例子。

1. setTimeout(() => { 
2.     onMounted(() => { 
3.         // 异步注册时，当前组件实例丢失 
4.         // 这将不会正常工作 }) 
5.      }, 100
6.  )

生命周期可以放在函数中，然后在setup中调用，但不能放在异步函数中。