前言

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

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

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

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

vue create vue_test

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

打開(kāi)cmd，輸入下面命令vue ui 

③npm init vite-app 

④npm init vue@latest

二、 API 風(fēng)格

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

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

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

2.1 選項(xiàng)式 API (Options API)

使用選項(xiàng)式 API，我們可以用包含多個(gè)選項(xiàng)的對(duì)象來(lái)描述組件的邏輯，例如 data 、 methods 和

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

<template>
<button @click="increment">Count is: {{ count }}</button>
</template>
<script>
export default {
// data() 返回的屬性將會(huì)成為響應(yīng)式的狀態(tài)
// 并且暴露在 `this` 上
	data() {
		return {count: 0}
},
// methods 是一些用來(lái)更改狀態(tài)與觸發(fā)更新的函數(shù)
// 它們可以在模板中作為事件監(jiān)聽(tīng)器綁定
methods: {
	increment() {
	this.count++
	}
},
// 生命周期鉤子會(huì)在組件生命周期的各個(gè)不同階段被調(diào)用
// 例如這個(gè)函數(shù)就會(huì)在組件掛載完成后被調(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...）中可以訪問(wèn)到setup中的屬性、方法。
3. 在setup中不能訪問(wèn)到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>

總結(jié)

以上就是今天要講的內(nèi)容，本文僅僅簡(jiǎn)單介紹了vue3組合的使用，vue3提供了大量能使我們快速便捷地創(chuàng)建項(xiàng)目的方法，基于webpack的腳手架，基于vite的創(chuàng)建工具

到此這篇關(guān)于如何創(chuàng)建Vue3項(xiàng)目及組合式API的文章就介紹到這了,更多相關(guān)創(chuàng)建Vue3項(xiàng)目及組合式API內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論