十分钟，带你了解 Vue3 的新写法

最近因为项目需要，不得不学习一下 Vue3。于是花了 4 个小时，把 Vue3 过了一遍。现在我来带你快速了解 Vue3 的写法。

本文的目的，是为了让已经有 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() 属性

3、

正如你看到的那样，无论是代码行数，还是代码的精简度， 的方式是最简单的形式。

如果你对 Vue 很熟悉，那么，我推荐你使用 的方式。

这种写法，让 Vue3 成了我最喜欢的前端框架。

如果你还是前端新人，那么，我推荐你先学习第一种写法。

因为第一种写法的学习负担更小，先学第一种方式，掌握最基本的 Vue 用法，然后再根据我这篇文章，快速掌握 Vue3 里最需要关心的内容。

第一种写法，跟过去 Vue2 的写法是一样的，所以我们不过多介绍。

第二种写法，所有的对象和方法都需要 return 才能使用，太啰嗦。除了旧项目，可以用这种方式体验 Vue3 的新特性以外，我个人不建议了解这种方式。反正我自己暂时不打算精进这部分。

所以，接下来，我们主要介绍的，也就是 ，这种写法里需要了解的内容。

注意： 本质上是第二种写法的语法糖，掌握了这种写法，其实第二种写法也基本上就会了。（又多了一个不学第二种写法的理由）。

二、如何使用

// Vue3 的写法

2）注意事项——组合式 api 的心智负担

a、ref 和 reactive

Vue3 里，还提供了一个叫做 reactive 的 api 。

但是我的建议是，你不需要关心它。绝大多数场景下， ref 都够用了。

b、什么时候用 ref() 包裹，什么时候不用。

要不要用ref，就看你的这个变量的值改变了以后，页面要不要跟着变。

当然，你可以完全不需要关心这一点，跟过去写 data 一样就行。

只不过这样做，你在使用的时候，需要一直 .value 。

c、不要解构使用

在使用时，不要像下面这样去写，会 丢失响应性。

也就是会出现更新了值，但是页面没有更新的情况

xml

复制代码

// Vue3 的写法

注意： 学习 Vue3 就需要考虑像这样的内容，徒增了学习成本。实际上这些心智负担，在学习的过程中，是可以完全不需要考虑的。

这也是为什么我推荐新人先学习 Vue2 的写法。

2、methods

声明事件方法，我们只需要在 script 标签里，创建一个方法对象即可。

剩下的在 Vue2 里是怎么写的，Vue3 是同样的写法。

xml

复制代码