参考官网:Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org)
十一、组合式API
注意:组合式 API 并不是函数式编程。组合式 API 是以 Vue 中数据可变的、细粒度的响应性系统为基础的,而函数式编程通常强调数据不可变。
1、什么是组合式 API ?
组合式 API (Composition API) 是一系列 API 的集合,使我们可以使用函数而不是声明选项的方式书写 Vue 组件。它是一个概括性的术语,涵盖了以下方面的 API:
-
响应式 API:例如
ref()
和reactive()
,使我们可以直接创建响应式状态、计算属性和侦听器。 -
生命周期钩子:例如
onMounted()
和onUnmounted()
,使我们可以在组件各个生命周期阶段添加逻辑。 -
依赖注入:例如
provide()
和inject()
,使我们可以在使用响应式 API 时,利用 Vue 的依赖注入系统。
组合式 API能够将同一个逻辑关注点相关代码收集在一起。
在 Vue 3 中,组合式 API 基本上都会配合 <script setup> 语法在单文件组件中使用。
2、组合式 API 基础
(1)setup 组件选项
新的 setup 选项在组件被创建之前执行,一旦 props 被解析完成,它就将被作为组合式 API 的入口。
注意:在 setup 中应避免使用 this,this 不会指向实例。setup 的调用发生在 data property、computed property 或 methods 被解析之前,所以它们无法在 setup 中被获取。
下面举个例子:App.vue :
<script>
export default{
// 组合式API
setup(){
// msg的逻辑代码
let msg="hello";
console.log(msg);
function changeMsg(){
msg='你好'
console.log(msg) //可以看到数据不是响应式的
}
return{
msg,
changeMsg,
}
}
}
</script>
<template>
<div>
<p>{
{msg}}</p>
<button @click="changeMsg">改变msg</button>
</div>
</template>
由上图运行来看,点击按钮,控制台里面输出,但实际页面上的 msg 并没有变化,这说明用这种方法的数据不是响应式的。
(2)带 ref 的响应式变量
可以通过一个新的 ref 函数使任何响应式变量在任何地方起作用。
ref 接收参数并将其包裹在一个带有 value property 的对象中返回,然后可以使用该 property 访问或更改响应式变量的值。
例如:
<script>
import {ref} from 'vue' //引入ref
export default{
// 组合式API
setup(){
//通过ref定义响应式变量
// counter的逻辑代码
const counter=ref(0)
function changeCounter(){
//ref()返回带有value属性的对象,所以这里需要加上‘.value’
counter.value++
}
return{ //在return里面将数据暴露出去
counter,
changeCounter
}
}
}
</script>
<template>
<div>
<!-- 模板会自动解析value值,因此这里不需要加上‘.value’ -->
<p>{
{counter}}</p&