CN112527294A

CN112527294A - 一种vue的双向绑定方法及相关装置

Info

Publication number: CN112527294A
Application number: CN202011509270.7A
Authority: CN
Inventors: 张明; 张世杰; 焦伟哲
Original assignee: Jilin Yillion Bank Co ltd
Current assignee: Jilin Yillion Bank Co ltd
Priority date: 2020-12-18
Filing date: 2020-12-18
Publication date: 2021-03-19

Abstract

本申请提供了一种vue的双向绑定方法及相关装置，其中，方法可以包括：在接收到用于表征对目标对象新增属性的指令的情况下，调用预设的set方法；所述set方法为所述新增属性添加数据监听、数据劫持以及订阅中心；如果所述新增属性为用于渲染页面的属性，则所述目标对象的监听器在监听到所述新增属性的内容的变化的情况下，将变化内容发送给所述新增属性的订阅中心；所述新增属性的订阅中心将所述变化内容发送给所述vue中的订阅中心的服务对象；服务对象依据所述变化内容，对页面进行更新。本申请可以解决对初始化实例生成的对象新增属性，由于无法监听到新增属性的内容的变化导致无法更新页面的问题。

Description

一种vue的双向绑定方法及相关装置

技术领域

本申请涉及软件处理领域，尤其涉及一种vue的双向绑定方法及相关装置。

背景技术

在MVVM框架中，View(视图)和Model(数据)是不可以直接通讯的，在它们之间存在着ViewModel(即vue)这个中介充当着观察者的角色。当用户操作View(视图)，ViewModel感知到变化，然后通知Model(数据)发生相应改变；反之当Model发生改变，ViewModel也能感知到变化，使View作出相应更新。该一来一回的过程就是vue双向绑定。

MVVM框架的好处显而易见：当前端对数据(Model)进行更改的时候，可以通过Ajax请求对数据持久化，只需改变vue的dom中的变化部分，而不必刷新整个页面。即只需针对更改的数据，对页面进行更新即可。

但是，对于初始化实例生成对象后，如果对该对象新增属性，vue无法监听到新增属性的内容的变化，因此，出现双向绑定失效的问题。即当新增属性的内容发生变化时，vue感知不到，从而，不能使View做出相应的更新。

发明内容

本申请提供了一种vue的双向绑定方法及相关装置，目的在于解决对初始化实例生成的对象新增属性，由于无法监听到新增属性的内容的变化导致无法更新页面的问题。

为了实现上述目的，本申请提供了以下技术方案：

本申请提供了一种vue双向绑定方法，应用于vue，包括：

在接收到用于表征对目标对象新增属性的指令的情况下，调用预设的set方法；所述set方法在所述vue中为所述新增属性添加数据监听、数据劫持以及订阅中心；

如果所述新增属性为用于渲染页面的属性，则所述目标对象的监听器在监听到所述新增属性的内容变化的情况下，将变化内容发送给所述新增属性的订阅中心；

所述新增属性的订阅中心将所述变化内容发送给所述vue中所述订阅中心的服务对象；

所述服务对象依据所述变化内容，对页面进行更新。

可选的，所述新增属性的订阅中心包括：触发时间；所述触发时间用于指示：所述目标对象的监听器监听到所述新增属性的内容变化的情况下，将所述新增属性的变化内容发送给所述新增属性的订阅中心的时间；

所述目标对象的监听器在监听到所述新增属性的内容变化的情况下，将变化内容发送给所述新增属性的订阅中心，包括：

所述目标对象的监听器在监听到所述新增属性的内容变化的情况下，依据所述触发时间，将变化内容发送给所述新增属性的订阅中心。

可选的，所述set方法在所述vue中为所述新增属性添加数据监听、数据劫持以及订阅中心的过程，包括：

在所述目标对象存在监听器的情况下，所述目标对象的监听器遍历所述目标对象的每个属性，将未添加数据监听和数据劫持的属性作为所述新增属性；

对所述新增属性添加数据监听和数据劫持；

对所述新增属性添加订阅中心。

可选的，还包括：

在所述目标对象不存在监听器的情况下，在所述vue中为所述目标对象创建一个监听器。

本申请还提供了一种vue双向绑定装置，包括：

调用模块，用于在接收到用于表征对目标对象新增属性的指令的情况下，调用预设的set方法；所述set方法在所述vue中为所述新增属性添加数据监听、数据劫持以及订阅中心；

第一发送模块，用于如果所述新增属性为用于渲染页面的属性，则通过所述目标对象的监听器在监听到所述新增属性的内容变化的情况下，将变化内容发送给所述新增属性的订阅中心；

第二发送模块，用于通过所述新增属性的订阅中心将所述变化内容发送给所述vue中所述订阅中心的服务对象；

更新模块，用于通过所述服务对象依据所述变化内容，对页面进行更新。

所述第一发送模块，用于通过目标对象的监听器在监听到所述新增属性的内容变化的情况下，将变化内容发送给所述新增属性的订阅中心，包括：

所述第一发送模块，具体用于通过所述目标对象的监听器在监听到所述新增属性的内容变化的情况下，依据所述触发时间，将变化内容发送给所述新增属性的订阅中心。

可选的，还包括：执行模块，用于通过所述set方法在所述vue中为所述新增属性添加数据监听、数据劫持以及订阅中心；

所述执行模块，用于通过所述set方法在所述vue中为所述新增属性添加数据监听、数据劫持以及订阅中心，包括：

所述执行模块，具体用于在所述目标对象存在监听器的情况下，通过所述目标对象的监听器遍历所述目标对象的每个属性，将未添加数据监听和数据劫持的属性作为所述新增属性；对所述新增属性添加数据监听和数据劫持；对所述新增属性添加订阅中心。

可选的，所述执行模块，还用于通过所述set方法，在所述目标对象不存在监听器的情况下，在所述vue中为所述目标对象创建一个监听器。

本申请还提供了一种存储介质，所述存储介质包括存储的程序，其中，所述程序执行上述任意一所述的vue双向绑定方法。

本申请还提供了一种设备，所述设备包括至少一个处理器、以及与所述处理器连接的至少一个存储器、总线；其中，所述处理器、所述存储器通过所述总线完成相互间的通信；所述处理器用于调用所述存储器中的程序指令，以执行上述任一所述的vue双向绑定方法。

本申请所述的vue的双向绑定方法及装置，在接收到用于表征对目标对象新增属性的指令的情况下，调用预设的set方法；由于set方法可以为该新增属性添加数据监听、数据劫持以及订阅中心，使得在新增属性的内容发生变化的情况下，vue中目标对象的监听器可以监听到该新增属性的内容的变化。

并且，如果该新增属性为用于渲染页面的属性，则目标对象的监听器在监听到该新增属性的内容的变化的情况下，将变化内容发送给该新增属性的订阅中心；该新增属性的订阅中心将变化内容发送给vue中订阅中心的服务对象；该服务对象依据变化内容，对页面进行更新。从而，实现了对该新增属性的内容的变化的监听，以及依据监听到的变化内容，对页面进行更新。

综上所述，本申请可以解决现有技术中，对初始化实例生成的对象新增属性，由于无法监听到新增属性的内容的变化导致无法更新页面的问题。

附图说明

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

图1为本申请实施例公开的一种vue的双向绑定方法的流程图；

图2为本申请实施例公开的对目标对象的新增属性的内容监听和更新页面的过程示意图；

图3(a)为本申请实施例公开的对“test对象”新增属性的代码示意图；

图3(b)为本申请实施例公开的对“test对象”的打印结果示意图；

图3(c)为本申请实施例公开的目标对象的“observer”的展开结果示意图；

图3(d)为本申请实施例公开的为属性“k3”添加的订阅中心的源码内容示意图；

图4为本申请实施例公开的vue的双向绑定装置的结构示意图；

图5为本申请实施例公开的一种设备的结构示意图。

具体实施方式

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

申请人在研究中发现，vue发生双向绑定失效的根本原因是：对于存储在vue的data对象的实例，在初始化该实例的过程中，vue对该实例中已定义的属性执行数据监听和数据劫持(即getter/setter)转化。其中，执行数据监听和数据劫持转化后的属性的内容的变化，会被vue监听到，进而，vue可以依据监听到的变化数据，对页面进行更新。即在实例初始化前，已在实例中定义的属性，才能被Vue转换为响应式属性(转换为具有数据监听和数据劫持的属性)。对于初始化实例得到对象后，Vue可以允许针对该对象，新增属性，但是，不允许针对该对象，动态添加新的响应式属性。并且，对于新增属性，vue无法监听到该新增属性的内容的变化，进而导致双向绑定失效。

申请人进一步研究发现，在对实例初始化生成的对象，如果针对该对象新增属性，vue无法监听到该新增属性的内容的变化的根本原因是：该新增属性不存在数据监听、数据劫持和订阅中心，使得vue不能监听到新增属性的内容的变化，进而，无法对页面作相应更新，即双向绑定失效。

在本申请实施例中，在接收到新增属性以及对新增属性进行赋值的指令的情况下，调用预设的set方法，使得set方法对每个新增属性，分别添加数据监听、数据劫持以及订阅中心，在添加的订阅中心生效后，vue就可以监听到新增属性的内容的变化，从而，根据变化的内容更新View，从而，解决新增属性的双向绑定失效的问题。

图1为本申请实施例提供的vue双向绑定方法，执行主体为vue，可以包括以下步骤：

S101、在接收到用于表征对目标对象新增属性的指令的情况下，调用预设的set方法。

在本实施例中，目标对象指：初始化实例生成的对象中，待新增属性的对象。在实际中，目标对象可以根据实际情况确定。在本步骤中，指令中包括目标对象的信息。

在本实施例中，目标对象的新增属性可以为对目标对象新增的根级属性，也可以为目标对象的任一属性新增的从属性。

在本实施例中，set方法为新增属性添加数据监听、数据劫持以及订阅中心的执行流程，可以包括步骤A1～A8：

A1、判断目标对象是否存在监听器，如果否，则执行A2，如果是，则执行A3。

在本实施例中，初始化实例得到的对象，应该存在一个监听器。因此，在本步骤中，判断目标对象是否存在监听器。

A2、为目标对象创建一个监听器。

执行完本步骤后，执行步骤A3。

A3、目标对象的监听器遍历目标对象的每个属性，将未添加数据监听和数据劫持的属性，作为新增属性。

A4、对新增属性添加数据监听和数据劫持。

A5、对新增属性添加订阅中心。

A6、在目标对象的全部新增属性都已添加数据劫持之后，调用dep.notify()方法。

在本实施例中，dep.notify()方法中存储每个属性的触发时间，其中，任一属性的触发时间指：该属性的内容发生变化时，将该属性的变化内容发送给该属性的订阅中心的时间(订阅观察者模式)。

S102、目标对象的监听器在监听到新增属性的内容变化的情况下，将新增属性的变化内容发送给新增属性的订阅中心。

可选的，在本步骤中，目标对象的监听器在监听到新增属性的内容的变化的情况下，在新增属性的订阅中心的触发时间，将新增属性的内容发送给新增属性的订阅中心。

S103、新增属性的订阅中心将新增属性的变化内容发送给订阅中心的服务对象。

S104、服务对象依据新增属性的变化内容，对页面进行更新。

在实际中，在对目标对象的新增属性添加数据监听、数据劫持以及订阅中心后，vue对目标对象的新增属性的内容变化的监听，以及依据变化内容更新页面的过程，如图2所示。

在图2中，“Observer”表示目标对象的监听器，可翻译为“发布者”，“Dep”表示订阅中心，“Watcher”表示订阅中心的服务对象，“View”表示页面，“Compile”表示编译解析过程，包含解析器。

其中，目标对象的监听器用来劫持并监听目标对象的全部属性，如果任一属性的内容发生变化的情况下，将该属性的变化内容发送给该属性的订阅中心。该属性的订阅中心将变化内容发送给Watcher，Watcher依据变化内容，对页面进行更新。

在图2中，编译解析过程包括解析器、优化器和代码生成器，其中，解析器是整个编译中的第一部分，主要功能是将项目转换成抽象语法树(AST)；优化器对抽象语法树进行静态节点的标记，以优化渲染过程。代码生成器根据AST生成一个render函数字符串函数。。编译解析过程与Watcher之间绑定更新函数，更新函数指：更新render函数的字符串函数，可以单纯将更新函数看作一种特殊的计算函数，当Watcher对象发生变化时，render函数进行更新，然后就会生成新的virutal-dom结构，再交由Vue做比较，更新视图。

编译解析过程与“View”之间的初始化过程表示：页面生成时刻，将变量对象赋为默认值，将控件设置为默认状态，但是没有对页面做其他操作(如请求，跳转等)。

为了更直观展示本申请实施例实现的vue双向绑定的具体过程，在该过程中，目标对象以“test对象”为例进行介绍。图3(a)为对“test对象”新增属性的代码示意图。

在图3(a)中，“mounted()”上面的代码部分是初始化实例时，实例中对“test对象”定义了“k1”和“k2”两个属性。从“mounted()”开始以及以下部分表示新增属性“k3”，并且，为新增属性“k3”的赋值为“3”。即在初始化实例生成“test对象”时，已为“test对象”添加了“k1”和“k2”两个属性，在初始化完成后，又添加了一个新的属性“k3”。

在新增属性“k3”后，打印了“test对象”，打印结果如图3(b)所示。从图3(b)中，第二行中的“—ob—”表示“test对象”的监听器。

在本实施例中，调用set方法，set方法判断“test对象”是否存在监听器，如果不存在，则新增一个用于监听的监听器。如果存在，则“test对象”的监听器遍历“test对象”的属性，判断每个属性是否已添加数据监听和数据劫持。

将图3(b)中的“observer”展开，得到如图3(c)所示的展开结果。从图3(c)可以看出，“test对象”的三个属性里，“k1”和“k2”有数据监听和数据劫持(即getter和setter)，而“k3”虽然有值，但是没有数据监听和数据劫持。因此，假如页面中渲染部分有用到“test.k3”，就会出现双向绑定失效问题。

因此，set方法为属性“k3”添加数据监听和数据劫持。并为属性“k3”添加一个订阅中心。在本实施例中，也可以将订阅中心看作是一个事件中心，所有的监听都存储到订阅中心中。并且，每一个订阅中心都有对应的ID标识，该ID标识表示唯一的订阅中心自增的标识。

在本实施例中，为属性“k3”添加的订阅中心的源码内容如图3(d)所示，从图3(d)中可以看出，在订阅中心源码中存在“addSubremove”、“Subdep end”和“notify”等方法，用于操作对应的监听，添加，删除，找到对应的依赖，通知等。

当“test对象”的全部属性都添加了数据监听和数据劫持之后，调用dep.notify()方法，该方法中存储每个属性的触发时间。任一属性的触发时间表示：该属性的内容发生变化后，将该属性的变化内容发送给该属性的订阅中心的时间(订阅观察者模式)。

在为属性“k3”添加订阅中心后，“test对象”的监听器就可以监听到“k3”属性的内容的变化，进而，可以依据监听到的变化内容，对页面进行更新。具体的，监听“k3”属性的内容的变化，以及依据变化的内容更新页面的过程如图2所示。即目标对象的监听器监听到“k3”属性的内容的变化的情况下，在“k3”属性的触发时间，将监听到的变化内容发送给“k3”属性的订阅中心，订阅中心将变化内容发送给Watcher，Watcher依据变化内容，对页面进行更新。

图4为本申请实施例提供的一种vue的双向绑定装置，可以包括：调用模块401、第一发送模块402、第二发送模块403和更新模块404，

调用模块401，用于在接收到用于表征对目标对象新增属性的指令的情况下，调用预设的set方法；所述set方法在所述vue中为所述新增属性添加数据监听、数据劫持以及订阅中心；

第一发送模块402，用于如果所述新增属性为用于渲染页面的属性，则通过所述目标对象的监听器在监听到所述新增属性的内容变化的情况下，将变化内容发送给所述新增属性的订阅中心；

第二发送模块403，用于通过所述新增属性的订阅中心将所述变化内容发送给所述vue中所述订阅中心的服务对象；

更新模块404，用于通过所述服务对象依据所述变化内容，对页面进行更新。

所述第一发送模块402，用于通过目标对象的监听器在监听到所述新增属性的内容变化的情况下，将变化内容发送给所述新增属性的订阅中心，包括：

所述第一发送模块402，具体用于通过所述目标对象的监听器在监听到所述新增属性的内容变化的情况下，依据所述触发时间，将变化内容发送给所述新增属性的订阅中心。

可选的，该装置还可以包括：执行模块，用于通过所述set方法在所述vue中为所述新增属性添加数据监听、数据劫持以及订阅中心；

Vue双向绑定装置包括处理器和存储器，上述调用模块401、第一发送模块402、第二发送模块403和更新模块404等均作为程序单元存储在存储器中，由处理器执行存储在存储器中的上述程序单元来实现相应的功能。

处理器中包含内核，由内核去存储器中调取相应的程序单元。内核可以设置一个或以上，通过调整内核参数来解决对初始化实例生成的对象新增属性，由于无法监听到新增属性的内容的变化导致无法更新页面的问题。

本发明实施例提供了一种存储介质，其上存储有程序，该程序被处理器执行时实现所述Vue双向绑定方法。

本发明实施例提供了一种处理器，所述处理器用于运行程序，其中，所述程序运行时执行所述Vue双向绑定方法。

本发明实施例提供了一种设备，如图5所示，设备包括至少一个处理器、以及与处理器连接的至少一个存储器、总线；其中，处理器、存储器通过总线完成相互间的通信；处理器用于调用存储器中的程序指令，以执行上述的vue双向绑定方法。本文中的设备可以是服务器、PC、PAD、手机等。

本申请还提供了一种计算机程序产品，当在数据处理设备上执行时，适于执行初始化有如下方法步骤的程序：

所述服务对象依据所述变化内容，对页面进行更新。

本申请是参照根据本申请实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

在一个典型的配置中，设备包括一个或多个处理器(CPU)、存储器和总线。设备还可以包括输入/输出接口、网络接口等。

存储器可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)，存储器包括至少一个存储芯片。存储器是计算机可读介质的示例。

计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。

还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括要素的过程、方法、商品或者设备中还存在另外的相同要素。

本领域技术人员应明白，本申请的实施例可提供为方法、系统或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

以上仅为本申请的实施例而已，并不用于限制本申请。对于本领域技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本申请的权利要求范围之内。

本申请实施例方法所述的功能如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算设备可读取存储介质中。基于这样的理解，本申请实施例对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该软件产品存储在一个存储介质中，包括若干指令用以使得一台计算设备(可以是个人计算机，服务器，移动计算设备或者网络设备等)执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。

本说明书的各个实施例中记载的特征可以相互替换或者组合，每个实施例重点说明的都是与其它实施例的不同之处，各个实施例之间相同或相似部分互相参见即可。

对所公开的实施例的上述说明，使本领域专业技术人员能够实现或使用本申请。对这些实施例的多种修改对本领域的专业技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本申请的精神或范围的情况下，在其它实施例中实现。因此，本申请将不会被限制于本文所示的这些实施例，而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。

Claims

1.一种vue双向绑定方法，其特征在于，应用于vue，包括：

所述服务对象依据所述变化内容，对页面进行更新。

2.根据权利要求1所述的方法，其特征在于，所述新增属性的订阅中心包括：触发时间；所述触发时间用于指示：所述目标对象的监听器监听到所述新增属性的内容变化的情况下，将所述新增属性的变化内容发送给所述新增属性的订阅中心的时间；

3.根据权利要求1所述的方法，其特征在于，所述set方法在所述vue中为所述新增属性添加数据监听、数据劫持以及订阅中心的过程，包括：

对所述新增属性添加数据监听和数据劫持；

对所述新增属性添加订阅中心。

4.根据权利要求3所述的方法，其特征在于，还包括：

5.一种vue双向绑定装置，其特征在于，包括：

6.根据权利要求5所述的装置，其特征在于，所述新增属性的订阅中心包括：触发时间；所述触发时间用于指示：所述目标对象的监听器监听到所述新增属性的内容变化的情况下，将所述新增属性的变化内容发送给所述新增属性的订阅中心的时间；

7.根据权利要求5所述的装置，其特征在于，还包括：执行模块，用于通过所述set方法在所述vue中为所述新增属性添加数据监听、数据劫持以及订阅中心；

8.根据权利要求7所述的装置，其特征在于，

所述执行模块，还用于通过所述set方法，在所述目标对象不存在监听器的情况下，在所述vue中为所述目标对象创建一个监听器。

9.一种存储介质，其特征在于，所述存储介质包括存储的程序，其中，所述程序执行权利要求1～4任意一项所述的vue双向绑定方法。

10.一种设备，其特征在于，所述设备包括至少一个处理器、以及与所述处理器连接的至少一个存储器、总线；其中，所述处理器、所述存储器通过所述总线完成相互间的通信；所述处理器用于调用所述存储器中的程序指令，以执行如权利要求1～4中任一项所述的vue双向绑定方法。