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)
上一篇 2022年5月1日 下午11:20
下一篇 2022年5月1日 下午11:20


相关推荐

  • 光流法的理解

    光流法的理解光流法是比较经典的运动估计方法,本文不仅叙述简单明了,而且附代码,故收藏.在空间中,运动可以用运动场描述。而在一个图像平面上,物体的运动往往是通过图像序列中不同图象灰度分布的不同体现的。从而,空间中的运动场转移到图像上就表示为光流场,光流场反映了图像上每一点灰度的变化趋势。光流可以看作带有灰度的像素点在图像平面运动产生的瞬时速度场。下面我们推导光流方程:假设E(x,y,t)为(x,y)点在时刻t的…

    2022年7月23日
    7
  • 使用Github上传本地项目代码

    使用Github上传本地项目代码使用 Github 上传本地项目代码 第一次上传 Github 时需要的准备工作 以及上传过程中可能出现的问题及解决方法

    2026年3月18日
    1
  • Web API配置自定义路由

    Web API配置自定义路由

    2021年9月6日
    76
  • Android基础篇 RelativeLayout.LayoutParams

    Android基础篇 RelativeLayout.LayoutParams一、前言RelativeLayout.LayoutParams是一个RelativeLayout的布局参数(1)初始化//包裹内容WRAP_CONTENTRelativeLayout.LayoutParamslayoutParams=newRelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT,RelativeLayout.LayoutParams.WRAP_CONTENT);//全部内容M

    2022年7月17日
    19
  • java函数式编程:四大Function

    java函数式编程:四大Functionjava util function 包下的四大 Function1 Consumer 消费者 publicinterf T voidaccept Tt 从名字可以看出 消费者是来消费的 它接受一个数据 没有任何返回值 简单使用 比如我们只想打印列表中的每个元素 这里的 forEach Consumer 里面接受的参数就是一个 C T

    2025年9月3日
    8
  • Midjourney 全向参考:AI 绘图迎来史诗级更新,想啥画啥,细节拉满!

    Midjourney 全向参考:AI 绘图迎来史诗级更新,想啥画啥,细节拉满!

    2026年3月15日
    2

发表回复

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

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