从Vue2到Vue3, 一键升级前端开发技能

本文的目的，是为了让已经有 Vue2 开发经验的 人 ，快速掌握 Vue3 的写法。

因此， 本篇假定你已经掌握 Vue 的核心内容 ，只为你介绍编写 Vue3 代码，需要了解的内容。

一、Vue3 里 script 的三种写法

首先，Vue3 新增了一个叫做组合式 api 的东西，英文名叫 Composition API。因此 Vue3 的 script 现在支持三种写法，

1、最基本的 Vue2 写法

2、setup() 属性

3、

正如你看到的那样，无论是代码行数，还是代码的精简度，

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

复制代码

// Vue2 的写法

// Vue3 的写法


// 注意这部分
const onClick = () => {
 console.log('clicked')
}

3、props

声明 props 我们可以用 defineProps()，具体写法，我们看代码。

1）写法对比

// Vue2 的写法

// Vue3 的写法

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

使用 props 时，同样注意不要使用解构的方式。

4、emits 事件

与 props 相同，声明 emits 我们可以用 defineEmits()，具体写法，我们看代码。

// Vue2 的写法

// Vue3 的写法

5、computed

直接上写法对比。

// Vue2 的写法

// Vue3 的写法

6、watch

这一部分，我们需要注意一下了，Vue3 中，watch 有两种写法。一种是直接使用 watch，还有一种是使用 watchEffect。

两种写法的区别是：

• watch 需要你明确指定依赖的变量，才能做到监听效果。

• 而 watchEffect 会根据你使用的变量，自动的实现监听效果。

1）直接使用 watch

// Vue2 的写法

// Vue3 的写法

2）使用 watchEffect

// Vue2 的写法

// Vue3 的写法

7、生命周期

Vue3 里，除了将两个 destroy 相关的钩子，改成了 unmount，剩下的需要注意的，就是在 

// 组合式 api 写法

三、结语

好了，对于快速上手 Vue3 来说，以上内容基本已经足够了。

这篇文章本身不能做到帮你理解所有 Vue3 的内容，但是能帮你快速掌握 Vue3 的写法。

 

如果想做到对 Vue3 的整个内容心里有数，还需要你自己多看看 Vue3 的官方文档。