[发明专利]解决多层嵌套数组数据响应式的方法、系统、设备和介质

说明书

本发明提出了解决多层嵌套数组数据响应式的方法、系统、设备和介质，该方法确定主文件中具有交互的数组数据和交互DOM；将交互DOM提取出来并组件化，将数组数据作为组件的数据源传入，使交互业务逻辑封装在组件内部；为数组数据赋值，以及监听数组数据的变化，更新页面展示。以及在组件中，组件页面数据改变后及时将数据值赋值给数据源对象指定属性。基于该方法，还提出了解决多层嵌套数组数据响应式的系统、设备和介质。本发明更好的解决多层嵌套数组数据响应式问题，同时解决，当响应式触发事件较多时，造成页面不停的重新渲染，导致用户无法正常操作的易用性问题。组件化解决多层嵌套数组数据响应问题，提高了代码的可读性和可维护性。

技术领域

本发明属于软件开发技术领域，特别涉及解决多层嵌套数组数据响应式的方法、系统、设备和介质。

背景技术

Vue是一套用于构建用户界面的渐进式框架，且VUE框架是双向绑定响应式框架，但是VUE框架对于数组数据响应式的特殊性，即VUE实现数据的响应式原理如果对数组的每一个元素下标都添加get和set方法这样对于性能来说是承担不起的，其中数组即为成千上万个元素。

VUE官方提供的处理数组数据响应式的方法：手动添加数组数据的响应式，即添加观察者模式进行数据劫持，并通过set函数去通知视图更新。观察者模式：观察者模式又被称为发布-订阅模式，这种模式定义了对象间的一种一对多的依赖关系。当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知，并完成自动更新。此方法在单层数组数据时尚可应用，当数组数据嵌套多层，且随着嵌套层级的增多，可应用性越不可观，即便可以实现预期效果，代码的可读性和可维护性都会大大折扣。例1，较简单的一种场景，一层数组数据与页面有交互的场景，当前系统中，所有可能会改变数组数据的入口都要添加set，以便通知页面更新。当业务越来越复杂，需要交互的数组数据越来越多时，页面会变得很难维护，而且也很容易遗漏场景。例2，多层嵌套数组数据与页面交互场景，此时可以使用官方的方法，但是需要处理的层级会根据嵌套的层级维护代码成比例增加，需一直需要处理到最外面一层的数组，才可以被劫持到更新操作。此时若改变数据的场景较多，可以想象将是大数量级的代码进行维护更新。此场景还有一种简单点的方法，就是给交互元素设置key，通过交互数据改变时，更新key的值，通知DOM重新渲染，但是此方法在交互触发事件较多的场景时会受限制，不易用，因为触发事件越多，DOM更新的场景就越多，很容易陷入DOM一直更新无法进行正常的事件触发操作，严重的会陷入死循环，出现页面崩溃现象。

发明内容

为了解决上述技术问题，本发明提出了解决多层嵌套数组数据响应式的方法、系统、设备和介质。可以更好的解决多层嵌套数组数据响应式问题，同时解决，当响应式触发事件较多时，造成页面不停的重新渲染，导致用户无法正常操作的易用性问题。

为实现上述目的，本发明采用以下技术方案：

解决多层嵌套数组数据响应式的方法，包括以下步骤：

确定主文件中具有交互的数组数据和交互DOM；

将所述交互DOM提取出来并组件化，将所述数组数据作为组件的数据源传入，使交互业务逻辑封装在组件内部；

为所述数组数据赋值，以及监听数组数据的变化，更新页面展示。

进一步的，所述方法还包括：在组件中，组件页面数据改变后及时将数据值赋值给数据源对象指定属性。

进一步的，所述将所述数组数据作为组件的数据源传入，使交互业务逻辑封装在组件内部的过程为：设置入参接收主文件传入数组数据，使交互业务逻辑封装在组件内部。

进一步的，所述为所述数组数据赋值，以及监听数组数据的变化，更新页面展示的过程包括：主文件为多层嵌套数据需要交互的数据对象进行入参赋值，监听数组数据的变化，更新页面展示。