本申请提供了一种vuex数据管理的优化方法、装置、电子设备及计算机可读存储介质，该方法包括：获取树形数据并进行解析，确定每个节点的节点标识；基于每个节点的节点标识，确定每个目标节点的路径信息，其中路径信息中的最后一个节点为目标节点；基于每个目标节点的路径信息，获取每个目标节点的数据值；基于每个目标节点的数据值和路径信息，渲染每个目标节点对应的vue组件。本申请能够在进行数据渲染时，有效地减少内存损耗。有效地减少内存损耗。有效地减少内存损耗。
【技术实现步骤摘要】
vuex数据管理的优化方法、装置、电子设备及可读存储介质
[0001]本申请属于数据处理领域，尤其涉及一种vuex数据管理的优化方法、装置、电子设备及计算机可读存储介质。
技术介绍
[0002]现有技术中，web前端普遍使用响应式的技术框架构建前端工程。其中，响应式数据绑定是指，当页面中绑定的数据发生变化时，对应页面能够自动变化。在进行工程开发中，往往会处理很多数据，这些数据保存在我们程序内，对数据进行状态管理。
[0003]其中，vuex正是web前端的一种状态管理机制，vuex管理数据遵循vue组件的响应式原理，将vuex管理的数据状态都封装成了响应数据，当在页面UI中使用vuex状态管理，在vuex数据变化，UI页面展现也会响应变化。
[0004]然而，当vuex状态管理的数据是一个深层次的树状结构数据时，vuex在初始化需要把数据对象转化成响应式对象，需要深度遍历数据，一层层包装成响应式对象数据，直到叶子属性为止，响应式数据才转化完成，响应式对象数据占用的内存会相当巨大，对页面的渲染性能也造成很大的损耗。
[0005]因此，如何减少内存损耗是本领域技术人员亟需解决的技术问题。
技术实现思路
[0006]本申请实施例提供一种vuex数据管理的优化方法、装置、电子设备及计算机可读存储介质，能够在进行数据渲染时，有效地减少内存损耗。
[0007]第一方面，本申请实施例提供一种vuex数据管理的优化方法，方法包括：
[0008]获取树形数据并进行解析，确定每个节点的节点标识；
[0009]基于每个节点的节点标识，确定每个目标节点的路径信息，其中路径信息中的最后一个节点为目标节点；
[0010]基于每个目标节点的路径信息，获取每个目标节点的数据值；
[0011]基于每个目标节点的数据值和路径信息，渲染每个目标节点对应的vue组件。
[0012]可选的，基于每个目标节点的数据值和路径信息，渲染每个目标节点对应的vue组件，包括：
[0013]基于每个目标节点的路径信息，确定对应的vue组件的计算属性标识；
[0014]基于每个目标节点的数据值，确定对应的vue组件的计算属性；
[0015]基于vue组件的计算属性，渲染vue组件。
[0016]可选的，针对任意一个目标节点，方法还包括：
[0017]获取目标节点的监测参数；
[0018]判断目标节点的监测参数是否与vue组件的计算属性标识一致；
[0019]在监测参数与计算属性标识一致时，重新渲染vue组件。
[0020]可选的，在监测参数与计算属性标识一致时，重新渲染vue组件，包括：
[0021]在监测参数与计算属性标识一致时，更新vue组件的状态数据；
[0022]基于vue组件的计算属性，重新渲染vue组件。
[0023]可选的，获取目标节点的监测参数，包括：
[0024]基于预设的第一规则判断目标节点的数据值是否被改变；
[0025]在目标节点的数据值发生改变后，获取目标节点的监测参数。
[0026]可选的，在监测参数与计算属性标识一致时，更新vue组件的状态数据，包括：
[0027]在监测参数与计算属性标识一致时，基于预设的第二规则，更新vue组件的状态数据。
[0028]可选的，基于路径信息确定vue组件的计算属性标识，包括：
[0029]将路径信息中的节点的标识按照拼接下划线的方式组成字符串。
[0030]第二方面，本申请实施例提供了一种vuex数据管理的优化方法装置，装置包括：
[0031]第一获取模块，获取树形数据并进行解析，确定每个节点的节点标识；
[0032]确定模块，基于每个节点的节点标识，确定每个目标节点的路径信息，其中，路径信息中的最后一个节点为目标节点；
[0033]第二获取模块，基于每个目标节点的路径信息，获取每个目标节点的数据值；
[0034]第一渲染模块，基于每个目标节点的数据值和路径信息，渲染每个目标节点对应的vue组件。
[0035]可选的，第一渲染模块包括：第一确定单元，用于基于每个目标节点的路径信息，确定对应的vue组件的计算属性标识；第二确定单元，用于基于每个目标节点的数据值，确定对应的vue组件的计算属性；第一渲染单元，用于基于vue组件的计算属性，渲染vue组件。
[0036]可选的，针对任意一个目标节点，装置还包括：
[0037]第三获取模块，用于获取目标节点的监测参数；
[0038]判断模块，用于判断目标节点的监测参数是否与vue组件的计算属性标识一致；
[0039]第二渲染模块，用于在监测参数与计算属性标识一致时，重新渲染vue组件。
[0040]可选的，第二渲染模块包括：更新单元，用于在监测参数与计算属性标识一致时，更新vue组件的状态数据；第二渲染单元，用于基于vue组件的计算属性，重新渲染vue组件。
[0041]可选的，第三获取模块包括：判断单元，用于基于预设的第一规则判断目标节点的数据值是否被改变；获取单元，用于在目标节点的数据值发生改变后，获取目标节点的监测参数。
[0042]可选的，更新单元，用于在监测参数与计算属性标识一致时，基于预设的第二规则，更新vue组件的状态数据。
[0043]可选的，第一确定单元，用于将路径信息中的节点的标识按照拼接下划线的方式组成字符串。
[0044]第三方面，本申请实施例提供了一种电子设备，电子设备包括：处理器以及存储有计算机程序指令的存储器；处理器执行计算机程序指令时实现如上述第一方面的vuex数据管理的优化方法。
[0045]第四方面，本申请实施例提供了一种计算机可读存储介质，计算机可读存储介质上存储有计算机程序指令，计算机程序指令被处理器执行时实现如上述第一方面的vuex数据管理的优化方法。
[0046]本申请实施例的vuex数据管理的优化方法、装置、电子设备及计算机可读存储介质。其中，获取到树形数据时，对树形数据进行解析，确定树形数据中每个节点的节点标识，根据节点标识，确定每个目标节点的路径信息，基于每个目标节点的路径信息，获取每个目标节点的数据值，基于每个目标节点的数据值和路径信息，渲染每个目标节点对应的vue组件。本申请通过目标节点的路径信息获取路径信息上每一个节点的数据值，然后根据数据值渲染对应节点的vue组件，即将需要的数据进行渲染，无需对所有的数据全都进行渲染。因此，本申请能够有效地减少内存损耗。
附图说明
[0047]为了更清楚地说明本专利技术具体实施方式或现有技术中的技术方案，下面将对具体实施方式或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本申请的一些实施方式，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
[0048]图1是本申请本文档来自技高网...
【技术保护点】
【技术特征摘要】
1.一种vuex数据管理的优化方法，其特征在于，所述方法包括：获取树形数据并进行解析，确定每个节点的节点标识；基于每个节点的节点标识，确定每个目标节点的路径信息，其中所述路径信息中的最后一个节点为目标节点；基于每个目标节点的所述路径信息，获取所述每个目标节点的数据值；基于每个所述目标节点的数据值和路径信息，渲染每个所述目标节点对应的vue组件。2.根据权利要求1所述的vuex数据管理的优化方法，其特征在于，基于每个所述目标节点的数据值和路径信息，渲染每个所述目标节点对应的vue组件，包括：基于每个所述目标节点的路径信息，确定对应的所述vue组件的计算属性标识；基于每个所述目标节点的数据值，确定对应的所述vue组件的计算属性；基于所述vue组件的计算属性，渲染所述vue组件。3.根据权利要求2所述的vuex数据管理的优化方法，其特征在于，针对任意一个目标节点，所述方法还包括：获取所述目标节点的监测参数；判断所述目标节点的监测参数是否与所述vue组件的计算属性标识一致；在所述监测参数与所述计算属性标识一致时，重新渲染所述vue组件。4.根据权利要求3所述的vuex数据管理的优化方法，其特征在于，在所述监测参数与所述计算属性标识一致时，重新渲染所述vue组件，包括：在所述监测参数与所述计算属性标识一致时，更新所述vue组件的状态数据；基于所述vue组件的计算属性，重新渲染所述vue组件。5.根据权利要求3所述的vuex数据管理的优化方法，其特征在于，所述获取所述目标节点的监测参数，包括：基于预设的第一规则判断所述目标节点的数据...
【专利技术属性】
技术研发人员：李良，李彤，
申请(专利权)人：北京元年科技股份有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。