前言

例如：随着前端领域的不断发展，vue3学习这门技术也越来越重要，很多人都开启了学习vue3的进程，本文就介绍了vue3的创建及组合式api。

一、如何创建vue3项目？

有四种办法可以进行vue3项目的创建

①使用 vue-cli 创建

vue create vue_test

②使用可视化ui创建

打开cmd，输入下面命令
vue ui

③npm init vite-app

④npm init vue@latest

二、 API 风格

2.1 选项式 API (Options API)

使用选项式 API，我们可以用包含多个选项的对象来描述组件的逻辑，例如 data 、 methods 和

mounted 。选项所定义的属性都会暴露在函数内部的 this 上，它会指向当前的组件实例。

<template>
<button @click="increment">Count is: {{ count }}</button>
</template>
<script>
export default {
// data() 返回的属性将会成为响应式的状态
// 并且暴露在 `this` 上
	data() {
		return {count: 0}
},
// methods 是一些用来更改状态与触发更新的函数
// 它们可以在模板中作为事件监听器绑定
methods: {
	increment() {
	this.count++
	}
},
// 生命周期钩子会在组件生命周期的各个不同阶段被调用
// 例如这个函数就会在组件挂载完成后被调用
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>

方式二

<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>