一种单页面应用框架Vue组件的转换方法及装置与流程

一种单页面应用框架vue组件的转换方法及装置
技术领域
1.本技术涉及计算机技术领域，特别涉及一种单页面应用框架vue组件的转换方法及装置。


背景技术：

2.vue是一套用于构建用户界面的渐进式javascript框架，也可以称为单页面应用框架，通过编写vue组件，能够为复杂的单页面应用提供驱动。在2.0版本的vue2组件中，是将各功能逻辑的代码存放在同一个vue组件中。然而对于中大型项目来说，由于业务逻辑比较复杂，会编写多个功能的逻辑，当把多个功能逻辑的代码放在同一个vue组件中时，随着项目代码的不断迭代，会造成代码结构混乱，变量定义分布凌乱，索引变量困难，导致后期维护和更新成本非常高。由此单页面应用框架vue推出了最新的3.0版本，其中就涉及了一个最为重要的高级语法特性：组合式api。组合式api能够解决目前vue2组件存在的、代码结构混乱、变量定义分布凌乱、索引变量困难的问题。因此对于大型项目，就需要将已有的vue2组件转换成3.0版本的vue3组件。
3.但是现有的转换方法都是由人工来进行操作的，因此就需要开发人员熟练掌握vue3.0组合式api的语法，并且需要重新梳理当前代码的业务逻辑，还需要开发人员重新对语法进行改造，并重新进行测试，因此转换效率较低。


技术实现要素：

4.有鉴于此，本发明提供了一种单页面应用框架vue组件的转换方法、装置以及存储介质，主要目的在于解决目前存在的在将低版本的vue组件转换成高版本的vue组件时转换效率低的问题。
5.为解决上述问题，本技术提供一种单页面应用框架vue组件的转换方法，包括：
6.获取待转换的第一vue组件；
7.获取所述第一vue组件中的各目标对象；
8.为所述第一vue组件添加目标方法；
9.基于所述目标方法对各所述目标对象对应的目标变量进行定义，获得各定义语句，以将所述第一vue组件转换为第二vue组件，其中所述第一vue组件的版本低于所述第二vue组件的版本。
10.可选的，所述获取第一vue组件中的各目标对象，具体包括：
11.基于对象关键字从所述第一vue组件中获取各目标对象；
12.所述对象关键字包括如下任意一种或几种：data和state。
13.可选的，所述为所述第一vue组件添加目标方法，具体包括：
14.基于预定的语法将目标方法添加至目标标签对应的代码块中；
15.所述目标方法包括如下任意一种或几种：ref、reactive、toref、torefs。
16.可选的，在所述基于所述目标方法对各目标对象对应的目标变量进行定义之前，
所述方法还包括：从所述目标对象中的各变量中确定出各所述目标变量；
17.所述从所述目标对象的各变量中确定出各所述目标变量，具体包括：
18.获取所述目标对象中各变量的key值；
19.基于各所述变量的key值判断各所述变量的类型，在确定所述变量的类型为响应式类型的情况下，确定所述变量为目标变量。
20.可选的，所述基于所述目标方法对各目标对象对应的目标变量进行定义，具体包括：
21.获取所述目标变量的初始值；
22.确定所述初始值的数据类型；
23.采用与所述数据类型对应的目标方法对所述目标变量进行定义；
24.其中，所述数据类型包括如下任意一种：数字类型、字符串类型和数组类型。
25.可选的，所述方法还包括：
26.根据生命周期函数关键字与转换方式之间的映射关系，确定第一vue组件中原始生命周期函数所对应的目标转换方式；
27.基于所述目标转换方式将所述第一vue组件中的原始生命周期函数转换为目标生命周期函数。
28.可选的，所述方法还包括：
29.基于变量修改语句关键字从所述第一vue组件中获取原始变量修改语句；
30.将所述原始变量修改语句转换为目标变量修改语句。
31.为解决上述技术问题，本技术提供一种单页面应用框架vue组件的转换装置，包括：
32.第一获取模块，用于获取待转换的第一vue组件；
33.第二获取模块，用于获取第一vue组件中的各目标对象；
34.添加模块，用于为所述第一vue组件添加目标方法；
35.转换模块，用于基于所述目标方法对各所述目标对象对应的目标变量进行定义，获得各定义语句，以将所述第一vue组件转换为第二vue组件；其中，所述第一vue组件的版本低于所述第二vue组件的版本。
36.为解决上述技术问题，本技术提供一种存储介质，所述存储介质存储有计算机程序，所述计算机程序被处理器执行时实现上述任一项所述单页面应用框架vue组件的转换方法的步骤。
37.为解决上述技术问题，本技术提供一种电子设备，至少包括存储器、处理器，所述存储器上存储有计算机程序，所述处理器在执行所述存储器上的计算机程序时实现上述任一项所述单页面应用框架vue组件的转换方法的步骤。
38.本技术中的方法，通过获取第一vue组件中的目标对象，并对第一vue组件添加目标方法，然后利用目标方法对目标对象中的变量进行重新定义，由此能够获得转换后的各定义语句，从而获得转换后的第二vue组件，实现了将低版本的vue组件转换成高版本的vue组件，提高了转换效率，并且保证了转换的准确率。
39.上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，而可依照说明书的内容予以实施，并且为了让本发明的上述和其它目的、特征和优点能够
更明显易懂，以下特举本发明的具体实施方式。
附图说明
40.通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本发明的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：
41.图1为本技术实施例一种vue组件转换方法的流程图；
42.图2为本技术又一实施例一种vue组件转换方法的方法流程图；
43.图3为本技术又一实施例一种vue组件转换装置的结构框图；
44.图4为本技术另一实施例一种电子设备的结构框图。
具体实施方式
45.此处参考附图描述本技术的各种方案以及特征。
46.应理解的是，可以对此处申请的实施例做出各种修改。因此，上述说明书不应该视为限制，而仅是作为实施例的范例。本领域的技术人员将想到在本技术的范围和精神内的其他修改。
47.包含在说明书中并构成说明书的一部分的附图示出了本技术的实施例，并且与上面给出的对本技术的大致描述以及下面给出的对实施例的详细描述一起用于解释本技术的原理。
48.通过下面参照附图对给定为非限制性实例的实施例的优选形式的描述，本技术的这些和其它特性将会变得显而易见。
49.还应当理解，尽管已经参照一些具体实例对本技术进行了描述，但本领域技术人员能够确定地实现本技术的很多其它等效形式。
50.当结合附图时，鉴于以下详细说明，本技术的上述和其他方面、特征和优势将变得更为显而易见。
51.此后参照附图描述本技术的具体实施例；然而，应当理解，所申请的实施例仅仅是本技术的实例，其可采用多种方式实施。熟知和/或重复的功能和结构并未详细描述以避免不必要或多余的细节使得本技术模糊不清。因此，本文所申请的具体的结构性和功能性细节并非意在限定，而是仅仅作为权利要求的基础和代表性基础用于教导本领域技术人员以实质上任意合适的详细结构多样地使用本技术。
52.本说明书可使用词组“在一种实施例中”、“在另一个实施例中”、“在又一实施例中”或“在其他实施例中”，其均可指代根据本技术的相同或不同实施例中的一个或多个。
53.本技术实施例提供一种单页面应用框架vue组件的转换方法，具体可以应用于将第一vue组件转换成第二vue组件，即将vue2组件转换成vue3组件的过程中，如图1所示，本实施例中的方法包括如下步骤：
54.步骤s101，获取待转换的第一vue组件；
55.本步骤在具体实施过程中，具体可以基于预先配置的目标地址，根据目标地址来获取待转换的第一vue组件，其中第一vue组件具体可以是版本为2.0的vue2组件。或者步骤中还可以基于预设的文件关键字查找项目根目录下的各文件名称/组件名称，以获取所述
待转换的vue2组件。例如根据“.vue”关键字检索项目根目录下，所有以“.vue”结尾的文件名称/组件名称，以此来获得待转换的第一vue组件，即获得待转换vue2组件。
56.本步骤在具体实施过程中，在获取待转换的vue2组件之前，还可以先确定当前vue框架的版本是否达到预设版本的要求，在符合预设版本要求的情况下，再获取待转换的vue2组件，为后续顺利的对vue2组件进行转换奠定了基础。
57.步骤s102，获取第一vue组件中的各目标对象；
58.本步骤在具体实施过程中，具体可以根据对象关键字来从第一vue组件/vue2组件中查找获得目标对象，例如对象关键字可以为“data”和“state”，即根据“data”关键字确定出data对象，或者根据“state”来获得state对象，以此来获得目标对象。
59.步骤s103，为所述第一vue组件添加目标方法；
60.本步骤在具体实施过程中，由于3.0版本的vue3组件中的组合式api需要用到ref、reactive、toref、torefs方法，以支持将变量转换为响应式变量，由此需要将上述这些目标方法添加至待转换的第一vue组件/vue2组件中。在添加目标方法时，具体可以利用“import”将目标方法添加至待转换的vue2组件中。
61.步骤s104，基于所述目标方法对各所述目标对象对应的目标变量进行定义，获得各定义语句，以将所述第一vue组件转换为第二vue组件，其中第一vue组件的版本低于所述第二vue组件的版本。
62.本步骤中第二vue组件具体可以是版本为3.0的vue3组件。在对待转换的vue2组件添加了目标方法后，就可以利用添加的目标方法对目标对象中的目标变量进行重新定义，其中目标变量是指变量类型为响应式类型的变量。因为在vue3组件中，组合式api抛弃了原有的vue2组件中data对象定义的方式，采用哪里使用，就哪里定义和变更的原则，使得单个功能的代码逻辑得以聚合在一起，更利于阅读和维护，由此需要对待转换的vue2组件中的变量重新进行定义。
63.本实施例中的方法，本实施例中的方法，通过获取第一vue组件中的目标对象，并对第一vue组件添加目标方法，然后利用目标方法对目标对象中的变量进行重新定义，由此能够获得转换后的各定义语句，从而获得转换后的第二vue组件，实现了将低版本的vue2组件转换成高版本的vue3组件，提高了转换效率，并且保证了转换的准确率。
64.在上述实施例的基础上，本技术又一实施例提供一种单页面应用框架vue组件的转换方法，如图2所示，包括如下步骤：
65.步骤s201，判断vue框架的版本是否满足预设条件，在所述vue框架的版本满足预设条件的情况下，获取待转换的第一vue组件；
66.本步骤中，所述预设条件可以为预定的版本阈值。由于是需要将第一vue转换成第二vue组件，即将vue2组件转换成vue3组件，因此vue框架的版本需要满足vue3版本的需求，即vue框架的版本要高于或等于vue3.0版本。
67.在具体实施过程中，在对vue框架的版本进行判断时，具体可以通过查找项目中的package.json文件，以搜索dependencies对象中的vue键值，根据搜索获得的vue键值与预定的版本阈值来确定vue框架的版本是否满足条件，即当搜索的vue键值高于或等于预定的版本阈值vue3.0的情况下，说明其满足预设条件，可以进行vue组件的转换；当搜索的vue键值高于或等于预定的版本阈值vue3.0的情况下，说明其不满足预设条件，不可以进行vue组
件的转换。在具体实施过程中，例如搜索获得的键值为3.0.4，则可以取第一位数字，然后根据第一为数字与预定阈值进行比较，如第一位数字大于或等于3，则判断项目中vue框架的版本是可以支持的。如果当前项目vue版本低于3，由于vue3版本是可以完全支持vue2老语法代码的，所以插件执行命令，npm install vue3-d，将项目中的vue版本升级到vue3的版本。
68.步骤s202，基于对象关键字从所述第一vue组件中获取各目标对象；
69.本步骤在具体实施过程中，对象关键字可以为“data”和“state”，即根据“data”关键字来从vue组件中获取到data对象，或者根据“state”来获得state对象，以此来获得目标对象。
70.步骤s203，基于预定的语法将目标方法添加至script标签对应的代码块中；所述目标方法包括如下任意一种或几种：ref、reactive、toref、torefs；
71.本步骤在具体实施过程中，所述预定方法具体可以为“import”方法，即利用语法import{ref,toref,torefs,reactive}from'vue'，来将目标方法引入/添加到单个组件中。由此实现将目标方法引入/添加到待转换的vue2组件中。
72.步骤s204，基于所述目标方法对各所述目标对象对应的目标变量进行定义，获得各定义语句；
73.本步骤在具体实施过程中，由于组合式api抛弃了原有的vue2组件中data对象定义的方式，采用哪里使用，就哪里定义和变更的原则，使得单个功能的代码逻辑得以聚合在一起，更利于阅读和维护，因此需要对vue2组件中的目标变量进行重新定义。
74.在具体实施过程中，在对目标变量进行定义之前，需要先从所述目标对象中获取各目标变量，具体获取过程为：获取所述目标对象中各变量的key值；基于各所述变量的key值判断各所述变量的类型，在确定所述变量的类型为响应式类型的情况下，确定所述变量为目标变量。即本步骤中在对变量进行重新定义时，具体是对响应式变量进行重新定义的。即通过获取变量key值，根据变量key值来确定变量类型，进而根据变量类型来确定出目标变量，由此能够准确的确定出需要进行定义的目标变量，为后续对该目标变量进行重新定义奠定了基础。
75.本步骤中，在确定出目标变量后，即在setup函数中，对每一个找到的响应式变量，进行如下处理，以对其进行重新定义：
76.(1)通过在data对象中，查找到对应变量值，作为响应式变量的初始值。
77.(2)通过const关键字，重新申明该变量。并通过typeof方法确定初始值的数据类型。当数据类型为数字、字符串时，通过步骤s203中引入/添加的目标方法ref方法，进行响应式数据的定义，获得定义语句。当数据类型为对象、数组时，通过步骤s203中引入/添加的reactive方法，进行响应式数据的定义，获得定义语句。
78.对于一些大型的项目，由于还会使用到vuex进行数据管理，此时原组件的响应式变量，不仅仅可以来源于data对象中，还可以来自于vuex的state对象中。因此可以对vue2组件中的stata对象进行提取，在对stata对象进行提取时，具体方式为：在computed函数中，通过return方法中的this.$store.state.变量名进行获取。当原vue2组件中存在这类变量的获取方式时，则需要进行额外的变量提取操作，如下：
79.(1)通过语法import{usestore}from'vuex'，将vue3组件中组合式api使用vuex中
定义数据的方法usestore引入到组件中。
80.(2)通过语法const store＝usestore()，获取到vuex定义的所有全局变量。
81.(3)通过步骤s203中添加的目标方法torefs方法，将store变量中的state对象，直接转换为响应式对象。转换后的对象，可以在setup函数内部任意调用。
82.本步骤中，在完成对目标变量的定义之后，最后还可以通过return关键字将定义好的变量，通过一个对象包裹的形式，放入对象内，对外部函数、模板开放使用。
83.本步骤中，通过采用上述转换方法，就可以将原本在data对象中定义的响应式变量，转换为定义到setup函数中，做到了变量和代码的聚合，变更后的代码可维护性以及可阅读性更强。
84.步骤s205，根据生命周期函数关键字与转换方式之间的映射关系，确定第一vue组件中原始生命周期函数所对应的目标转换方式；基于所述目标转换方式将所述第一vue组件中的原始生命周期函数转换为目标生命周期函数。
85.本步骤中，生命周期关键字包括如下任意一种或几种：beforecreate、create、beforemount、mouted、beforeupdate、update、beforedestroy、destroyed。由于vue3.0重新定义了生命周期函数的名称，所以在对vue2组件中的原始生命周期函数进行转换之前，需要预先将新生命周期函数引入，具体可以通过语法import{onbeforemount,onmounted,onbeforeupdate,onupdated,onbeforeunmount,onunmounted}from'vue'，引入到单个组件中。然后在查找到上述任意关键字后就可以通过生命周期函数关键字与转换方式的映射关系来确定目标转换方式；其中生命周期函数关键字与转换方式的映射关系具体包括：
86.(1)当生命周期函数关键为beforecreate时，对应的转换方式为：将beforecreate函数替换为setup函数；
87.当生命周期函数关键为create时，对应的转换方式为：将create函数替换为setup函数。
88.具体的，由于beforecreate、created这两个vue2的生命周期函数，在vue3框架中已经被废弃，取而代之的是setup函数。因此可以依次将beforecreate、created代码块内的代码剪切，按照原始的顺序，迁移到setup函数内部的最开始位置，以此实现对原始生命周期函数beforecreate或created的转换。
89.(2)当生命周期函数关键为beforemount时，对应的转换方式为：将beforemount函数替换为onbeforemount函数。
90.当生命周期函数关键字为mouted时，对应的转换方式为：将mouted函数替换为onmounted函数。
91.当生命周期函数关键字为beforeupdate时，对应的转换方式为：将beforeupdate函数替换为onbeforeupdate函数。
92.当生命周期函数关键字为update时，对应的转换方式为：将update函数替换为onupdate函数。
93.当生命周期函数关键字为beforedestroy时，对应的转换方式为：将beforedestroy函数替换为onbeforeunmount函数。
94.当生命周期函数关键字为destroyed时，对应的转换方式为：将destroyed函数替换为onunmountd函数。
95.本步骤中，当对利用目标转换方式将原始生命周期函数转换为目标生命周期函数后，就可以将onbeforemount函数、onmounted函数、onbeforeupdate函数、onupdated函数、onbeforeunmount函数、onunmounted函数移动至setup函数内。
96.本步骤中上述所列举的生命周期函数，并非所有vue组件都会全部用到。如果原vue组件并未使用到，会秉持了按需加载，减少vue文件大小的原则，反向将import语法引入的无用的生命周期函数剔除，以使得转换获得的vue3组件根据准确。
97.步骤s206，基于变量修改语句关键字从所述第一vue组件中获取原始变量修改语句；将所述原始变量修改语句转换为目标变量修改语句。
98.本步骤中，由于组合式api修改变量不同于以往的直接通过“this.data.xxx＝新变量值”，这种方式进行修改，因此需要对变量修改语句进行转换。在具体转换时，可以先根据关键字“this.data”来获取到待转换的变量修改语句，然后将待转换的变量修改语音“this.data.xxx＝新变量值”转换为“.value＝新变量值”，即获得目标变量修改语句。
99.步骤s207，将各定义语句进行导出，获得最终的目标第二vue组件。
100.本步骤中对于需要在template模板中通过插值表达式使用的场景，需要将定义的响应式变量/定义语句进行导出操作。这时候分为两种场景：一种是对于原始数据类型的数据，直接在返回出去的对象中，导出对应的变量名即可。另一种场景是对于reactive定义的引用数据的类型的数据，由于组合式api语法相比vue2组件语法，在template模板上使用变量，会多一层上级对象的引用。为了保证与原本的template语法保持一致，做到不修改原有的template模板语法，需要在所有导出的引用数据类型的变量中，通过torefs方法将其对象内部的所有值都转换为响应式数据。
101.本实施例中，通过采用上述步骤就能顺利的将原本vue2组件转换为vue3组件，即将vue2组件语法自动转换为vue3的组合式api语法。
102.本实施例中的vue组件转换方法，开发者不需要再深入了解vue3组合式api的语法、以及梳理原有的业务逻等繁琐流程，可以实现自动将vue2组件语法升级到vue3组合式api语法，提高了转换速率。并且还可以很大程度的避免人为转换过程中，由于失误导致的代码异常的问题，同时，测试人员也无需对有改动的组件进行深度测试，节省了大量的人力投入成本。由于vue3组合式api是通过按需引入的方式，在项目转换过后，还可以使得最终打包上线的页面，加载速度达到了一定的提升。
103.本技术又一实施例提供一种单页面应用框架vue组件的转换装置，如图3所示，包括：
104.第一获取模块1，用于获取待转换的第一vue组件；
105.第二获取模块2，用于获取第一vue组件中的各目标对象；
106.添加模块3，用于为所述第一vue组件添加目标方法；
107.转换模块4，用于基于所述目标方法对各所述目标对象对应的目标变量进行定义，获得各定义语句，以将所述第一vue组件转换为第二vue组件；其中所述第一vue组件的版本低于所述第二vue组件的版本。
108.本实施例在具体实施过程中，所述第一获取模块具体用于：基于配置的目标地址，获取所述待转换的第一vue组件；或者，基于预设的文件关键字查找项目根目录下的各文件名称，以获取所述待转换的第一vue组件。
109.具体的，所述第二获取模块具体用于：基于对象关键字从所述第一vue组件中获取各目标对象；
110.所述对象关键字包括如下任意一种或几种：data和state。
111.本实施例中，所述添加模块具体用于：基于预定的语法将目标方法添加至目标标签对应的代码块中；所述目标方法包括如下任意一种或几种：ref、reactive、toref、torefs。
112.本实施例中的vue组件转换装置，还包括用于从所述目标对象的各第一变量中确定出各所述目标变量确定模块，所述确定模块具体用于：获取所述目标对象中各变量的key值；基于各所述变量的key值判断各所述变量的类型，在确定所述变量的类型为响应式类型的情况下，确定所述变量为目标变量。
113.本实施中，所述转换模块具体用：获取所述目标变量的初始值；确定所述初始值的数据类型；采用与所述数据类型对应的目标方法对所述目标变量进行定义；其中，所述数据类型包括如下任意一种：数字类型、字符串类型和数组类型。
114.所述转换模块还用于：根据生命周期函数关键字与转换方式之间的映射关系，确定第一vue组件中原始生命周期函数所对应的目标转换方式；基于所述目标转换方式将所述第一vue组件中的原始生命周期函数转换为目标生命周期函数。
115.本实施中，转换模块还用于：基于变量修改语句关键字从所述第一vue组件中获取原始变量修改语句；将所述原始变量修改语句转换为目标变量修改语句。
116.本实施例中的vue组件转换装置，开发者不需要再深入了解vue3组合式api的语法、以及梳理原有的业务逻等繁琐流程，可以实现自动将vue2组件语法升级到vue3组合式api语法，提高了转换速率。并且还可以很大程度的避免人为转换过程中，由于失误导致的代码异常的问题，同时，测试人员也无需对有改动的组件进行深度测试，节省了大量的人力投入成本。
117.由于vue3组合式api是通过按需引入的方式，在项目转换过后，还可以使得最终打包上线的页面，加载速度达到了一定的提升。
118.本技术另一实施例提供一种存储介质，所述存储介质存储有计算机程序，所述计算机程序被处理器执行时实现如下方法的步骤：
119.步骤一、获取待转换的第一vue组件；
120.步骤二、获取所述第一vue组件中的各目标对象；
121.步骤三、为所述第一vue组件添加目标方法；
122.步骤四、基于所述目标方法对各所述目标对象对应的目标变量进行定义，获得各定义语句，以将所述第一vue组件转换为第二vue组件，其中所述第一vue组件的版本低于所述第二vue组件的版本。
123.上述方法步骤的具体实施过程可参见上述任一单页面应用框架vue组件转换方法的实施例，本实施例在此不再重复赘述。
124.本实施例中，通过获取第一vue组件中的目标对象，并对第一vue组件添加目标方法，然后利用目标方法对目标对象中的变量进行重新定义，由此能够获得转换后的各定义语句，从而获得转换后的第二vue组件，实现了将低版本的vue组件转换成高版本的vue组件，提高了转换效率，并且保证了转换的准确率。
125.本技术另一实施例提供一种电子设备，如图4所示，至少包括存储器1、处理器2，所述存储器1上存储有计算机程序，所述处理器2在执行所述存储器1上的计算机程序时实现如下方法步骤：
126.步骤一、获取待转换的第一vue组件；
127.步骤二、获取所述第一vue组件中的各目标对象；
128.步骤三、为所述第一vue组件添加目标方法；
129.步骤四、基于所述目标方法对各所述目标对象对应的目标变量进行定义，获得各定义语句，以将所述第一vue组件转换为第二vue组件，其中所述第一vue组件的版本低于所述第二vue组件的版本
130.上述方法步骤的具体实施过程可参见上述任意单页面应用框架vue组件转换方法的实施例，本实施例在此不再重复赘述。
131.本实施例中通过获取第一vue组件中的目标对象，并对第一vue组件添加目标方法，然后利用目标方法对目标对象中的变量进行重新定义，由此能够获得转换后的各定义语句，从而获得转换后的第二vue组件，实现了将低版本的vue组件转换成高版本的vue组件，提高了转换效率，并且保证了转换的准确率。
132.以上实施例仅为本技术的示例性实施例，不用于限制本技术，本技术的保护范围由权利要求书限定。本领域技术人员可以在本技术的实质和保护范围内，对本技术做出各种修改或等同替换，这种修改或等同替换也应视为落在本技术的保护范围内。