生成混入对象的方法、装置、计算设备及计算机可读存储介质

技术领域

本申请涉及计算机技术领域，尤其涉及到一种生成混入对象的方法、装置、计算设备及计算机可读存储介质。

背景技术

Vue是一套用于构建用户界面的渐进式JavaScript框架。目前，Vue提供了一种混入(mixin)方式来分发Vue组件中可复用的功能。

然而，mixin的使用具有一定的障碍，需要开发者进行一定的学习，熟悉相关语法，分析代码的现有逻辑，而且人为使用mixin功能进行代码转换容易出错。如何简单方便地使用Vue框架提供的mixin功能，提升代码的复用率，成为亟待解决的问题。

发明内容

本申请实施例提供一种生成混入对象的方法、装置、计算设备和计算机可读存储介质，能够快速从多个Vue组件中抽取出公共的混入对象，降低了Vue的mixin功能的使用难度，进而提升了用户的开发效率，同时能够优化Vue框架代码，提升代码的复用率。

第一方面，本申请提供了一种生成混入对象的方法，该方法包括：获取Vue项目的目录地址，将目录地址下的每个Vue组件分别转换为抽象语法树；遍历每个Vue组件对应的抽象语法树，根据函数名和函数代码获取包括第一函数的多个Vue组件，得到第一组件集合，其中，多个Vue组件中的第一函数的函数名和函数代码相同；获取第一函数关联的变量，将第一函数关联的变量写入混入对象的数据选项中，以及将第一函数写入所述混入对象的方法选项中；删除第一组件集合中每个Vue组件中的第一函数，将混入对象分别引入第一组件集合中的每个Vue组件。

需要说明的是，本申请所述的Vue项目指的是能够从中提取混入对象的已创建的Vue项目，Vue项目中包括多个Vue组件。

第二方面，本申请实施例提供了一种生成混入对象的装置，该装置包括：获取模块，用于获取Vue项目的目录地址，将目录地址下的每个Vue组件分别转换为抽象语法树；处理模块，用于遍历每个Vue组件对应的抽象语法树，根据函数名和函数代码获取包括第一函数的多个Vue组件，得到第一组件集合，其中，所述多个Vue组件中的所述第一函数的函数名和函数代码相同；处理模块还用于，获取第一函数关联的变量，将第一函数关联的变量写入混入对象的数据选项中，将第一函数写入混入对象的方法选项；处理模块还用于，删除第一组件集合中每个Vue组件中的第一函数，将混入对象分别引入第一组件集合中的每个Vue组件。

上述装置的各个模块具体用于实现第一方面所描述的方法。

第三方面，本申请提供了一种计算设备，包括处理器和存储器，所述处理器和存储器可通过总线相互连接，也可以集成在一起。该处理器执行存储器中存储的代码实现如第一方面所描述的方法。

第四方面，本申请提供了一种计算机可读存储介质，包括程序或指令，当上述程序或指令在计算机设备上运行时，可使上述计算机设备执行如第一方面所描述的方法。

可以看到，本申请实施例先将Vue组件分别转换为抽象语法树，遍历每个Vue组件对应的抽象语法树，将具有相同函数名的函数对应的多个Vue组件作为第二组件集合；然后再遍历第二组件集合中具有相同函数名的函数对应的函数代码，将函数代码相同的函数作为第一函数，将第二组件集合中包括第一函数的多个Vue组件作为第一组件集合；再将第一组件集合中每个Vue组件都包含的第一函数以及第一函数关联的变量写入混入对象中，最后将混入对象引入到第一组件集合中的每个Vue组件。本申请实施例通过抽取生成第一组件集合中每个Vue组件公共的混入对象，能够提升代码的复用率，增加了Vue项目代码的可维护性，而且减少了Vue项目的资源包大小；用户无需深入了解Vue中mixin的语法、分析现有代码当中的复杂逻辑和学习抽取方法，极大程度地减少了代码转换过程中带来的学习成本、时间成本以及人为转换过程中可能导致的异常错误。

附图说明

为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是本申请实施例提供的一种生成混入对象的方法的流程示意图；

图2是本申请实施例提供的一种生成混入对象的装置的结构示意图；

图3是本申请实施例提供的一种计算设备的结构示意图。

具体实施方式

下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

需要说明的是，在本申请实施例中使用的术语是仅仅出于描述特定实施例的目的，而非旨在限制本申请。在本申请实施例和所附权利要求书中所使用的单数形式的“一种”、“所述”和“该”也旨在包括多数形式，除非上下文清楚地表示其他含义。还应当理解，本文中使用的术语“和/或”是指并包含一个或多个相关联的列出项目的任何或所有可能组合。

为了便于理解本申请实施例，下面对本申请涉及到的部分术语进行解释说明。

对象(object)：是JavaScript语言的核心概念，也是最重要的数据类型。简单来说，对象就是一组“键值对”(key-value)的集合，是一种无序的复合数据集合，其中，每个键值对都由一个键名(key)以及一个键值(value)构成。对象的每一个键名又称为“属性”(property)，它的键值可以是任何数据类型。如果一个属性的值为函数(function)，通常把这个属性称为“方法”，它可以像函数那样调用。属性和方法被称为对象的成员，是构成一个对象的主要部分，属性用来表示一个具体对象的特征，如“颜色”、“大小”、“重量”等；方法表示一个具体对象的行为或者使用方法，用来操作一个具体对象。

Vue组件：Vue是一套前端开发框架，在使用vue-cli创建的Vue项目中，每个以.vue结尾的文件都代表一个Vue组件。Vue组件是Vue框架中的一个重要概念，可以拓展超文本标记语言(hypertext markup language,HTML)元素，封装可重用的代码。简单来说，Vue组件是可复用的Vue实例，在开发过程中，把经常重复的功能，比如网页中的“计数按钮”、“下拉框”等等，开发为Vue组件，可以达到便捷开发的目的。在Vue框架中通常使用Vue.component()函数去声明和创建一个Vue组件，通过Vue.component()函数创建的Vue组件都是全局注册的，也就是在Vue组件注册之后，通过new Vue创建Vue实例，然后就可以在Vue实例中使用Vue组件。Vue还提供了局部注册的机制，通过在Vue()函数内去声明一个components属性，之后就可以在内部进行Vue组件的局部注册。

抽象语法树(abstract syntax tree，AST):在计算机科学中，抽象语法树是源代码语法结构的一种抽象表示，它以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构。在源代码的分析和编译过程中，语法分析器会创建出AST，以便于根据AST便于进行代码分析。

下面介绍本申请实施例涉及的应用场景。

目前，Vue提供了一种混入(mixin)功能，它的主要作用是提取Vue组件中的代码以进行复用，对组件中的八大生命周期钩子(hooks)函数、methods、components、data、computed等选项都可以进行提取。比如，在页面风格不同但执行的方法和需要的数据类似时，用户就可以把公共的部分提出来，根据混入对象的格式写成一个混入对象，然后再通过引入语法将这个混入对象引入到需要的Vue组件里，于是Vue组件就可以直接调用该混入对象。需要说明的是，混入对象与Vue组件是多对多的关系，一个混入对象可以作用到多个Vue组件或者Vue实例上，多个混入对象也可以作用到一个Vue组件或者Vue实例中。通过使用mixin功能，相同的方法只需要写一遍即可，可以提高代码的重用性，使Vue项目代码保持干净，达到了优化Vue框架代码的目的，且方便统一管理与修改。

混入对象中可以包含任意Vue组件选项，当Vue实例或者Vue组件中引入了一个混入对象，它们就“混入”了混入对象中定义的created、method、data、component等选项。而对于不同选项，有着不同的“混入”策略。比如，当Vue组件和混入对象中包含同名的钩子函数，同名的钩子函数将合并成为一个数组，Vue组件及混入对象中的钩子函数都将被调用；当Vue组件和混入对象中都含有data选项时，data在内部会进行递归合并，并在发生冲突时以组件的data优先。示例性地，用户创建了一个Mixin.js文件(在Vue项目中，混入对象通常是一个js文件)，该文件中包括如下程序代码：

可以看到，在上面的Mixin.js文件中定义了一个简单的混入对象(用“大括号”表示),并赋值给变量myMixin，myMixin即指向存储该混入对象的内存地址。创建的混入对象中有data选项，data中包含两个键值对，分别是foo-‘abc’以及message-‘hello’。然后，用户通过new Vue创建了一个Vue实例，并在Vue实例中引入上面创建的混入对象，Vue实例的程序代码如下：

由上面给出的代码可知，new Vue创建的Vue实例中也包含data选项，data中也有两个键值对，分别为message-‘goodbye’以及bar-‘def’。在Vue实例中通过“mixins：[myMixin]”语句使用前面创建的混入对象时，发现存在相同的键名“message”，即Vue实例与混入对象存在键名冲突。在这种情况下，Vue规定以实例中的数据优先，因此，控制台输出的“message”的值为“goodbye”。而键名“bar”以及“foo”不存在冲突，分别输出对应的值“def”及“abc”。通过上述分析可知，由于Vue规定了不同的“混入”策略，在用户创建并使用混入对象时需要格外谨慎，否则很容易导致不必要的错误。需要说明的是，上面给出的Mixin.js文件及Vue实例的程序代码只是为了便于理解，它们还可以包括更多或更少的内容，本申请不作限定。

然而，在平时的开发过程中，Vue框架提供的mixin功能容易被开发者忽略，由不同开发者分别进行开发的多个Vue组件，可能在开发完成后才发现有可以复用的代码，这时候再人工提取混入对象需要一定的时间成本，还可能有额外的风险。而为了使用mixin功能优化框架代码，还需要开发者进行一定的学习，熟悉相关语法，并逐句分析Vue项目代码中的复杂逻辑，对于这个优化功能的使用增加了一定的障碍。而且，人工提取混入对象容易出错，特别是容易产生数据冲突，可能导致不必要的错误。

为了解决上述问题，本申请实施例提供了一种生成混入对象的方法，该方法无需开发者深入了解Vue中mixin的语法、分析现有代码中的复杂逻辑、学习抽取方法，可以直接生成多个Vue组件公共的混入对象，各Vue组件可以直接调用生成出来的混入对象，提升了代码的复用率，达到优化框架代码的目的，并且增加了Vue项目代码的可维护性，减少了Vue项目资源包的大小。而且，该方法能够极大程度地减少代码转换过程中所带来的学习成本、时间成本以及人为代码转换可能导致的异常错误，进而提升用户的开发效率。

请参阅图1，图1是本申请实施例提供的一种生成混入对象的方法的流程示意图，该方法包括以下步骤：

S101：计算设备获取Vue项目的目录地址，将目录地址下的每个Vue组件转换为抽象语法树。

其中，上述目录地址用于查找Vue项目中的部分或全部Vue组件，也就是说，在该目录地址下可以查找到一些.vue结尾的文件，每个.vue文件中就对应一个Vue组件的代码。应理解，所述Vue项目指的是能够从中提取混入对象的已创建的Vue项目，在Vue项目中包括至少两个Vue组件。可以理解的是，可以采用构建抽象语法树的开源工具，将每个Vue组件的代码分别转换为对应的抽象语法树，每个Vue组件与Vue组件的抽象语法树一一对应，然后再基于每个Vue组件的抽象语法树对每个Vue组件进行相应的分析。关于抽象语法树这里不做过多介绍，本申请实施例对于构建抽象语法树的方式和工具不作具体限定。

由于mixin功能在低版本的Vue中不支持的，因此，需要判断当前Vue的版本号是否满足要求。在一种可能的实施例中，在获取Vue项目的目录地址之前，计算设备获取Vue的版本号，在Vue的版本号小于预设版本号的情况下，输出错误信息，其中，错误信息用于提示用户升级Vue的版本。

举例来说，在每个Vue项目的根目录下面，一般都有一个package.json文件，该文件用于定义当前Vue项目所需要的各种模块以及Vue项目的配置信息，包括项目名称(name)、项目版本(version)、依赖(dependencies)、许可证等元数据。下面示例性地给出一个package.json文件中包含的程序代码：

需要说明的是，上述程序代码可以包括更多或更少的内容，本申请不限定。可以看到，当前Vue的版本号为1.9.6，而预设版本号为2，当前Vue的版本号显然是小于2的，因此，控制台输出错误信息，提示用户升级Vue的版本。本申请对错误信息的具体内容、呈现方式等不做限定。

在一种可能的实施例中，计算设备读取配置文件(config.json)，获取配置文件中包含的Vue项目的目录地址。可以理解的是，用户可以预先在Vue项目的配置文件中编写Vue项目的目录地址，然后计算设备通过读取配置文件中的信息，获取到Vue项目的目录地址，再查找目录地址下的所有Vue组件，将每个Vue组件分别转换为抽象语法树。

S102：计算设备遍历每个Vue组件的抽象语法树，根据函数名和函数代码获取包括第一函数的多个Vue组件，得到第一组件集合。

其中，多个Vue组件中的第一函数的函数名和函数代码相同，也就是说，第一组件集合中的每个Vue组件包含相同的函数(函数名和函数代码都相同)，将这个相同的函数称为第一函数。可以理解的是，上述步骤S101将每个Vue组件转换为相应的抽象语法树后，就可以根据每个Vue组件对应的抽象语法树对各个Vue组件进行相应的分析，包括分析Vue组件中包含的函数的函数名以及每个函数对应的函数代码等等。在一种可能的实施例中，第一函数是在Vue组件的methods方法选项中的。

在一种可能的实施例中，计算设备遍历每个Vue组件对应的抽象语法树，获取具有相同函数名的函数所对应的Vue组件，得到第二组件集合；然后遍历第二组件集合中具有相同函数名的函数的函数代码，将函数代码相同的函数作为第一函数；获取第二组件集合中包括第一函数的多个Vue组件，得到第一组件集合。应理解，可以通过Vue组件对应的抽象语法树去判断Vue组件中包含的函数的函数名以及函数内部代码块，具体可以基于抽象语法树判断函数代码中包含的字段及判断条件等是否一致，来确定函数代码是否相同。

例如，在某个Vue项目当中共有10个Vue组件，这10个Vue组件的组件名称分别为C1、C2、…、C10。基于Vue项目的目录地址，可以找到目标地址下的所有Vue组件，计算设备首先遍历这10个Vue组件各自的抽象语法树，获取具有相同函数名的函数所对应的Vue组件，得到第二组件集合。这里假设得到的第二组件集合中包括C1、C2、C6、C9、C10这五个Vue组件，这五个Vue组件具有一个共同点，它们都包含一个函数名为A的函数。然后遍历第二组件集合中每个Vue组件各自所包含的A函数，判断每个Vue组件中的A函数的函数代码是否一致，将函数代码相同的A函数作为第一函数；再获取第二组件集合中包括第一函数的多个Vue组件，得到第一组件集合。这里假设得到的第一组件集合包括C1、C2及C9，第一组件集合中的每个Vue组件都包括第一函数。通过以上操作，可以得到第一组件集合及对应的第一函数，应理解，Vue项目当中还可能得到第三组件集合(假设包括C4、C7)以及对应的第三函数，第三组件集合中的每个Vue组件均包含第三函数，操作方法同理。

S103：计算设备获取第一函数关联的变量，将第一函数关联的变量写入混入对象的data数据选项，将第一函数写入混入对象的methods方法选项。

混入对象具体可以在js文件中定义，比如在上文提到的Mixin.js文件中定义一个混入对象，混入对象的代码中包含第一函数的函数代码。可以理解的是，将第一组件集合中每个Vue组件均包含的第一函数抽取出来，写入混入对象中，可以优化框架代码，增加代码的复用率。而且，由于多个Vue组件是直接调用该混入对象的，当第一函数的代码需要进行相应的修改时，只需要在定义有混入对象的文件中进行修改即可，不再需要一一修改Vue组件中原有的第一函数的代码。也就是说，使用混入对象便于统一管理，增加了项目代码的可维护性。由于混入对象可以包含任意Vue组件的选项，如果第一函数是在Vue组件的methods方法选项中的，那么生成的混入对象中也会包含methods选项，混入对象的methods选项中包含第一函数。可以理解是，第一函数如果是在Vue组件的其他选项中的，也是同理，生成的混入对象中会包含对应的选项，混入对象的这个选项中包含第一函数。Vue组件的选项包括八大生命周期钩子函数(包括beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed)，还包括methods、components、data、computed、watch等。需要说明的是，获取第一函数关联的变量也是基于抽象语法树实现的。

承接上例，计算设备将第一组件集合(包括C1、C2及C9)中每个Vue组件所包含的第一函数以及关联的变量写入一个混入对象M1当中，其中，第一函数关联的变量写入混入对象M1的data选项，第一函数写入混入对象M1的methods选项中。后续通过将M1引入第一组件集合中的每个Vue组件，第一组件集合中的每个Vue组件都可以调用混入对象M1。可以理解的是，在同一个Vue项目当中，可以抽取出多个混入对象。例如，在上述例子的Vue项目中，除了生成第一混入对象M1以外，还可以将第三组件集合(包括C4、C7)中每个Vue组件所包含的第三函数以及第三函数关联的变量写入另一个混入对象M2。将混入对象引入第三组件集合中的每一个Vue组件后，第三组件集合中的每一个Vue组件都可以调用混入对象M2。

S104：计算设备删除第一组件集合中每个Vue组件中的第一函数，将混入对象分别引入第一组件集合中的每个Vue组件。

应理解，本申请实施例对于删除第一函数及引入混入对象的顺序不做限制，也就是说，S104还可以是先将混入对象引入第一组件集合中的每个Vue组件，再将第一组件集合中每个Vue组件中原有的第一函数删除。需要说明的是，这里的“引入”只是在第一组件集合中的每个Vue组件中加入引入混入对象的一小段代码(关于引入的代码本领域技术人员已知)，实际上，第一组件集合中的每个Vue组件是直接去调用该混入对象的。

在一种可能的实施例中，在将混入对象分别引入第一组件集合中的每个Vue组件之前，还包括：计算设备将混入对象的数据选项中的键名与第一组件集合中每个Vue组件的数据(data)选项中的键名进行比较；在混入对象中的数据选项与第一组件集合中任意一个Vue组件的数据选项存在相同键名的情况下，修改混入对象中的数据选项中的相同键名。比如，可以在混入对象的数据选项中的上述相同键名后加上一个“_mixins_key”后缀，这样就可以与Vue组件的数据选项中的键名区分开来，避免造成数据冲突、产生不必要的错误。应理解，除了将混入对象的数据选项中的相同键名进行相应修改，还要将混入对象中所有与此相同键名关联的变量进行同步修改。

在一种可能的实施例中，计算设备生成列表文件，其中，列表文件中包括第一组件集合中每个Vue组件的组件名称和占用的空间大小、第一函数的函数名和占用的空间大小以及混入对象占用的空间大小。在可能的实施例中，列表文件中可以包括Vue项目在执行步骤S101之前占用的空间大小以及执行完步骤S104之后占用的空间大小，列表文件中还可以包括Vue项目的资源包所减小的内存空间以及第一函数在第一组件集合中的每个Vue组件中的代码位置(比如说所在的代码行数)。关于列表文件的样式及显示方式，本申请不做具体限定。可以理解的是，Vue项目中可能生成多个混入对象，列表文件中还可以显示生成的混入对象的个数。

在一种可能的实施例中，计算设备输出项目转换成功信息，其中，该项目转换成功信息用于提示用户当前的Vue项目已经完成代码转换，项目转换成功信息中包括列表文件中的信息，所述列表文件中的信息包括第一组件集合中每个Vue组件的组件名称和占用的空间大小、第一函数的函数名和占用的空间大小以及混入对象占用的空间大小。

可以理解的是，上述S101至S104的方法步骤可以通过在Vue项目中添加插件来实现。

本申请实施例首先获取Vue项目的目录地址，将目录地址下的每个Vue组件转换分别转换为相应的抽象语法树；然后遍历每个Vue组件对应的抽象语法树，将具有相同函数名的函数对应的多个Vue组件作为第二组件集合；然后再遍历第二组件集合中具有相同函数名的函数对应的函数代码，将函数代码相同的函数作为第一函数，将第二组件集合中包括第一函数的多个Vue组件作为第一组件集合；再按照混入对象的格式，将第一函数以及第一函数关联的变量写入混入对象中，再将生成的混入对象引入到第一组件集合中的每个Vue组件中，这样能够实现快速抽取出多个Vue组件公共的混入对象，提升代码的复用率，并且增加了Vue项目代码的可维护性，还减少了Vue项目的资源包所占用的空间大小；用户无需深入了解Vue中mixin的语法、分析Vue项目代码当中的复杂逻辑、学习抽取方法，降低了Vue的mixin功能的使用门槛，极大程度地减少了代码转换过程中所带来的学习成本、时间成本以及人为转换过程中可能导致的异常错误。

图2是本申请实施例提供的一种生成混入对象的装置200的结构示意图。如图2所述，抽取混入对象的装置200包括获取模块201和处理模块202。

获取模块201，用于获取Vue项目的目录地址，将目录地址下的每个Vue组件分别转换为抽象语法树；

处理模块202，用于遍历每个Vue组件对应的抽象语法树，根据函数名和函数代码获取包括第一函数的多个Vue组件，得到第一组件集合，其中，多个Vue组件中的第一函数的函数名和函数代码相同；

处理模块202还用于：

获取第一函数关联的变量，将第一函数关联的变量写入混入对象的数据选项，以及将第一函数写入混入对象的方法选项；删除第一组件集合中每个Vue组件中的第一函数，将混入对象分别引入第一组件集合中的每个Vue组件。

在一种可能的实施例中，处理模块202具体用于：遍历每个Vue组件对应的抽象语法树，获取具有相同函数名的函数对应的Vue组件，得到第二组件集合；遍历第二组件集合中具有相同函数名的函数的函数代码，将函数代码相同的函数作为第一函数；获取第二组件集合中包括第一函数的多个Vue组件，得到第一组件集合。

在一种可能的实施例中，处理模块202还用于：将混入对象的数据选项中的键名与第一组件集合中每个Vue组件的数据选项中的键名进行比较；在混入对象中的数据选项与第一组件集合中任意一个Vue组件的数据选项中存在相同键名的情况下，修改混入对象中的数据选项中的相同键名。

在一种可能的实施例中，处理模块202还用于：生成列表文件，其中，列表文件包括第一组件集合中每个Vue组件的组件名称和占用的空间、第一函数的函数名和占用的空间大小、以及混入对象占用的空间大小。

在一种可能的实施例中，所述处理模块202还用于，在Vue项目的版本号小于预设版本号的情况下，输出错误信息，所述错误信息用于提示用户升级Vue的版本。

在一种可能的实施例中，所述获取模块201具体用于，读取配置文件，获取所述配置文件中的Vue项目的目录地址。

在一种可能的实施例中，所述处理模块202还用于，输出项目转换成功信息，所述项目转换成功信息用于提示用户所述Vue项目已经完成代码转换，所述项目转换成功信息包括所述列表文件中的信息。

上述获取模块201具体可用于实现上述步骤S101所描述的内容，处理模块202具体用于实现步骤S102至S104所描述的内容，为了说明书的简洁，这里不赘述。

图3是本申请实施例提供的一种计算设备300的结构示意图。该计算设备300可以是笔记本电脑、平板电脑以及云端服务器等计算设备，本申请不做限制。

计算设备300包括：处理器301、通信接口302以及存储器303，所述计算设备具体用于实行上述抽取混入对象的方法实施例中的步骤S101至S104。其中，处理器301、通信接口302以及存储器303可以通过内部总线304相互连接，也可通过无线传输等其他手段实现通信。本申请实施例以通过总线304连接为例，总线304可以是外设部件互连标准(PeripheralComponent Interconnect,PCI)总线或扩展工业标准结构(Extended Industry StandardArchitecture,EISA)总线等。总线304可以分为地址总线、数据总线、控制总线等。为便于表示，图3中仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。

处理器301可以由至少一个通用处理器构成，例如中央处理器(CentralProcessing Unit,CPU)，或者CPU和硬件芯片的组合。上述硬件芯片可以是专用集成电路(Application-Specific Integrated Circuit,ASIC)、可编程逻辑器件(ProgrammableLogic Device,PLD)或其组合。上述PLD可以是复杂可编程逻辑器件(ComplexProgrammable Logic Device,CPLD)、现场可编程逻辑门阵列(Field-Programmable GateArray,FPGA)、通用阵列逻辑(Generic Array Logic,GAL)或其任意组合。处理器301执行各种类型的数字存储指令，例如存储在存储器303中的软件或者固件程序，它能使计算设备300提供多种服务。

存储器303用于存储程序代码，并由处理器301来控制执行，以执行上述实施例中生成混入对象的方法实施例中的处理步骤。程序代码中可以包括一个或多个软件模块，这一个或多个软件模块可以为图2实施例中提供的软件模块，如获取模块201以及处理模块202。其中，获取模块201，用于获取Vue项目的目录地址，将目录地址下的每个Vue组件分别转换为抽象语法树；处理模块202，用于遍历每个Vue组件对应的抽象语法树，根据函数名和函数代码获取包括第一函数的多个Vue组件，得到第一组件集合，其中，多个Vue组件中的第一函数的函数名和函数代码相同；处理模块202还用于，获取第一函数关联的变量，将第一函数关联的变量写入混入对象的数据选项中，将第一函数写入混入对象的方法选项中；处理模块202还用于，删除第一组件集合中每个Vue组件中的第一函数，将混入对象分别引入第一组件集合中的每个Vue组件。计算设备300的各模块具体可用于执行图1实施例中的步骤S101～S104，这里不再进行赘述。

需要说明的是，本实施例可以是通用的物理服务器实现的，例如，ARM服务器或者X86服务器，也可以是基于通用的物理服务器结合NFV技术实现的虚拟机实现的，虚拟机指通过软件模拟的具有完整硬件系统功能的、运行在一个完全隔离环境中的完整计算机系统，本申请不作具体限定。应理解，图3所示的计算设备还可以是至少一个服务器构成的计算机集群，本申请不作具体限定。

存储器303可以包括易失性存储器(Volatile Memory)，例如随机存取存储器(Random Access Memory，RAM)；存储器303也可以包括非易失性存储器(Non-VolatileMemory)，例如只读存储器(Read-Only Memory，ROM)、快闪存储器(Flash Memory)、硬盘(Hard Disk Drive，HDD)或固态硬盘(Solid-State Drive，SSD)；存储器303还可以包括上述种类的组合。存储器303可以存储有程序代码，具体可以包括用于执行图1实施例描述的步骤S101至S104的程序代码，这里不再进行赘述。

通信接口302可以为有线接口(例如以太网接口)，可以为内部接口(例如高速串行计算机扩展总线(Peripheral Component Interconnect express,PCIe)总线接口)、有线接口(例如以太网接口)或无线接口(例如蜂窝网络接口或使用无线局域网接口)，用于与与其他设备或模块进行通信。

可选地，计算设备300还可以包括输入/输出接口305，输入/输出接口305连接有输入/输出设备，用于接收输入的信息，输出操作结果。比如，接收用户输入的配置文件信息或者Vue项目的目录地址，输出生成的列表文件、提示用户升级Vue框架版本的错误信息或者项目转换成功信息。

需要说明的，图3仅仅是本申请实施例的一种可能的实现方式，实际应用中，计算设备300还可以包括更多或更少的部件，这里不作限制。关于本申请实施例中未出示或未描述的内容，可参见前述图1实施例中的相关阐述，这里不再赘述。

本申请实施例还提供一种计算机可读存储介质，计算机可读存储介质中存储有指令，当其在处理器上运行时，图1所示的方法流程得以实现。

本申请实施例还提供一种计算机程序产品，当计算机程序产品在处理器上运行时，图1所示的方法流程得以实现。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的程序可存储于一计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，所述的存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory，ROM)或随机存储记忆体(Random AccessMemory，RAM)等。

以上所揭露的仅为本申请一种较佳实施例而已，当然不能以此来限定本申请之权利范围，本领域普通技术人员可以理解实现上述实施例的全部或部分流程，并依本申请权利要求所作的等同变化，仍属于发明所涵盖的范围。