快捷導(dǎo)航

一文詳解如何創(chuàng)建Vue3項目及組合式API

更新時間：2023年05月31日 10:18:01 作者：Aic山魚

Vue3提供了一種組合式API,可以用來構(gòu)建可復(fù)用的組件和應(yīng)用程序,下面這篇文章主要給大家介紹了關(guān)于如何創(chuàng)建Vue3項目及組合式API的相關(guān)資料,文中通過圖文以及實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

例如：隨著前端領(lǐng)域的不斷發(fā)展，vue3學(xué)習(xí)這門技術(shù)也越來越重要，很多人都開啟了學(xué)習(xí)vue3的進(jìn)程，本文就介紹了vue3的創(chuàng)建及組合式api。

一、如何創(chuàng)建vue3項目？

有四種辦法可以進(jìn)行vue3項目的創(chuàng)建

①使用 vue-cli 創(chuàng)建

vue create vue_test

②使用可視化ui創(chuàng)建

打開cmd，輸入下面命令vue ui

③npm init vite-app

④npm init vue@latest

二、 API 風(fēng)格

Vue 的組件可以按兩種不同的風(fēng)格書寫：選項式 API 和組合式 API。

傳統(tǒng)OptionsAPI中，新增或者修改一個需求，就需要分別在data，methods，computed里修改。傳統(tǒng)的組件隨著業(yè)務(wù)復(fù)雜度越來越高，代碼量會不斷的加大，整個代碼邏輯都不易閱讀和理解。

Vue3 組合式 API（Composition API）主要用于在大型組件中提高代碼邏輯的可復(fù)用性。Vue3 使用組合式 API 的地方為 setup。在 setup 中，我們可以按邏輯關(guān)注點(diǎn)對部分代碼進(jìn)行分組，然后提取邏輯片段并與其他組件共享代碼。因此，組合式 API（Composition API）允許我們編寫更有條理的代碼。

2.1 選項式 API (Options API)

使用選項式 API，我們可以用包含多個選項的對象來描述組件的邏輯，例如 data 、 methods 和

mounted 。選項所定義的屬性都會暴露在函數(shù)內(nèi)部的 this 上，它會指向當(dāng)前的組件實(shí)例。

<template>
<button @click="increment">Count is: {{ count }}</button>
</template>
<script>
export default {
// data() 返回的屬性將會成為響應(yīng)式的狀態(tài)
// 并且暴露在 `this` 上
	data() {
		return {count: 0}
},
// methods 是一些用來更改狀態(tài)與觸發(fā)更新的函數(shù)
// 它們可以在模板中作為事件監(jiān)聽器綁定
methods: {
	increment() {
	this.count++
	}
},
// 生命周期鉤子會在組件生命周期的各個不同階段被調(diào)用
// 例如這個函數(shù)就會在組件掛載完成后被調(diào)用
mounted() {
	console.log(`The initial count is ${this.count}.`)
	}
}
</script>

2.2 組合式 API (Composition API)

setup() 鉤子是在組件中使用組合式 API 的入口。

方式一

<template>
<div>{{ count }}</div>
<button @click="onClick">增加 1</button>
</template>
<script>
import { ref } from 'vue';
export default {
// 注意這部分
setup() {
    let count = ref(1);
    const onClick = () => {count.value += 1;};
return {count,onClick,};
	},
}
</script>

組件中所用到的：數(shù)據(jù)、方法等等，均要配置在setup中
1. 不要與Vue2.x配置混用
2. Vue2.x配置（data、methos、computed...）中可以訪問到setup中的屬性、方法。
3. 在setup中不能訪問到Vue2.x配置（data、methos、computed...）。
4. 如果有重名, setup優(yōu)先。

方式二

<template>
<div>{{ count }}</div>
<button @click="onClick">增加 1</button>
</template>
<script setup>
import { ref } from 'vue';
	const count = ref(1);
	const onClick = () => {count.value += 1;};
</script>