vue响应式原理理解

vue响应式原理理解要理解响应式原理,首先要理解两个问题,数据改变后,Vue是如何监听的,要通知哪些人然后进行界面的刷新首先来理解一下下面这这个监听数值改变与监听获取数据的函数,首先创建一个对象,然后这个对象就是用来被监听的,首先使用forEach来把对象里面所有的值取出来放到value这里,然后再defindeProperty里面重新定义,这个方法里面有一个set和get方法,分别是处理监听数据改变和数据被获取…

大家好,又见面了,我是你们的朋友全栈君。

要理解响应式原理,首先要理解两个问题,数据改变后,Vue是如何监听的,要通知哪些人然后进行界面的刷新
在这里插入图片描述
首先来理解一下下面这这个监听数值改变与监听获取数据的函数,首先创建一个对象,然后这个对象就是用来被监听的,首先使用forEach来把对象里面所有的值取出来放到value这里,然后再defindeProperty里面重新定义,这个方法里面有一个set和get方法,分别是处理监听数据改变和数据被获取的,

在这里插入图片描述
上面就解决第一个问题:当数值的改变的时候或者被人获取数值的时候,能够监听到
然后下面就解决第二个问题,当数值改变的时候,如何实现界面更新呢,就需要找到谁再用这个属性,然后通知这些人数值改变了,然后来进行数值更新,
那么从哪里开始寻找这些人呢,其实谁使用这些属性,就需要执行一次get方法,所以谁执行get方法,就是谁
现在就是用订阅者模式
首先创建两个类,分别是发布者和订阅者,再里面的构造函数里面定义自己的属性和变量,然后再类里定义一个把订阅者存起来的数组
在这里插入图片描述
然后写订阅者,再构造函数里定义自己属性和变量,然后定义一个如果本身收到数值改变的信号,自己就执行这个方法,new一下自己把参数传进去,然后把值存到发布者那里,

在这里插入图片描述
接下来就是如果监听到数值发发生改变,然后就需要发送信号给使用这些数值的人,那么谁来发通知呢,就是notify这个方法
在这里插入图片描述
再收到改变的信号后就执行改变数值的方法。
再看图解,一个属性就会创建一个Dep对象监听它的状态
在这里插入图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/133688.html原文链接:https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 什么是透传(虚拟服务器地址)

    moxa串口服务器配置点对点透传模式步骤MOXA串口服务器基本要点:使用TCP/IP通讯协议,需要2个串口服务器配对使用。将串口服务器A设置为Server模式(出厂默认模式),另一个串口服务器B设置为Client模式。将串口服务器B要连接的远程主机地址和端口,设置为A的IP地址和监听端口,即可完成配对。RS232/RS485串口服务器A(Client)串口服务器B(Server)RS232/RS4…

    2022年4月10日
  • c语言findwindowex函数用法,VB中findwindowex函数的用法?

    c语言findwindowex函数用法,VB中findwindowex函数的用法?FindWindowEx函数函数功能:在窗口列表中寻找与指定条件相符的第一个子窗口。该函数获得一个窗口的句柄,该窗口的类名和窗口名与给定的字符串相匹配。这个函数查找子窗口,从排在给定的子窗口后面的下一个子窗口开始。在查找时不区分大小写。参数:(1)hwndParent:要查找的子窗口所在的父窗口的句柄(如果设置了hwndParent,则表示从这个hwndParent指向的父窗口中搜索子窗口)。如…

    2022年5月31日
  • Windows快速搭建FTP服务器

    Windows快速搭建FTP服务器Windows快速搭建FTP服务器一、准备条件二、搭建过程2.1配置IISWeb服务器2.2在IIS中配置FTP站点2.3测试FTP站点2.4创建FTP用户三、搭建问题3.1如何改变FTP的登录访问设置?3.2机器IP发生变化了,如何修改IP地址或端口?3.3如何设置多IP?一、准备条件Windows操作系统二、搭建过程2.1配置IISWeb服务器(1)依次打开控制面板->程序->启用或关闭windows功能上述操作也可以直接使用Win+R,在运行

    2022年7月15日
  • [iOS]各种定时器–最全的定时器使用

    [iOS]各种定时器–最全的定时器使用

    2022年3月4日
  • idea2021 mybatiscodehelper2.9 激活码【2021免费激活】

    (idea2021 mybatiscodehelper2.9 激活码)这是一篇idea技术相关文章,由全栈君为大家提供,主要知识点是关于2021JetBrains全家桶永久激活码的内容https://javaforall.net/100143.htmlIntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,上面是详细链接哦~0YQJ1128OW-eyJsaWNlb…

    2022年3月28日
  • oracle 存储过程打印语句,oracle 存储过程语句总结[通俗易懂]

    oracle 存储过程打印语句,oracle 存储过程语句总结[通俗易懂]1、ExitWhen循环:createorreplaceprocedureproc_test_exit_whenisinumber;begini:=0;LOOPExitWhen(i>5);Dbms_Output.put_line(i);i:=i+1;ENDLOOP;endproc_test_exit_when;createorreplaceprocedureproc_te…

    2022年7月17日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号