首先，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 {
                // 堆代码 duidaima.com
		// 注意这部分
		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> 本质上是第二种写法的语法糖，掌握了这种写法，其实第二种写法也基本上就会了。（又多了一个不学第二种写法的理由）。