vue响应式原理理解

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

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

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

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

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

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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • xmind换行「建议收藏」

    xmind换行「建议收藏」换行:shift+enter

  • sqlserver快速删除大批量数据_sqlserver删除数据

    sqlserver快速删除大批量数据_sqlserver删除数据如何使用dropdownlist绑定数据库?首先我们要了解一些dropdownlist的一些属性。DataSource:为数据源DataBind:数据源绑定DataTextField:要显示的文本值DataValueField:显示文本值的编号其中DataTextField主要是给用户看的,我们程序员要用的是DataValueField。下面是代码展示:这里我就建立了一个部门表插入了三条数据:gocreatetableDepartment(DepI

  • IT界最伟大的十位人物「建议收藏」

    IT界最伟大的十位人物「建议收藏」美国《电脑周刊》最近评出了“IT界最伟大十位人物”,苹果公司创办人史蒂夫·乔布斯(SteveJobs)凭借着创新精神和在苹果的二次创业排名榜首。    世界首富的微软董事会主席比尔·盖茨仅排名第三位,不敌万维网(Web)发明人蒂姆·伯纳斯·李。巧合的是,三甲排名人物都是在同一年出生。    上榜的十位人物大多世界闻名,而且富可敌国。例如,盖茨已经

  • MyBatis-延迟加载与MyBatis缓存(面试题)

    MyBatis-延迟加载与MyBatis缓存(面试题)MyBatis-延迟加载与MyBatis缓存-概念性MyBatis-延迟加载与MyBatis缓存MyBatis-延迟加载与MyBatis缓存-概念性延迟加载(面试题)1、什么是延迟加载(按需加载)2、延迟加载MyBatis缓存(面试题)1、Cache缓存2、MyBatis缓存分析3、一级缓存4、二级缓存原理开启二级缓存5、禁用二级缓存6、刷新二级缓存延迟加载(面试题)1、什么是延迟加载(按需…

  • Linux安装redis和部署

    Linux安装redis和部署Linux安装redis和部署第一步:下载安装包访问https://redis.io/download到官网进行下载。这里下载最新的6.2.6版本.第二步:安装1.通过远程管理工具,将压缩包拷贝到Linux服务器中,执行解压操作tar-zxfredis-4.0.9.tar.gz2.进入解压文件目录使用make对解压的Redis文件进行编译图示:这里因为我redis的安装目录在/usr/locat/目录下,因此会有如下操作注:如果在编译过程中出现问题,有可能是安

  • 数学之路-python计算实战(14)-机器视觉-图像增强(直方图均衡化)[通俗易懂]

    数学之路-python计算实战(14)-机器视觉-图像增强(直方图均衡化)

发表回复

您的电子邮箱地址不会被公开。

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