vue3的一些注意事项

 

一、Vue3 里 script 的三种写法

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

1、最基本的 Vue2 写法

 html复制代码
 ​
 

2、setup() 属性

 xml复制代码
 ​
 

3、

正如你看到的那样，无论是代码行数，还是代码的精简度， xml复制代码 // 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 的写法
 
 ​
 
 xml复制代码// Vue3 的写法
 
 ​
 

3、props

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

1）写法对比

 xml复制代码// Vue2 的写法
 
 ​
 
 xml复制代码// Vue3 的写法
 
 ​
 

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

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

 xml复制代码

4、emits 事件

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

 xml复制代码// Vue2 的写法
 
 ​
 
 xml复制代码// Vue3 的写法
 
 ​
 

5、computed

直接上写法对比。

 xml复制代码// Vue2 的写法
 
 ​
 
 xml复制代码// Vue3 的写法
 
 ​
 

6、watch

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

两种写法的区别是：

• watch 需要你明确指定依赖的变量，才能做到监听效果。
• 而 watchEffect 会根据你使用的变量，自动的实现监听效果。

1）直接使用 watch

 xml复制代码// Vue2 的写法
 
 ​
 
 xml复制代码// Vue3 的写法
 
 ​
 

#### 2）使用 watchEffect

 xml复制代码// Vue2 的写法
 
 ​
 
 xml复制代码// Vue3 的写法
 
 ​
 

7、生命周期

Vue3 里，除了将两个 destroy 相关的钩子，改成了 unmount，剩下的需要注意的，就是在 xml复制代码// 组合式 api 写法 ​ ​