Vue3组合式API
组合式API是一系列API的集合
响应式API
例如 ref() 和 reactive() ,使我们可以直接创建响应式状态、计算属性和侦听器。
生命周期钩子
例如 onMounted() 和 onUnmounted() , 使我们可以在组件各个生命周期阶段添加逻辑。
依赖注入
例如 provide() 和 inject() , 使我们可以在使用响应式 API 时,利用 Vue 的依赖注入系统。
示例
<script setup>
import { ref, onMounted } from 'vue'
// 响应式状态
const count = ref(0)
// 更改状态、触发更新的函数
function increment() {
count.value++
}
// 生命周期钩子
onMounted(() => {
console.log(`计数器初始值为 ${count.value}。`)
})
</script>
<template>
<button @click="increment">点击了:{{ count }} 次</button>
</template>