首页 > 其他分享 >Vue1的响应式原理笔记

Vue1的响应式原理笔记

时间:2022-10-14 00:34:10浏览次数:79  
标签:__ obj 读取数据 ob 笔记 watcher 响应 Vue1 属性

参考:

https://www.bilibili.com/video/BV1G54y1s7xV

https://juejin.cn/post/6932659815424458760

递归向下创建ob

Object.defineProperty方法,可以自定义get和set

一个对象:

{
    a: {
     
	},
    b: 5
}

如果子属性a是对象,则a.__ob__= new Observer,并递归,每一个是对象的属性,都要有__ob__

observe(obj):

  1. 若obj上已经有__ob__则结束
  2. 调用ob = Observer(obj),结束

Observer(obj):

  1. 为obj上创建__ob__
  2. 对obj.keys,defineReactive(obj, key)

defineReactive(obj, key):

  1. oberve(obj.key),为子元素分配ob
  2. 利用set和get“代理”属性的读取和修改

改写array

新弄一个proto,改写数组的7个方法,再把这个proto的__ptoro__设置成Array.prototype

当我们在上一步对着子属性walk的时候,如果遇到了一个数组,就在为其设置ob的时候,把array的__proto__改成我们自己定义的新的prototype,这样就能拦截那七个方法

依赖收集

https://juejin.cn/post/6932659815424458760

每一个obs上,都有一个dep(dependence)对象,dep是订阅发布者中的发布者,内有subs数组,收集订阅者

watcher用来读取数据,然后触发getter,被dep收集,

Watcher需求:

watcher(obj, 'p.q.r', callbackFn)

监听obj的属性,当变化的时候,调用callback

watcher.update()

watch 读取数据的时候,把自己挂载到全局对象,可以是window上的target上去

读取数据,自然触发obj.get,此时Dep就能通过window获取到watcher

标签:__,obj,读取数据,ob,笔记,watcher,响应,Vue1,属性
From: https://www.cnblogs.com/ticlab/p/16790199.html

相关文章

  • 《信息安全与设计》第四章学习笔记
    第4章并发编程知识点归纳并行性和并发性1.真正的并行执行只能在多个处理组件的系统中实现,比如多处理器或多核系统。2.在单CPU系统中,并发性是通过多任务处理实现的。......
  • C++学习笔记2
    类类与对象类和结构体的区别结构体相当于是只有类的数据域。但其区别有不仅仅如此。类除了数据域,还有函数域,即声明了方法,当然,一般其方法是在类外实现的。而结构体没有......
  • 《git学习笔记》
    git简介Linus花了两周时间自己用C语言写了一个分布式版本控制系统。安装gitLinux可以尝试输入git,看看系统有没有安装Git,如果没有安装,又碰巧用Debian或UbuntuLinux,通......
  • 自然科学之反物质-学习笔记
    大纲1.狄利克反粒子2.反物质发现3.应用一、狄拉克反粒子  1.1929年,狄拉克方程中提出反粒子公式(1)非相对运动:V人=V1+VA            ......
  • 代码笔记26 pytorch复现pointnet
    1浅浅记录一下model的复现,之后做好完整的工程放到github上2importtorch.nnasnnimporttorchimportnumpyasnpclasstnet(nn.Module):def__init__(self,......
  • Spring boot笔记4
    减少配置修改次数方便环境配置切换application.yml#默认加载的配置文件spring:profiles:active:prod application-dev.ymlapplication-prod.yml......
  • 计算机网络学习笔记
    计算机网络的概念相互分享资源的互联起来的自治计算机(computers)的集合自治(autonomous):非主从关系,对等的行为模式互联(interconnected):通信计算机(computers):数字化(数据,信......
  • Spring boot 笔记
    JSR303配置属性值的数据校验hibernate-validator        @Validated必须在主类上标注可以校验所有子类的所有属性@NotEmpty       ......
  • JavaScript高级程序设计笔记10 函数Function
    函数1.几种实例化函数对象的方式以函数声明的方式定义函数表达式箭头函数(arrowfunction)使用Function构造函数接收任意多个字符串参数,最后一个参数始终会被......
  • 深入理解css 笔记(4)
    处理元素高度的方式跟处理宽度不一样。之前对border-box的修改依然适用于高度。而且很有用,但是通常最好避免给元素指定明确的高度。当明确设置一个元素的高度时,内容可能......