Vue3组合式API

翰戈.summer

已于 2024-01-17 16:45:25 修改

阅读量394

点赞数 15

分类专栏：基本概念文章标签： vue3 组合式API 前端

于 2023-12-04 21:08:56 首次发布

本文链接：https://blog.csdn.net/qq_74312711/article/details/134793800

版权

基本概念专栏收录该内容

25 篇文章 0 订阅

订阅专栏

组合式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>