首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

【前端进阶基础】VUE响应式数据原理 订阅-发布模式解析

我们知道,Dom 上通过指令或者双大括号绑定数据,会为数据进行添加观察者watcher,当实例化Watcher时候 会触发属性getter方法,此时会调用dep.depend()。...其实在进行Watcher实例时候,会调用内部get函数,开始为他初始化 Watcher 观察者 其中pushTarget 方法就是为Dep.target绑定watcher实例,所以Dep.target.addDep...(this)也就是执行实例addDep方法 addDep (dep: Dep) { ......dep.addSub(this) } 这样便为我们dep实例添加了一个watcher实例。...这也就是简单数据响应式,其实还需要注意是: 当数据getter触发后,会收集依赖,但也不是所有的触发方式都会收集依赖,只有通过watcher触发getter会收集依赖:if (Dep.target

67030

【Kotlin】扩展函数总结 ★ ( 超扩展函数 | 私有扩展函数 | 泛型扩展函数 | 扩展属性 | 定义扩展文件 | infix 关键字用法 | 重命名扩展函数 | 标准库扩展函数 )

增加功能 ; Kotlin 中如果类 没有被 open 关键字修饰 , 则该类 不能被继承 , 如果想要扩展该类 , 可以使用 扩展函数 ; 扩展函数 可以作用于 自定义 , 也可以作用于 系统自带..., 如 String , List , 等 标准库 API ; 为 某个 定义扩展函数 , 格式为 : fun 名.扩展函数名(参数列表): 返回值类型 { 函数体 } 定义扩展函数 与 定义普通函数唯一区别是...接收者 ( 调用函数实例对象 ) , 同时还可以 获取 接收者 泛型参数类型 ; 泛型扩展函数 格式 : 一般 泛型扩展函数 都是为了 配合 链式编程 , 其 返回值类型 就是 接收者泛型参数类型...不能 进行初始化 , 必须在 getter 函数中进行初始化 ; val 只读类型变量 扩展属性 必须提供 getter 函数 ; var 可变类型变量 扩展属性 必须提供 getter 和 setter...函数名 函数参数 也可以使用 传统方式调用 : 接收者.函数名(函数参数) Map 中 创建 Pair 实例对象 to 函数 , 就是 被 infix 修饰 泛型扩展函数 , 最终产生

2.1K30
您找到你想要的搜索结果了吗?
是的
没有找到

vue实战-深入响应式数据原理

/init.js";// 先创建一个Vue,Vue就是一个构造函数() 通过new关键字进行实例化function Vue(options) { // 这里开始进行Vue初始化工作 this...._init(options);}// _init方法是挂载在Vue原型方法,每一个new 实例可以调用, 由initMixin方法挂载// 将不同操作拆分成不同模块,导入后对Vue做一些处理,做法更利于维护...判断方法和属性是否重名,以及是否有保留属性没有问题就通过 proxy() 把 data 里每一个属性都代理到当前实例上,就可以通过 this.xx 访问了最后再调用 observe 监听整个 data...shallow && observe(val) // data = {a: {b: 3}, c: [1, 2]} 属性值如果是对象或数组会返回Observer实例 // 截持对象属性 getter...总结以上就是Vue2响应式数据原理,讲述了如何对数据进行响应式观测,核心就是通过Object.defineProperty对数据进行劫持,在getter中收集依赖,setter中派发依赖,完整响应式原理

47810

vue实战-深入响应式数据原理_2023-03-01

/init.js"; // 先创建一个Vue,Vue就是一个构造函数() 通过new关键字进行实例化 function Vue(options) { // 这里开始进行Vue初始化工作 this..._init(options); } // _init方法是挂载在Vue原型方法,每一个new 实例可以调用, 由initMixin方法挂载 // 将不同操作拆分成不同模块,导入后对Vue做一些处理...判断方法和属性是否重名,以及是否有保留属性 没有问题就通过 proxy() 把 data 里每一个属性都代理到当前实例上,就可以通过 this.xx 访问了 最后再调用 observe 监听整个 data...shallow && observe(val) // data = {a: {b: 3}, c: [1, 2]} 属性值如果是对象或数组会返回Observer实例 // 截持对象属性 getter...总结 以上就是Vue2响应式数据原理,讲述了如何对数据进行响应式观测,核心就是通过Object.defineProperty对数据进行劫持,在getter中收集依赖,setter中派发依赖,完整响应式原理

45120

iOS runtime探究(二): 从runtime开始深入理解OC消息转发机制你要知道runtime都在这里

这样就能解释objc_msgSend工作原理,为了匹配消息接收者和选择子,需要在消息接收者所在中去搜索这个struct objc_method_list方法列表,如果能找到就可以直接跳转到相关具体实现中去调用...第一次机会: 所属动态方法解析 首先,如果沿继承树没有搜索到相关方法则会向接收者所属进行一次请求,看是否能够动态添加一个方法,注意这是一个方法,因为是向接收者所属进行请求。...由于Person没有声明和定义appendString:方法,所以运行时应该会报unrecognized selector错误,但是并没有,因为我们重写了方法+ (BOOL)resolveInstanceMethod...:(SEL)name,当找不到相关实例方法时候就会调用该类方法去询问是否可以动态添加,如果返回True就会再次执行相关方法,接下来看一下如何给一个动态添加一个方法,那就是调用runtime库中class_addMethod...下一步 这两篇文章分别介绍了runtime如何将面向对象映射到面向过程结构体以及runtime消息发送和消息转发流程,下一篇文章将继续介绍runtime对实例变量处理。

89970

vue源码分析-响应式系统工作原理

我们先来看一下官方对深入响应式系统解释:当你把一个普通 JavaScript 对象传给 Vue 实例 data 选项,Vue 将遍历对象所有的属性。...实例上挂载三个属性 * 1. value, 即观测数据对象本身 * 2. dep, 用于依赖收集容器 * 3. vmCount, 直接写死为0 */ constructor (value...items[i]) } }}value是需要被观察数据对象,在构造函数中,会给value增加ob属性,作为数据已经被Observer观察标志。...那么问题又来了,这个this.subs是如何添加订阅者?...写到这里,相信各位对数据响应式已经有很深刻理解了吧,那么我们还有一个话题,我们是如何进行初始化渲染更新和二次更新视图?下章我们讨论一下。

44940

vue源码分析-响应式系统工作原理_2023-03-01

我们先来看一下官方对深入响应式系统解释: 当你把一个普通 JavaScript 对象传给 Vue 实例 data 选项,Vue 将遍历对象所有的属性。...实例上挂载三个属性 * 1. value, 即观测数据对象本身 * 2. dep, 用于依赖收集容器 * 3. vmCount, 直接写死为0 */ constructor (value...并且有一些方法: get: 将Dep.target设置为当前watcher实例,在内部调用this.getter,如果此时某个被 Observer观察数据对象被取值了,那么当前watcher实例将会自动订阅数据对象...那么问题又来了,这个this.subs是如何添加订阅者?...写到这里,相信各位对数据响应式已经有很深刻理解了吧,那么我们还有一个话题,我们是如何进行初始化渲染更新和二次更新视图?下章我们讨论一下。

43810

梳理vue双向绑定实现原理

Observer,Dep和Watcher实现及原理,推荐阅读《Vue源码解读一:Vue数据响应式原理》,一般开发者需要关注: 收集依赖指的是谁收集依赖,依赖又是指什么?...因为在observe data时候,会遍历已有的每个属性(比如a),添加getter/setter,而后面设置test属性并没有机会设置getter/setter,所以检测不到变化。...一般无需关注,但是对于如下两种情况: 当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue 当你修改数组长度时,例如:vm.items.length =...$set/Vue.set和vm.items.splice(newLength)解决,具体参看官方说明 每次给数据设置值得时候,都会调用setter函数,这个时候就会发布属性更新消息,即使数据没有变。...选项,Vue 将遍历对象所有的属性,并使用 Object.defineProperty 把这些属性全部转为 getter/setter。

1.1K40

python 动态属性和特性

__class__ 开始,而且,仅当没有名为 attr 特性时,Python 才会在 obj 实例中寻找。...有 __dict__ 属性对象, 任何时候都能随意设置新属性 如果类有 __slots__ 属性,它实例可能没有 __dict__ 属性 __slots__ 可以定义这个这属性,限制实例能有哪些属性...__slots__ 属性 值是一个字符串组成元组,指明允许有的属性 如果 __slots__ 中没有 '__dict__',那么该类实例没有 __dict__ 属性,实例只允许有指定名称属性...获取属性可能来自 对象所属或超 如果没有指定属性,getattr 函数抛出 AttributeError 异常,或者返回 default 参数值(如果设定了这个参数的话) hasattr...__dict__ 属性 如果实例所属定义了 __slots__ 属性,实例没有 __dict__ 属性,那么 vars 函数不能处理 那个实例 5.2 处理属性特殊方法 使用点号或内置 getattr

51620

10个常见 Java 错误及避免方法之第二集(后续持续发布)

“Reached End of File While Parsing” 当程序缺少关闭大括号(“}”)时,Java代码中就会发生错误消息。 有时我们可以通过在代码末尾放置大括号来快速修复错误。...阅读关于如何修复Unreachable Statement Java软件错误讨论。 (@StackOverflow) 13....要修复的话,就需要将字符串转换为整型或浮点型。 阅读说明非数字类型如何导致Java软件错误从而警报操作符无法应用于类型例子。 (@StackOverflow) 15....数组长度是固定,因此每个数组都需要以所需长度进行初始化。...;array[1] = object2; 而非: AClass[] array; ...array = {object1, object2}; 阅读关于如何在Java软件中初始化数组讨论。

2.2K30

Flutter 空安全糖果罐

SliverPinnedToBoxAdapter,可以通过它轻松创建一个置顶元素,当 child 没有 layout 之前,你没法知道 child 实际大小,这将是非常有用组件。...问题 空安全对非空 List 影响是非常大。 不能对非空列表设置更大长度 List length getter 也有一个对应 setter,这一点鲜为人知。...您可以对列表设置一个较短长度,从而截断它。您也可以对列表设置一个更长长度,从而使用未初始化元素填充它。...以上两种类型都提供了 insert() 实现,通过设置长度,为插入元素提供空间。在空安全中这样做可能会出现错误,所以我们将它们 insert() 实现改为了 add()。...) native "GrowableList_setData"; 通知引擎更新新长度 @pragma("vm:recognized", "graph-intrinsic") void _setLength

1.5K10

流畅 Python 第二版(GPT 重译)(十二)

我们可以改变LineItem接口,使用 getter 和 setter 来处理weight属性。那将是 Java 方式,这并不是错误。...示例 22-28 中代码可能有点棘手,但很简洁:它长度与仅定义 weight 属性装饰 getter/setter 对相同,如 示例 22-21 中所示。...勤奋读者被邀请将错误处理编码为练习。 ⁶ 数据来源是 JSON,而 JSON 数据中唯一集合类型是 dict 和 list。...描述符 实现描述符协议。在图 23-1 中就是Quantity。 托管 声明描述符实例为类属性。在图 23-1 中,LineItem是托管。...② Managed.non_over是一个非覆盖描述符,因此没有__set__干扰赋值。 ③ 现在obj有一个名为non_over实例属性,它遮蔽了Managed中同名描述符属性。

10310

Kotlin中扩展函数与属性示例详解

前言 Kotlin 中扩展方法并不是在原内部进行拓展,通过反编译为Java代码,可以发现,其原理是使用装饰模式,对源实例操作和包装,其实际相当于我们在 Java中定义工具方法,并且该工具方法是使用调用者为第一个参数...这个名称被称为接收者类型;用来调用这个扩展函数对象,叫做接收者对象。 ?...接收者类型是由扩展函数定义,接收对象是该类型一个实例 可以像调用成员函数一样去调用这个函数: println("Kotlin".lastChar()) n 从某种意义上说,现在已经为String...,可以使用更具体类型来作为接收者类型,而不是一个。...这里必须定义getter函数,因为没有支持字段,因此没有默认getter实现。同理,初始化也不可以,因为没有地方存储初始值。

1.3K20
领券