短信预约-IT技能 免费直播动态提醒

2024-11-30 10:36

关注

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

a、ref 和 reactive

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

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

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

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

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

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

c、不要解构使用

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

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

// Vue3 的写法

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

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

2、methods

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

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

// Vue2 的写法






// Vue3 的写法

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 写法