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


相关推荐

  • 理解group by[通俗易懂]

    理解group by[通俗易懂]先来看下表1,表名为test: 表1  执行如下SQL语句: 1 2 SELECT name FROM test GROUP BY name   你应该很容易知道运行的结果,没错,就是下表2: 表2  可是为了能够更好的理解“groupby”多个列“和”聚合函数“的应用,我建议在思考的过程中,由表1到表2的过程中…

    2022年5月26日
    29
  • html表格居中代码怎么写_html代码大全(很全的)

    html表格居中代码怎么写_html代码大全(很全的)<table align=”center”> </table>

    2022年9月19日
    0
  • pytest重试_pycharmrun不了

    pytest重试_pycharmrun不了安装:pip3installpytest-rerunfailures重新运行所有失败用例要重新运行所有测试失败的用例,请使用–reruns命令行选项,并指定要运行测试的最大次数:$py

    2022年7月31日
    3
  • 3分钟告诉你如何成为一名黑客?|零基础到黑客入门指南,你只需要掌握这五点能力

    3分钟告诉你如何成为一名黑客?|零基础到黑客入门指南,你只需要掌握这五点能力三分钟带各位揭秘黑客究竟是什么,以及想要成为黑客都需要具备哪些能力?

    2022年6月4日
    47
  • mybatisplus整合springboot(Springboot框架)

    记得刚接触SpringBoot时,大吃一惊,世界上居然还有这么省事的框架,立马感叹:SpringBoot是世界上最好的框架。哈哈!当初跟着教程练习搭建了一个框架,传送门:springboot+jpa+bootstrap+thymeleaf简单的增删改查Demo后来进了新公司,用不到而且忙于任务,今天重温一遍居然有些忘了,看来真是好记性不如烂笔头。于是写下本篇SpringBo…

    2022年4月18日
    97
  • 在线词云制作生成 tagxedo

    在线词云制作生成 tagxedo在线词云制作生成tagxedo在线词云10行Python代码的词云待办在线词云原博文地址和详细使用方法介绍在线词云制作tagxedo在线网址http://www.tagxedo.com/注意点:直接访问http://www.tagxedo.com/app.html可能会超时,先进主页再点击右上角的create按钮进入创作页面会加载更快;需要下载一个软件,使用IE浏览器可加载上述软件,谷歌和EDGE实测都无法加载;导出的词云图片:10行Python代码的词云原博客地址:1

    2022年10月26日
    0

发表回复

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

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