Vue3的组合式API是什么？

最新推荐文章于 2025-06-22 21:35:55 发布

原创

最新推荐文章于 2025-06-22 21:35:55 发布 · 801 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

Vue3的组合式API将原来的“方法”式API转变为“函数”式API，核心是setup函数。在示例中，展示了如何使用reactive创建响应式对象，toRefs转换属性，以及如何定义计算属性和watch监听器。计算属性以函数形式返回，watch用于监听属性变化并执行回调。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue3的组合式API，简单来说，就是将原来的“方法”式API，变成了“函数”式API。

你只需要把原来的methods，直接塞到setup里面即可，是不是很简单？

但是要注意，组合式API跟传统的template-based API是有冲突的，所以Vue3默认情况下是禁止同时使用两种API的，如果你硬要同时使用，会抛出一个错误。

现在我们开始正式介绍Vue3的组合式API。

首先是setup函数，这个函数是整个组合式API的核心，所有的逻辑都应该在这个函数里面实现。

<template>  
  <div>  
    <p>{
   
   {
   
    message }}</p>  
    <button @click="increment">Increment</button>  
  </div>  
</template>  
  
<script>  
import {
   
    reactive, toRefs } from 'vue';  
  
export default {
   
     
  setup() {
   
     
    const state = reactive({
   
     
      count: 0,  
      message: 'Hello Vue3!',  
    });  
  
    const increment = () => {
   
     
      state.count++;  
    };  
  
    const message = toRefs(state.message);  
    const count = toRefs(state.count)