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)
blank

相关推荐

  • CString::ReverseFind()和CString::Find()区别「建议收藏」

    CString::ReverseFind()和CString::Find()区别「建议收藏」Find()是从左往右查找;ReverseFind()是从右边往左查找,但是他们返回的地址都是从左往右数的。示例:[cpp]#include“stdafx.h”#include”afx.h”intmain(intargc,char*argv){CStringstr=”abcdabcd”;inta=str.Find(‘b’);printf(“

  • 关于getchar的用法及实例解析

    关于getchar的用法及实例解析getchar——读取字符的函数intgetchar(void)返回类型为int,参数为void.有人可能会有疑惑,getchar既然是读取字符的,为什么返回类型是int呢?1、getchar其实返回的是字符的ASCII码值(整数)。2、getchar在读取结束或者失败的时候,会返回EOF。EOF意思是endoffile,本质上是-1.下面我们一起来看看下面这段代码什么意思#include<stdio.h>intmain(){ intch=0; wh

    2022年10月19日
  • c++输入文件流ifstream用法详解

    c++输入文件流ifstream用法详解Andrew-&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;China:SaysHelloNoterightofChina:Chinathinks\naboutitChina–&amp;amp;amp;amp;amp;amp;amp;amp;amp;am

  • servlet中init-param与context-param的区别「建议收藏」

    servlet中init-param与context-param的区别「建议收藏」init-paramweb.xml中的写法&lt;servlet&gt;&lt;servlet-name&gt;demo01&lt;/servlet-name&gt;&lt;servlet-class&gt;com.lanou3g.Demo01&lt;/servlet-class&gt;&lt;init-param&gt;&lt;pa…

  • 软件测试之BUG的生命周期

    作为一名测试人员,重要的工作内容之一,就是找BUG,提交BUG,验证BUG,推进BUG的解决,直至软件达到发布的标准,提高软件的质量,及研发的工作效率和质量。要找BUG,那么,就要先了解一下BUG的定义是什么?BUG的定义:软件的BUG,狭义概念是指软件程序的漏洞或缺陷,广义概念除此之外还包括测试工程师或用户所发现和提出的软件可改进的细节、或与…

  • 大数运算c++

    大数运算c++大数加法stringadd(strings1,strings2){if(s1.length()=0;i–,j–

发表回复

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

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