对于Vue3和Ts的心得和思考

京东云开发者
• 阅读 347

作者:京东物流 吴云阔

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. })

  9. // 代码块A

  10. export default () => {

  11. return {

  12. a: 1

  13. }

  14. }

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. interface IRes<T> {

  10. code: number;

  11. msg: string;

  12. data: T

  13. }

  14. // 口返回数据类型定义

  15. interface IDataInfo {

  16. list: Array<IDataItem>;

  17. pageNum: number;

  18. pageSize: number;

  19. total: number;

  20. }

  21. // 请求

  22. export const getDatalist = (

  23. params: Record<string, any>

  24. ): Promise<IRes<IDataInfo>> => {

  25. return Http.get("/api/data/list", params);

  26. };

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

点赞
收藏
评论区
推荐文章
Wesley13 Wesley13
3年前
PPDB:今晚老齐直播
【今晚老齐直播】今晚(本周三晚)20:0021:00小白开始“用”飞桨(https://www.oschina.net/action/visit/ad?id1185)由PPDE(飞桨(https://www.oschina.net/action/visit/ad?id1185)开发者专家计划)成员老齐,为深度学习小白指点迷津。
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Wesley13 Wesley13
3年前
FLV文件格式
1.        FLV文件对齐方式FLV文件以大端对齐方式存放多字节整型。如存放数字无符号16位的数字300(0x012C),那么在FLV文件中存放的顺序是:|0x01|0x2C|。如果是无符号32位数字300(0x0000012C),那么在FLV文件中的存放顺序是:|0x00|0x00|0x00|0x01|0x2C。2.  
Easter79 Easter79
3年前
Twitter的分布式自增ID算法snowflake (Java版)
概述分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的。有些时候我们希望能使用一种简单一些的ID,并且希望ID能够按照时间有序生成。而twitter的snowflake解决了这种需求,最初Twitter把存储系统从MySQL迁移
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
3年前
PHP创建多级树型结构
<!lang:php<?php$areaarray(array('id'1,'pid'0,'name''中国'),array('id'5,'pid'0,'name''美国'),array('id'2,'pid'1,'name''吉林'),array('id'4,'pid'2,'n
Wesley13 Wesley13
3年前
Java日期时间API系列36
  十二时辰,古代劳动人民把一昼夜划分成十二个时段,每一个时段叫一个时辰。二十四小时和十二时辰对照表:时辰时间24时制子时深夜11:00凌晨01:0023:0001:00丑时上午01:00上午03:0001:0003:00寅时上午03:00上午0
Stella981 Stella981
3年前
Linux日志安全分析技巧
0x00前言我正在整理一个项目,收集和汇总了一些应急响应案例(不断更新中)。GitHub地址:https://github.com/Bypass007/EmergencyResponseNotes本文主要介绍Linux日志分析的技巧,更多详细信息请访问Github地址,欢迎Star。0x01日志简介Lin
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
手把手带你初探Vue 3.0 | 京东物流技术团队
距离Vue3.0正式发布已经过去一段时间了,2月7日Vue团队正式宣布Vue3正式成为新的默认版本。最近接触的新项目也使用Vue3.0来开发,因此有必要对它进行一波总结和学习。