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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • X-UA-Compatible IE 浏览器默认文档模式设置「建议收藏」

    X-UA-Compatible IE 浏览器默认文档模式设置

    2022年1月26日
    54
  • 任务型sql

    任务型sql

    2022年2月22日
    46
  • JavaDoc的生成规则—ShinePans

    JavaDoc的生成规则—ShinePans

    2022年1月26日
    41
  • Windows搭建SVN服务器「建议收藏」

    Windows搭建SVN服务器「建议收藏」写这篇文章其实是弥补6年前的一个遗憾,之前在第一家公司时,快要离职时,帮公司搭建一个SVN服务器,当时在Linux上面搭建,搭建的服务器不支持HTTP协议,无法在浏览器中查看,限于当时的能力,未能找到具体的解决方案。今天听同事在提SVN服务器,突然想搭建一个,搭建之后,Windows环境可以直接通过http协议访问,就这样吧,后续遇到SVN使用的具体问题再细究吧。需要的软件S…

    2022年7月19日
    13
  • Bytebuf_分析报告图文

    Bytebuf_分析报告图文ByteBuf是什么ByteBuf是Netty中非常重要的一个组件,他就像物流公司的运输工具:卡车,火车,甚至是飞机。而物流公司靠什么盈利,就是靠运输货物,可想而知ByteBuf在Netty中是多么的重要。没有了ByteBuf,Netty就失去了灵魂,其他所有的都将变得毫无意义。ByteBuf是由Byte和Buffer两个词组合成的一个词,但是因为JDK中已经有了一个ByteBuffer,并且使用…

    2022年9月19日
    3
  • 多个excel表格批量替换名称_bat文件名批量替换固定位置

    多个excel表格批量替换名称_bat文件名批量替换固定位置今天在替换开机动画时,遇到了批量替换文件名的固定部分的问题,相信大家都遇到过。如果你还没有很好的办法,可以试试下面的方式(请看解决步骤)。分析问题先看下236个图片文件的名字,分析“2019.06.06海尔小哈联名logo_00000.jpg”与“p01_sys_logo0000.jpg”的区别; 发现需要把每个图片名字的“2019.06.06海尔小哈联名logo_0”改为“p01_…

    2025年7月21日
    3

发表回复

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

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