Vue3学习-组合式API

最新推荐文章于 2026-04-18 17:40:59 发布

原创最新推荐文章于 2026-04-18 17:40:59 发布 · 756 阅读

本内容遵循CC 4.0 BY-SA版权协议

基本介绍

在Vue2中，使用的是Options API （选项式API）。而Vue3中虽然也兼容Options API ，但是更推荐Composition API （组合）。那什么是Options API，什么是Composition API 呢？先来看以下例子：

<script>
  export default {
    // data() 返回的属性将会成为响应式的状态
    // 并且暴露在 `this` 上
    data() {
      return {
        count: 0
      }
    },

    // methods 是一些用来更改状态与触发更新的函数
    // 它们可以在模板中作为事件处理器绑定
    methods: {
      increment() {
        this.count++
      }
    },

    // 生命周期钩子会在组件生命周期的各个不同阶段被调用
    // 例如这个函数就会在组件挂载完成后被调用
    mounted() {
      console.log(`The initial count is ${this.count}.`)
    }
  }
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

以上便是Options API ，如果改成Composition API ，那么要借助setup 语法。

setup介绍

setup 是Vue3 的配置项，它是一个函数，之前使用Options API 方式定义的数据、方法、计算属性、监听等数据，都是配置在setup 中。以下示例：

<script>
  import { ref, onMounted } from 'vue'

  export default {
    name: 'App',
    setup() {
      // 响应式状态
      // 响应式状态
      const count = ref(0)

      // 用来修改状态、触发更新的函数
      function increment() {
        count.value++
      }

      // 生命周期钩子
      onMounted(() => {
        console.log(`The initial count is ${count.value}.`)
      })

      return {
        count,
        increment
      }
    }
  }
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

在setup 中返回的对象，不管是数据还是方法，都可以直接在模板中使用。而为了实现方便，可以使用setup语法糖，即<script setup> ，这样就无须显示写setup 函数，写在script 中的所有数据和方法都可以直接在模板中使用。

<script setup>
  import { ref, onMounted } from 'vue'

  // 响应式状态
  // 响应式状态
  const count = ref(0)

  // 用来修改状态、触发更新的函数
  function increment() {
    count.value++
  }

  // 生命周期钩子
  onMounted(() => {
    console.log(`The initial count is ${count.value}.`)
  })
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

setup上指定组件名称

上述代码无法指定组件名称，如果想要指定组件名称，还需要额外添加一个script 标签：

<script>
  export default {
    name: 'App',
  }
</script>

为了解决这个问题，可以使用vite-plugin-vue-setup-extend 插件来简化。步骤如下：

安装：npm install vite-plugin-vue-setup-extend --save-dev
配置：在vite.config.js中配置如下

import VueSetupExtend from 'vite-plugin-vue-setup-extend'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    VueSetupExtend()
  ],
})

在script标签上指定name属性：<script setup name="App">

Composition API 中新增了许多新的语法，我们后面再慢慢介绍。

关于Options API 和Composition API 谁更好的问题，这个仁者见仁智者见智，但是有一点需要注意，这个市场（招聘市场和开发市场）都在往Composition API 上转（可见ElementPlus的文档），我们作为开发者，也必须要学会Composition API 的使用。

一个 Vue 3 UI 框架 | Element Plus

选项式API代码实操事例：

快速创建vue代码片段

输入VueInit

自动生成如下代码

<template lang="">
    <div>
        
    </div>
</template>
<script>
export default {
    
}
</script>
<style lang="">
    
</style>

更改为

<template>
    <div>
        
    </div>
</template>
<script>
export default {
    
}
</script>
<style scoped>
    
</style>

写选项式API代码示例：

填写到export default里面

<template>
    <div>
        <button>技数：{{ count }}</button>
    </div>
</template>
<script>
export default {
    name:'Options',
    data(){
        return {
            count:0
        }
    }
    
}
</script>
<style scoped>
    
</style>

在App.vue里面把组件显示下

更改App.vue的代码如下

<script setup>
import Options from './components/Options.vue';
</script>

<template>
  <Options></Options> 
</template>

<style scoped>
header {
  line-height: 1.5;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }
}
</style>

页面显示结果

现在增加功能，点击下计数每次加1

更改Options.vue

<template>
    <div>
        <button @click="onUpdateCount">技数：{{ count }}</button>
    </div>
</template>
<script>
export default {
    name:'Options',
    data(){
        return {
            count:0
        }
    },
    methods:{
        onUpdateCount(){
            this.count++;
        }
    }
    
}
</script>
<style scoped>
    
</style>

然后去页面点击每次可以增加1了

组合式API代码实操示例：

新建一个Compositions.vue

然后输入VueInit快速创建代码片段

然后创建如下代码

<template>
    <h1>组合式API</h1>
    <div>
        <button @click="onUpdateCount">计数：{{ count }}</button>
    </div>
</template>
<script>
import {ref} from "vue"
export default {
    name:'Compositions',
    setup(){
        let count = ref(0);
        function onUpdateCount(){
            count.value += 1; 
        }
        return {
            count,
            onUpdateCount
        }
    }
    
}
</script>
<style scoped>
    
</style>

然后修改下App.vue引入Compositions.vue

<script setup>
import Compositions from './components/Compositions.vue';
</script>

<template>
  <Compositions></Compositions> 
</template>

<style scoped>
header {
  line-height: 1.5;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }
}
</style>

页面刷新也同时可以实现相同的功能

使用setup语法糖，即<script setup> ，这样就无须显示写setup 函数

更改Compositions.vue

<template>
    <h1>组合式API</h1>
    <div>
        <button @click="onUpdateCount">计数：{{ count }}</button>
    </div>
</template>
<script setup>
import {ref} from "vue"
let count = ref(0);
function onUpdateCount(){
    count.value +=1;
}
</script>
<style scoped>
    
</style>

重新刷新页面还是可以得到一样的效果

如何更改组件名称事例

先查看下有哪些组件

网页中点击下面的按钮可以看到组件

现在想要更改组件名称

方式一：

直接增加一个script标签

<template>
    <h1>组合式API</h1>
    <div>
        <button @click="onUpdateCount">计数：{{ count }}</button>
    </div>
</template>
<script>
export default {
    name:"Com"
}
</script>
<script setup>
import {ref} from "vue"
let count = ref(0);
function onUpdateCount(){
    count.value +=1;
}
</script>
<style scoped>
    
</style>

然后刷新页面，查看组件名称，看到更改成功了

方式二：

安装：npm install vite-plugin-vue-setup-extend --save-dev

在vite.config.js中导入

import VueSetupExtend from 'vite-plugin-vue-setup-extend'

VueSetupExtend(),

指定组件名称

<template>
    <h1>组合式API</h1>
    <div>
        <button @click="onUpdateCount">计数：{{ count }}</button>
    </div>
</template>

<script setup name="Com2">
import {ref} from "vue"
let count = ref(0);
function onUpdateCount(){
    count.value +=1;
}
</script>
<style scoped>
    
</style>

刷新页面查看组件名称

标签

#前端 #vue