本文的目的，是为了让已经有 Vue2 开发经验的 人 ，快速掌握 Vue3 的写法。
因此， 本篇假定你已经掌握 Vue 的核心内容 ，只为你介绍编写 Vue3 代码，需要了解的内容。
一、Vue3 里 script 的三种写法
首先，Vue3 新增了一个叫做组合式 api 的东西，英文名叫 Composition API。因此 Vue3 的 script 现在支持三种写法，
1、最基本的 Vue2 写法
<template>
<div>{{ count }}</div>
<button @click="onClick">
增加 1
</button>
</template>
<script>
export default {
data() {
return {
count: 1,
};
},
methods: {
onClick() {
this.count += 1;
},
},
}
</script>
2、setup() 属性
<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>
3、<script setup>
<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>
正如你看到的那样，无论是代码行数，还是代码的精简度，<script setup> 的方式是最简单的形式。
如果你对 Vue 很熟悉，那么，我推荐你使用 <script setup> 的方式。
这种写法，让 Vue3 成了我最喜欢的前端框架。
如果你还是前端新人，那么，我推荐你先学习第一种写法。
因为第一种写法的学习负担更小，先学第一种方式，掌握最基本的 Vue 用法，然后再根据我这篇文章，快速掌握 Vue3 里最需要关心的内容。
第一种写法，跟过去 Vue2 的写法是一样的，所以我们不过多介绍。
第二种写法，所有的对象和方法都需要 return 才能使用，太啰嗦。除了旧项目，可以用这种方式体验 Vue3 的新特性以外，我个人不建议了解这种方式。反正我自己暂时不打算精进这部分。
所以，接下来，我们主要介绍的，也就是 <script setup> ，这种写法里需要了解的内容。
注意： <script setup> 本质上是第二种写法的语法糖，掌握了这种写法，其实第二种写法也基本上就会了。（又多了一个不学第二种写法的理由）。