对于Vue3和Ts的心得和思考

作者：京东物流 吴云阔

1 前言

Vue3已经正式发布了一段时间了，各种生态已经成熟。最近使用taro+vue3重构冷链的小程序，经过了一段时间的开发和使用，有了一些自己的思考。

总的来说，Vue3无论是在底层原理还是在实际开发过程中，都有了很大的进步。

从源码层面来说，使用Proxy代替Object.defineProperty的API，一个是代理的对象，一个是递归监控的属性，从而在性能上有了很大的进步，并且，也解决了对象动态属性增加、数组改变监听上的缺陷；对diff算法进行优化，增加了静态标记，大大提高了Vue的执行效率；还有静态提升、事件监听缓存等一系列提升效率的手段。

从应用层面来说，主要的改变是将option API改成了composition API（组合式API），在业务中抛弃data、methods、生命周期函数隔离开的开发方式，使代码相对于业务有更强的聚合性，在代码开发、代码阅读、代码维护方面对于开发者都是更加友好。

对于typescript有了更好的支持，我们知道，对于大型的前端项目来说，使用typescript的类型校验，能使前端项目有更强的健壮性，这也使得Vue3对于大型项目的开发提供了更强的质量保证。

2 组合式API

所谓的组合式API，将Vue2中的data、methods、生命周期、数据监听等option，都封装成钩子函数，然后组合到setup函数中，其核心就在于setup函数。setup函数存在的意义，就是为了使用这些新增的组合式API，并且这些API只能在setup函数中使用。

setup函数执行的时机是，props初始化之后，beforeCreate函数执行之前，所以在执行setup时，还没有初始化Vue实例，因此在setup中不能使用this对象。setup函数的返回值会被注入到Vue实例中，供Vue组件使用，所以任何数据想在Vue组件的模板中使用，必须在setup函数中return出去。

组合式API的组合，体现在两个层面。第一层的意思是，将某一业务相关数据和处理逻辑放到一起，这是一种关注点的聚合，更方便我们编写代码、处理业务逻辑，并且能更聚焦业务逻辑，更方便我们看代码。第二层面的意思，当某个组件的业务逻辑足够复杂，setup中的代码足够大的情况下，我们可以在setup内部，进一步提取相关的一块业务，使代码逻辑更加清晰，做到了进一步的聚合作用。

如下面代码所示，将业务代码块A抽出来，则代码块A中return出来的数据就可以在组件中使用：

1. // 组件
2. import functionA from 'A'
3. export default defineComponent({
4. name: 'componentName',
5. setup() {
6. ...functionA()
7. }
8. })

1. // 代码块A
2. export default () => {
3. return {
4. a: 1
5. }
6. }

3 响应式API

在Vue3中响应式API，主要体现在ref和reactive两个函数。对于响应式API，想说两个问题，第一个是为什么要增加响应式API，第二个是响应式API函数ref和reactive的异同点。

3.1 为什么增加响应式API

在Vue2中所有数据都写在data的option中，data中的数据都是响应式的，这样产生的一个问题是，有些常量数据本身不需要监听，从而造成了资源的浪费。所以在Vue3中增加了响应式API，只需要对需要动态更新dom的数据进行响应式，不需要动态更新dom的数据不进行响应式处理，从很大程度上节省了资源。这里我觉得需要注意的是，写代码的时候一定要仔细思考一下，哪些数据需要进行响应式绑定，哪些数据不需要进行响应式绑定，而不是一股脑的全给绑定上，这样即使代码逻辑不能很清晰易懂，并且也会影响执行效率（写惯了Vue2的同学需要注意）。

3.2 ref和reactive的异同点

在了解了为什么要增加响应式API后，我们发现Vue3提供了两个响应式API函数，ref和reactive。为什么会提供两个API呢？ 一个不就可以了吗？那么这两个API之间的区别是什么呢？

在使用层面，ref绑定的数据，需要使用[data].value进行数据更改。而reactive绑定的数据需要使用[data].[prpoerty]的方式进行数据更改。在使用场景方面，一般的，单个的普通数据，我们使用ref来定义响应式。而复杂数据，如：表单数据对象、某一模块的一组数据等，使用reactive来定义响应式。

那么，对象是不是必须用reactive来定义呢？ 其实不是的，都可以。官方说法是：可以根据自身习惯使用不同的API。其实，我觉得，他们是有各自的使用场景的，ref更强调的是数据Value的改变，reactive更强调的是数据中某一属性的改变。

4 treeShaking思想

当 Javascript 项目达到一定体积时，将代码分成模块会更易于管理。但是，当这样做时，我们最终可能会导入实际上未使用的代码。Tree Shaking 是一种通过消除最终文件中未使用的代码来优化体积的方法。

Vue3使用了tree shaking的方法，将组件以及其所有的生命周期函数等方法进行分开，如果在组件中使用的代码将不会出现在最终的打包文件中，如此，会减少大大Vue3项目的打包体积。由此造成的一个结果就是，使用方法的不同。

4.1 生命周期函数的使用方法

1. import { defineComponent, ref, onMounted } from 'vue';
2. export default defineComponent({
3. name: 'Gift',
4. setup() {
5. const counter = ref(0);
6. onMounted(() => {
7. // 处理业务，一般进行数据请求
8. })
9. return {
10. counter
11. }
12. }
13. })

4.2 Vuex的使用方法

1. import { useStore } from "vuex";
2. import { defineComponent, ref, computed } from 'vue';
3. export default defineComponent({
4. name: 'Gift',
5. setup() {
6. const counter = ref(0);
7. const store = useStore();
8. const storeData = computed(() => store); // 配合computed，获取store的值。
9. return {
10. counter,
11. storeData
12. }
13. }
14. })

4.3 Router的使用方法

1. import { useStore } from "vuex";
2. import { useRouter } from "vue-router";
3. import { defineComponent, ref, computed } from 'vue';
4. export default defineComponent({
5. name: 'Gift',
6. setup() {
7. const counter = ref(0);
8. const router = useRouter();
9. const onClick = () => {
10. router.push({ name: "AddGift" });
11. }
12. return {
13. counter,
14. onClick
15. }
16. }
17. })

5 关于Typescript的使用

这一部分是关于Ts的内容，不过它与Vue3的开发息息相关。Vue3整体是使用Ts写的，因此，开发Vue3的项目需要使用Ts，所以，我们还是要了解TS的。

关于Ts的使用这里就不在细说了，在这里想说的的是，在实际业务场景中是如何组织Ts代码的。通过对TS的大量使用，我的一个体会是：Ts的核心思维是先关注数据结构，在根据数据结构进行页面开发。而以前的前端开发模式是，先写页面，然后再关注数据。

比如说，我们要开发一个页面，我们可能需要先定义一些interface。开发页面的时候我们要关注：页面数据的interface、接口返回数据的类型、请求参数的类型等等。

下面是开发一个列表页面的例子：

1. // 这是列表中每一项的数据类型
2. interface IDataItem {
3. id: string | number;
4. name: string;
5. desc: string;
6. [key: string]: any;
7. }
8.  
9. // 接口返回值类型， 一般来说，我们不确定接口返回的数据的类型，因此使用泛型
10. interface IRes<T> {
11. code: number;
12. msg: string;
13. data: T
14. }
15.  
16. // 口返回数据类型定义
17. interface IDataInfo {
18. list: Array<IDataItem>;
19. pageNum: number;
20. pageSize: number;
21. total: number;
22. }
23.  
24. // 请求
25. export const getDatalist = (
26. params: Record<string, any>
27. ): Promise<IRes<IDataInfo>> => {
28. return Http.get("/api/data/list", params);
29. };

如上面代码，当我们的interface定义完成后，我们的页面数据基本都已清楚，直接写页面就会清晰很多，且出错概率会大大降低。