Vue3的组合式API是什么？

最新推荐文章于 2024-11-16 20:30:46 发布

心悦蛋糕

最新推荐文章于 2024-11-16 20:30:46 发布

阅读量786

点赞数

分类专栏： vue 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/2301_77795034/article/details/131212932

版权

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.