携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情
Vue3 已经发布很久了，一直没有什么时间详细学习（真是不该不该），那么从今天开始就用 Vue3 写一个后台管理系统，于实战中学习 Vue3 的一些新特性。
Vue 的新变化
既然要使用 vue3，那我们今天就先来了解一下 vue3 的一些内容。
自从 vue 发布了 3.0 版本之后，其最主要的特性 Composition API 就一直备受追捧，但是真正在实际项目中使用的并不多，一方面是因为老的项目升级 vue3 要将 options API 语法修改成 Composition API 工作量有些大，另一方面原因就在于 Composition API 所提供的 setup 函数，使用 setup 函数，你的语法有可能是这个样子：
<template>
<h1>{{ count }}</h1>
<button @click="inc">+</button>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
// 创建响应式数据
const count = ref(0)
// 创建 inc 方法
const inc = () => {
count.value++
}
// 返回一个对象用于在页面中显示
return {
// 需要在页面中使用则必须使用 return 将其返回
count,
inc
}
}
}
</script>
虽然，Composition API 相比于 options API 我们可以将相关的业务代码写在同一部分，解决了之前在项目比较大的时候，上下翻找的问题，但是 Composition API 也有着自己麻烦的地方，想一想，我们想使用一个响应式数据，不但要使用 ref 进行声明，最后还需要在 setup 函数中进行返回，这样是不是也相当麻烦。（这种问题我们都能发现，尤大怎么可能感觉不到，哈哈哈哈）
随即在一年后，vue 就推出了全新的 Composition API 语法 -- script-setup
现在我们基于 script-setup，修改一下上边的代码
<template>
<h1>{{ count }}</h1>
<button @click="inc">+</button>
</template>
// setup 是必须的
<script setup>
// 创建响应式数据
const count = ref(0)
// 创建 inc 方法
const inc = () => {
count.value++
}
</script>
哈哈哈，是不是简化了好多，而且可以像书写 js 一样去书写 vue
vue 的新变化就暂时说这么多，其他的在项目中慢慢体会，下一篇大家一起来看看编程规范相关内容。
在公众号里搜 大帅老猿，在他这里可以学到很多东西
