CN114327564A - 解决多层嵌套数组数据响应式的方法、系统、设备和介质 - Google Patents
解决多层嵌套数组数据响应式的方法、系统、设备和介质 Download PDFInfo
- Publication number
- CN114327564A CN114327564A CN202111680351.8A CN202111680351A CN114327564A CN 114327564 A CN114327564 A CN 114327564A CN 202111680351 A CN202111680351 A CN 202111680351A CN 114327564 A CN114327564 A CN 114327564A
- Authority
- CN
- China
- Prior art keywords
- data
- array data
- component
- array
- interaction
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Withdrawn
Links
- 230000004044 response Effects 0.000 title claims abstract description 82
- 238000000034 method Methods 0.000 title claims abstract description 79
- 230000003993 interaction Effects 0.000 claims abstract description 62
- 238000012544 monitoring process Methods 0.000 claims abstract description 29
- 230000008859 change Effects 0.000 claims abstract description 24
- 230000002452 interceptive effect Effects 0.000 claims abstract description 23
- 230000015654 memory Effects 0.000 claims description 29
- 230000006870 function Effects 0.000 claims description 19
- 238000004590 computer program Methods 0.000 claims description 14
- 230000008569 process Effects 0.000 claims description 13
- 238000004806 packaging method and process Methods 0.000 claims description 6
- 238000001514 detection method Methods 0.000 claims description 5
- 238000005538 encapsulation Methods 0.000 claims description 2
- 238000009877 rendering Methods 0.000 abstract description 15
- 239000010410 layer Substances 0.000 description 29
- 238000010586 diagram Methods 0.000 description 10
- 230000000694 effects Effects 0.000 description 7
- 230000001360 synchronised effect Effects 0.000 description 6
- 239000000284 extract Substances 0.000 description 4
- 230000003287 optical effect Effects 0.000 description 4
- 238000012545 processing Methods 0.000 description 4
- 230000009471 action Effects 0.000 description 3
- 238000004891 communication Methods 0.000 description 3
- 238000012986 modification Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 230000003068 static effect Effects 0.000 description 2
- 230000004075 alteration Effects 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 230000003631 expected effect Effects 0.000 description 1
- 238000012423 maintenance Methods 0.000 description 1
- 230000000750 progressive effect Effects 0.000 description 1
- 230000004043 responsiveness Effects 0.000 description 1
- 239000002356 single layer Substances 0.000 description 1
Images
Landscapes
- User Interface Of Digital Computer (AREA)
Abstract
本发明提出了解决多层嵌套数组数据响应式的方法、系统、设备和介质，该方法确定主文件中具有交互的数组数据和交互DOM；将交互DOM提取出来并组件化，将数组数据作为组件的数据源传入，使交互业务逻辑封装在组件内部；为数组数据赋值，以及监听数组数据的变化，更新页面展示。以及在组件中，组件页面数据改变后及时将数据值赋值给数据源对象指定属性。基于该方法，还提出了解决多层嵌套数组数据响应式的系统、设备和介质。本发明更好的解决多层嵌套数组数据响应式问题，同时解决，当响应式触发事件较多时，造成页面不停的重新渲染，导致用户无法正常操作的易用性问题。组件化解决多层嵌套数组数据响应问题，提高了代码的可读性和可维护性。
Description
技术领域
本发明属于软件开发技术领域，特别涉及解决多层嵌套数组数据响应式的方法、系统、设备和介质。
背景技术
Vue是一套用于构建用户界面的渐进式框架，且VUE框架是双向绑定响应式框架，但是VUE框架对于数组数据响应式的特殊性，即VUE实现数据的响应式原理如果对数组的每一个元素下标都添加get和set方法这样对于性能来说是承担不起的，其中数组即为成千上万个元素。
VUE官方提供的处理数组数据响应式的方法：手动添加数组数据的响应式，即添加观察者模式进行数据劫持，并通过set函数去通知视图更新。观察者模式：观察者模式又被称为发布-订阅模式，这种模式定义了对象间的一种一对多的依赖关系。当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知，并完成自动更新。此方法在单层数组数据时尚可应用，当数组数据嵌套多层，且随着嵌套层级的增多，可应用性越不可观，即便可以实现预期效果，代码的可读性和可维护性都会大大折扣。例1，较简单的一种场景，一层数组数据与页面有交互的场景，当前系统中，所有可能会改变数组数据的入口都要添加set，以便通知页面更新。当业务越来越复杂，需要交互的数组数据越来越多时，页面会变得很难维护，而且也很容易遗漏场景。例2，多层嵌套数组数据与页面交互场景，此时可以使用官方的方法，但是需要处理的层级会根据嵌套的层级维护代码成比例增加，需一直需要处理到最外面一层的数组，才可以被劫持到更新操作。此时若改变数据的场景较多，可以想象将是大数量级的代码进行维护更新。此场景还有一种简单点的方法，就是给交互元素设置key，通过交互数据改变时，更新key的值，通知DOM重新渲染，但是此方法在交互触发事件较多的场景时会受限制，不易用，因为触发事件越多，DOM更新的场景就越多，很容易陷入DOM一直更新无法进行正常的事件触发操作，严重的会陷入死循环，出现页面崩溃现象。
发明内容
为了解决上述技术问题，本发明提出了解决多层嵌套数组数据响应式的方法、系统、设备和介质。可以更好的解决多层嵌套数组数据响应式问题，同时解决，当响应式触发事件较多时，造成页面不停的重新渲染，导致用户无法正常操作的易用性问题。
为实现上述目的，本发明采用以下技术方案：
解决多层嵌套数组数据响应式的方法，包括以下步骤：
确定主文件中具有交互的数组数据和交互DOM；
将所述交互DOM提取出来并组件化，将所述数组数据作为组件的数据源传入，使交互业务逻辑封装在组件内部；
为所述数组数据赋值，以及监听数组数据的变化，更新页面展示。
进一步的，所述方法还包括：在组件中，组件页面数据改变后及时将数据值赋值给数据源对象指定属性。
进一步的，所述将所述数组数据作为组件的数据源传入，使交互业务逻辑封装在组件内部的过程为：设置入参接收主文件传入数组数据，使交互业务逻辑封装在组件内部。
进一步的，所述为所述数组数据赋值，以及监听数组数据的变化，更新页面展示的过程包括：主文件为多层嵌套数据需要交互的数据对象进行入参赋值，监听数组数据的变化，更新页面展示。
进一步的，所述监听数组数据的变化的方法为：在组件内添加监测函数监测入参对象数据的变化；所述检测函数包括且不限于watch函数。
本发明还提出了解决多层嵌套数组数据响应式的系统，包括确定模块、封装模块和监听模块；
所述确定模块用于确定主文件中具有交互的数组数据和交互DOM；
所述封装模块用于将所述交互DOM提取出来并组件化，将所述数组数据作为组件的数据源传入，使交互业务逻辑封装在组件内部；
所述监听模块用于为所述数组数据赋值，以及监听数组数据的变化，更新页面展示。
进一步的，所述封装模块执行的过程包括：设置入参接收主文件传入数组数据，使交互业务逻辑封装在组件内部。
进一步的，所述监听模块执行的过程包括：主文件为多层嵌套数据需要交互的数据对象进行入参赋值，在组件内添加监测函数监测入参对象数据的变化，监听数组数据的变化，更新页面展示。
本发明还提出了一种设备，包括：
存储器，用于存储计算机程序；
处理器，用于执行所述计算机程序时实现所述的方法步骤。
本发明还提出了一种可读存储介质，所述可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现所述的方法步骤。
发明内容中提供的效果仅仅是实施例的效果，而不是发明所有的全部效果，上述技术方案中的一个技术方案具有如下优点或有益效果：
本发明提出了解决多层嵌套数组数据响应式的方法、系统、设备和介质，该方法确定主文件中具有交互的数组数据和交互DOM；将交互DOM提取出来并组件化，将所述数组数据作为组件的数据源传入，使交互业务逻辑封装在组件内部；为所述数组数据赋值，以及监听数组数据的变化，更新页面展示。以及在组件中，组件页面数据改变后及时将数据值赋值给数据源对象指定属性。基于解决多层嵌套数组数据响应式的方法，还提出了解决多层嵌套数组数据响应式的系统、设备和介质。本发明对于页面有交互的数组数据，尤其是数组中包含数组渲染页面有交互的场景，将渲染DOM提取进行组件化。将数组数据(或嵌套的多层数组数据中需要页面交互的数据对象)做为该组件的数据源传入。所有的交互都在组件内进行，因此时组件的数据源为一个对象，VUE对对象属性的数据劫持响应式有效，可以实现正常的页面响应式。实现了多层数组数据对象数据改变，页面响应式更新的效果，间接实现多层数组数据的响应式。最后组件页面改变后要得到的的数据值赋值给该组件的数据源指定属性，即间接实现了多层数组数据结构数据与页面数据的响应式。本发明可以更好的解决多层嵌套数组数据响应式问题，同时解决，当响应式触发事件较多时，造成页面不停的重新渲染，导致用户无法正常操作的易用性问题。组件化解决多层嵌套数组数据响应问题，也提高了代码的可读性和可维护性。
附图说明
如图1为本发明实施例1解决多层嵌套数组数据响应式的方法示意图；
如图2为本发明实施例1中响应式原理图流程图；
如图3为本发明实施例1解决多层嵌套数组数据响应式的系统示意图。
具体实施方式
为能清楚说明本方案的技术特点，下面通过具体实施方式，并结合其附图，对本发明进行详细阐述。下文的公开提供了许多不同的实施例或例子用来实现本发明的不同结构。为了简化本发明的公开，下文中对特定例子的部件和设置进行描述。此外，本发明可以在不同例子中重复参考数字和/或字母。这种重复是为了简化和清楚的目的，其本身不指示所讨论各种实施例和/或设置之间的关系。应当注意，在附图中所图示的部件不一定按比例绘制。本发明省略了对公知组件和处理技术及工艺的描述以避免不必要地限制本发明。
实施例1
本发明实施例1提出了解决多层嵌套数组数据响应式的方法，通过组件化数组数据对应的DOM，解决了数组数据响应式问题、提高了代码的可维护性和可读性，并且提高了系统的易用性。
本发明对于页面有交互的数组数据，尤其是数组中包含数组渲染页面有交互的场景，将渲染DOM提取进行组件化。将数组数据(或嵌套的多层数组数据中需要页面交互的数据对象)做为该组件的数据源传入。所有的交互都在组件内进行，因此时组件的数据源为一个对象，VUE对对象属性的数据劫持响应式有效，可以实现正常的页面响应式。实现了多层数组数据对象数据改变，页面响应式更新的效果，间接实现多层数组数据的响应式。最后组件页面改变后要得到的的数据值赋值给该组件的数据源指定属性，即间接实现了多层数组数据结构数据与页面数据的响应式。如图2为本发明实施例1中响应式原理图流程图；其中响应式原理依赖于观察者模式，观察者模式又被称为发布-订阅模式，这种模式定义了对象间的一种一对多的依赖关系。当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知，并完成自动更新。
如图1为本发明实施例1解决多层嵌套数组数据响应式的方法示意图；
确定主文件中具有交互的数组数据和交互DOM；
将交互DOM提取出来并组件化，将数组数据作为组件的数据源传入，使交互业务逻辑封装在组件内部；设置入参接收主文件传入数组数据，使交互业务逻辑封装在组件内部。
为数组数据赋值，以及监听数组数据的变化，更新页面展示。主文件为多层嵌套数据需要交互的数据对象进行入参赋值，监听数组数据的变化，更新页面展示。在组件内添加监测函数监测入参对象数据的变化；所述检测函数包括且不限于watch函数。
该方法还包括在组件中，组件页面数据改变后及时将数据值赋值给数据源对象指定属性。
在该方法中，如果不存在页面交互的数组数据，则正常的执行VUE数据绑定响应式，获取页面最终设置信息数据信息。
本发明实施例1提出的解决多层嵌套数组数据响应式的方法，解决多层嵌套数组数据响应式问题，同时解决，当响应式触发事件较多时，造成页面不停的重新渲染，导致用户无法正常操作的易用性问题。组件化解决多层嵌套数组数据响应问题，也提高了代码的可读性和可维护性。
实施例2
基于本发明实施例1提出的解决多层嵌套数组数据响应式的方法，本发明实施例2提出了解决多层嵌套数组数据响应式的系统，如图3为本发明实施例1解决多层嵌套数组数据响应式的系统示意图。该系统包括确定模块、封装模块和监听模块；
确定模块用于确定主文件中具有交互的数组数据和交互DOM；
封装模块用于将交互DOM提取出来并组件化，将数组数据作为组件的数据源传入，使交互业务逻辑封装在组件内部；
监听模块用于为所述数组数据赋值，以及监听数组数据的变化，更新页面展示。
封装模块执行的过程包括：设置入参接收主文件传入数组数据，使交互业务逻辑封装在组件内部。在组件中，组件页面数据改变后及时将数据值赋值给数据源对象指定属性。
监听模块执行的过程包括：主文件为多层嵌套数据需要交互的数据对象进行入参赋值，在组件内添加监测函数监测入参对象数据的变化，监听数组数据的变化，更新页面展示。
本发明实施例1提出的解决多层嵌套数组数据响应式的系统，解决多层嵌套数组数据响应式问题，同时解决，当响应式触发事件较多时，造成页面不停的重新渲染，导致用户无法正常操作的易用性问题。组件化解决多层嵌套数组数据响应问题，也提高了代码的可读性和可维护性。
实施例3
本发明还提出了一种设备，包括：
存储器，用于存储计算机程序；
处理器，用于执行所述计算机程序时实现方法步骤如下：
本发明对于页面有交互的数组数据，尤其是数组中包含数组渲染页面有交互的场景，将渲染DOM提取进行组件化。将数组数据(或嵌套的多层数组数据中需要页面交互的数据对象)做为该组件的数据源传入。所有的交互都在组件内进行，因此时组件的数据源为一个对象，VUE对对象属性的数据劫持响应式有效，可以实现正常的页面响应式。实现了多层数组数据对象数据改变，页面响应式更新的效果，间接实现多层数组数据的响应式。最后组件页面改变后要得到的的数据值赋值给该组件的数据源指定属性，即间接实现了多层数组数据结构数据与页面数据的响应式。如图2为本发明实施例1中响应式原理图流程图；其中响应式原理依赖于观察者模式，观察者模式又被称为发布-订阅模式，这种模式定义了对象间的一种一对多的依赖关系。当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知，并完成自动更新。
如图1为本发明实施例1解决多层嵌套数组数据响应式的方法示意图；
确定主文件中具有交互的数组数据和交互DOM；
将交互DOM提取出来并组件化，将数组数据作为组件的数据源传入，使交互业务逻辑封装在组件内部；设置入参接收主文件传入数组数据，使交互业务逻辑封装在组件内部。
为数组数据赋值，以及监听数组数据的变化，更新页面展示。主文件为多层嵌套数据需要交互的数据对象进行入参赋值，监听数组数据的变化，更新页面展示。在组件内添加监测函数监测入参对象数据的变化；所述检测函数包括且不限于watch函数。
该方法还包括在组件中，组件页面数据改变后及时将数据值赋值给数据源对象指定属性。
在该方法中，如果不存在页面交互的数组数据，则正常的执行VUE数据绑定响应式，获取页面最终设置信息数据信息。
本发明实施例3提出的解决多层嵌套数组数据响应式的设备，解决多层嵌套数组数据响应式问题，同时解决，当响应式触发事件较多时，造成页面不停的重新渲染，导致用户无法正常操作的易用性问题。组件化解决多层嵌套数组数据响应问题，也提高了代码的可读性和可维护性。
需要说明：本发明技术方案还提供了一种电子设备，包括：通信接口，能够与其它设备比如网络设备等进行信息交互；处理器，与通信接口连接，以实现与其它设备进行信息交互，用于运行计算机程序时，执行上述一个或多个技术方案提供的解决多层嵌套数组数据响应式的方法，而所述计算机程序存储在存储器上。当然，实际应用时，电子设备中的各个组件通过总线系统耦合在一起。可理解，总线系统用于实现这些组件之间的连接通信。总线系统除包括数据总线之外，还包括电源总线、控制总线和状态信号总线。本申请实施例中的存储器用于存储各种类型的数据以支持电子设备的操作。这些数据的示例包括：用于在电子设备上操作的任何计算机程序。可以理解，存储器可以是易失性存储器或非易失性存储器，也可包括易失性和非易失性存储器两者。其中，非易失性存储器可以是只读存储器(ROM，Read Only Memory)、可编程只读存储器(PROM，Programmable Read-Only Memory)、可擦除可编程只读存储器(EPROM，Erasable Programmable Read-Only Memory)、电可擦除可编程只读存储器(EEPROM，Electrically Erasable Programmable Read-Only Memory)、磁性随机存取存储器(FRAM，ferromagnetic random access memory)、快闪存储器(FlashMemory)、磁表面存储器、光盘、或只读光盘(CD-ROM，Compact Disc Read-Only Memory)；磁表面存储器可以是磁盘存储器或磁带存储器。易失性存储器可以是随机存取存储器(RAM，Random AccessMemory)，其用作外部高速缓存。通过示例性但不是限制性说明，许多形式的RAM可用，例如静态随机存取存储器(SRAM，Static Random Access Memory)、同步静态随机存取存储器(SSRAM，Synchronous Static Random Access Memory)、动态随机存取存储器(DRAM，Dynamic Random Access Memory)、同步动态随机存取存储器(SDRAM，SynchronousDynamic Random Access Memory)、双倍数据速率同步动态随机存取存储器(DDRSDRAM，Double Data Rate Synchronous Dynamic Random Access Memory)、增强型同步动态随机存取存储器(ESDRAM，Enhanced Synchronous Dynamic Random AccessMemory)、同步连接动态随机存取存储器(SLDRAM，SyncLink Dynamic Random AccessMemory)、直接内存总线随机存取存储器(DRRAM，Direct Rambus Random Access Memory)。本申请实施例描述的存储器旨在包括但不限于这些和任意其它适合类型的存储器。上述本申请实施例揭示的方法可以应用于处理器中，或者由处理器实现。处理器可能是一种集成电路芯片，具有信号的处理能力。在实现过程中，上述方法的各步骤可以通过处理器中的硬件的集成逻辑电路或者软件形式的指令完成。上述的处理器可以是通用处理器、DSP(Digital Signal Processing，即指能够实现数字信号处理技术的芯片)，或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。处理器可以实现或者执行本申请实施例中的公开的各方法、步骤及逻辑框图。通用处理器可以是微处理器或者任何常规的处理器等。结合本申请实施例所公开的方法的步骤，可以直接体现为硬件译码处理器执行完成，或者用译码处理器中的硬件及软件模块组合执行完成。软件模块可以位于存储介质中，该存储介质位于存储器，处理器读取存储器中的程序，结合其硬件完成前述方法的步骤。处理器执行所述程序时实现本申请实施例的各个方法中的相应流程，为了简洁，在此不再赘述。
实施例4
本发明还提出了一种可读存储介质，可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现方法步骤如下：
本发明对于页面有交互的数组数据，尤其是数组中包含数组渲染页面有交互的场景，将渲染DOM提取进行组件化。将数组数据(或嵌套的多层数组数据中需要页面交互的数据对象)做为该组件的数据源传入。所有的交互都在组件内进行，因此时组件的数据源为一个对象，VUE对对象属性的数据劫持响应式有效，可以实现正常的页面响应式。实现了多层数组数据对象数据改变，页面响应式更新的效果，间接实现多层数组数据的响应式。最后组件页面改变后要得到的的数据值赋值给该组件的数据源指定属性，即间接实现了多层数组数据结构数据与页面数据的响应式。如图2为本发明实施例1中响应式原理图流程图；其中响应式原理依赖于观察者模式，观察者模式又被称为发布-订阅模式，这种模式定义了对象间的一种一对多的依赖关系。当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知，并完成自动更新。
如图1为本发明实施例1解决多层嵌套数组数据响应式的方法示意图；
确定主文件中具有交互的数组数据和交互DOM；
将交互DOM提取出来并组件化，将数组数据作为组件的数据源传入，使交互业务逻辑封装在组件内部；设置入参接收主文件传入数组数据，使交互业务逻辑封装在组件内部。
为数组数据赋值，以及监听数组数据的变化，更新页面展示。主文件为多层嵌套数据需要交互的数据对象进行入参赋值，监听数组数据的变化，更新页面展示。在组件内添加监测函数监测入参对象数据的变化；所述检测函数包括且不限于watch函数。
该方法还包括在组件中，组件页面数据改变后及时将数据值赋值给数据源对象指定属性。
在该方法中，如果不存在页面交互的数组数据，则正常的执行VUE数据绑定响应式，获取页面最终设置信息数据信息。
本发明实施例4提出的解决多层嵌套数组数据响应式的存储介质，解决多层嵌套数组数据响应式问题，同时解决，当响应式触发事件较多时，造成页面不停的重新渲染，导致用户无法正常操作的易用性问题。组件化解决多层嵌套数组数据响应问题，也提高了代码的可读性和可维护性。
本申请实施例还提供了一种存储介质，即计算机存储介质，具体为计算机可读存储介质，例如包括存储计算机程序的存储器，上述计算机程序可由处理器执行，以完成前述方法所述步骤。计算机可读存储介质可以是FRAM、ROM、PROM、EPROM、EEPROM、Flash Memory、磁表面存储器、光盘、或CD-ROM等存储器。
本领域普通技术人员可以理解：实现上述方法实施例的全部或部分步骤可以通过程序指令相关的硬件来完成，前述的程序可以存储于一计算机可读取存储介质中，该程序在执行时，执行包括上述方法实施例的步骤；而前述的存储介质包括：移动存储设备、ROM、RAM、磁碟或者光盘等各种可以存储程序代码的介质。或者，本申请上述集成的单元如果以软件功能模块的形式实现并作为独立的产品销售或使用时，也可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请实施例的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台电子设备(可以是个人计算机、服务器、或者网络设备等)执行本申请各个实施例所述方法的全部或部分。而前述的存储介质包括：移动存储设备、ROM、RAM、磁碟或者光盘等各种可以存储程序代码的介质。
本申请实施例提供的解决多层嵌套数组数据响应式的设备和存储介质中相关部分的说明可以参见本申请实施例1提供的解决多层嵌套数组数据响应式的方法中对应部分的详细说明，在此不再赘述。
需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。另外，本申请实施例提供的上述技术方案中与现有技术中对应技术方案实现原理一致的部分并未详细说明，以免过多赘述。
上述虽然结合附图对本发明的具体实施方式进行了描述，但并非对本发明保护范围的限制。对于所属领域的技术人员来说，在上述说明的基础上还可以做出其它不同形式的修改或变形。这里无需也无法对所有的实施方式予以穷举。在本发明的技术方案的基础上，本领域技术人员不需要付出创造性劳动即可做出的各种修改或变形仍在本发明的保护范围以内。
Claims (10)
1.解决多层嵌套数组数据响应式的方法，其特征在于，包括以下步骤：
确定主文件中具有交互的数组数据和交互DOM；
将所述交互DOM提取出来并组件化，将所述数组数据作为组件的数据源传入，使交互业务逻辑封装在组件内部；
为所述数组数据赋值，以及监听数组数据的变化，更新页面展示。
2.根据权利要求1所述的解决多层嵌套数组数据响应式的方法，其特征在于，所述方法还包括：在组件中，组件页面数据改变后及时将数据值赋值给数据源对象指定属性。
3.根据权利要求1所述的解决多层嵌套数组数据响应式的方法，其特征在于，所述将所述数组数据作为组件的数据源传入，使交互业务逻辑封装在组件内部的过程为：设置入参接收主文件传入数组数据，使交互业务逻辑封装在组件内部。
4.根据权利要求3所述的解决多层嵌套数组数据响应式的方法，其特征在于，所述为所述数组数据赋值，以及监听数组数据的变化，更新页面展示的过程包括：主文件为多层嵌套数据需要交互的数据对象进行入参赋值，监听数组数据的变化，更新页面展示。
5.根据权利要求4所述的解决多层嵌套数组数据响应式的方法，其特征在于，所述监听数组数据的变化的方法为：在组件内添加监测函数监测入参对象数据的变化；所述检测函数包括且不限于watch函数。
6.解决多层嵌套数组数据响应式的系统，其特征在于，包括确定模块、封装模块和监听模块；
所述确定模块用于确定主文件中具有交互的数组数据和交互DOM；
所述封装模块用于将所述交互DOM提取出来并组件化，将所述数组数据作为组件的数据源传入，使交互业务逻辑封装在组件内部；
所述监听模块用于为所述数组数据赋值，以及监听数组数据的变化，更新页面展示。
7.根据权利要求6所述的解决多层嵌套数组数据响应式的系统，其特征在于，所述封装模块执行的过程包括：设置入参接收主文件传入数组数据，使交互业务逻辑封装在组件内部。
8.根据权利要求6所述的解决多层嵌套数组数据响应式的系统，其特征在于，所述监听模块执行的过程包括：主文件为多层嵌套数据需要交互的数据对象进行入参赋值，在组件内添加监测函数监测入参对象数据的变化，监听数组数据的变化，更新页面展示。
9.一种设备，其特征在于，包括：
存储器，用于存储计算机程序；
处理器，用于执行所述计算机程序时实现如权利要求1至5任意一项所述的方法步骤。
10.一种可读存储介质，其特征在于，所述可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现如权利要求1至5任意一项所述的方法步骤。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111680351.8A CN114327564A (zh) | 2021-12-30 | 2021-12-30 | 解决多层嵌套数组数据响应式的方法、系统、设备和介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111680351.8A CN114327564A (zh) | 2021-12-30 | 2021-12-30 | 解决多层嵌套数组数据响应式的方法、系统、设备和介质 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN114327564A true CN114327564A (zh) | 2022-04-12 |
Family
ID=81023772
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202111680351.8A Withdrawn CN114327564A (zh) | 2021-12-30 | 2021-12-30 | 解决多层嵌套数组数据响应式的方法、系统、设备和介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114327564A (zh) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114995817A (zh) * | 2022-08-03 | 2022-09-02 | 杭州乾冠数字物联技术有限公司 | 基于Vuex的web页面大屏数据处理方法 |
| CN115080046A (zh) * | 2022-08-16 | 2022-09-20 | 之江实验室 | 一种页面设计中多组件抽象关联融合方法和装置 |
-
2021
- 2021-12-30 CN CN202111680351.8A patent/CN114327564A/zh not_active Withdrawn
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114995817A (zh) * | 2022-08-03 | 2022-09-02 | 杭州乾冠数字物联技术有限公司 | 基于Vuex的web页面大屏数据处理方法 |
| CN115080046A (zh) * | 2022-08-16 | 2022-09-20 | 之江实验室 | 一种页面设计中多组件抽象关联融合方法和装置 |
| CN115080046B (zh) * | 2022-08-16 | 2022-11-11 | 之江实验室 | 一种页面设计中多组件抽象关联融合方法和装置 |
| US12086534B2 (en) | 2022-08-16 | 2024-09-10 | Zhejiang Lab | Multi-component abstract association and fusion method and apparatus in page design |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN107395665B (zh) | 一种区块链业务受理及业务共识方法及装置 | |
| CN114327564A (zh) | 解决多层嵌套数组数据响应式的方法、系统、设备和介质 | |
| CN106980625B (zh) | 一种数据同步方法、装置及系统 | |
| CN111639289A (zh) | 一种网页加载方法及装置 | |
| CN107678780B (zh) | 一种内存管理方法、装置、存储介质及终端设备 | |
| US10324760B2 (en) | Leases for blocks of memory in a multi-level memory | |
| CN112631679B (zh) | 一种微应用的预加载方法及装置 | |
| CN106657356A (zh) | 一种云存储系统的数据写入方法、装置及云存储系统 | |
| CN111506232B (zh) | 一种用于在阅读应用中控制菜单显示的方法与设备 | |
| CN112836152A (zh) | 页面渲染方法、系统、计算机设备及计算机可读存储介质 | |
| CN104268229A (zh) | 一种基于多进程浏览器的资源获得方法及装置 | |
| CN114020652A (zh) | 一种应用程序的管理方法及电子设备 | |
| CN104246693A (zh) | 用于保护调用栈中的数据的信息处理装置和方法 | |
| CN112363841A (zh) | 应用进程的查杀方法、装置、电子设备及存储介质 | |
| CN108491315A (zh) | 页面驻留时长的统计方法、装置及计算机可读存储介质 | |
| CN114328548B (zh) | 双存储池数据淘汰速度控制方法、系统、终端及存储介质 | |
| CN115758004A (zh) | 网页表格的展示方法、装置、计算机可读介质及电子设备 | |
| CN113591000A (zh) | 一种浏览器引擎的切换方法和装置及设备 | |
| CN110413800B (zh) | 一种提供小说信息的方法与设备 | |
| CN114547422A (zh) | 一种防止重复点击页面元素的方法和装置 | |
| CN107766196B (zh) | 对计算设备进行启动检查的方法与设备 | |
| CN111881212A (zh) | 执行检查点操作的方法、装置、设备及存储介质 | |
| EP3049890A1 (en) | Power consumption reduction in a computing device | |
| CN112256992A (zh) | 一种融合多链接地址的信息流的原生渲染的方法与设备 | |
| CN104620563B (zh) | 一种用于减少计算设备的网络使用的方法和系统 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| WW01 | Invention patent application withdrawn after publication |
Application publication date: 20220412 |
|
| WW01 | Invention patent application withdrawn after publication |