Vue 如何实现 Observer 和 Watcher:源码解析
在 Vue 中,数据响应式是非常重要的一部分。Vue 通过 Observer 和 Watcher 两个类来实现数据的响应式更新。本文将深入探讨 Vue 如何实现 Observer 和 Watcher,并提供相应的示例代码与指导意义。
Observer 类
Observer 类是 Vue 实现数据响应式的核心之一。其主要作用是将一个普通 JavaScript 对象转换为响应式对象,当该对象的属性发生变化时,能够触发相应的监听回调函数。
Observer 类的源码如下:
----- -------- - ------------------ - ---------- - ----- -- ----------------------- - ---------------- - - --------- - ----- ---- - ---------------- --- ---- - - -- - - ------------ ---- - ------------------- -------- - - - -------- ------------------- ---- - --- --- - -------- ----- --- - --- ----- -------------------------- ---- - ----------- ----- ------------- ----- ----- - ------------ ------ --- -- ----------- - -- ------- --- ---- - ------ - --- - ------ ------------ - -- -
Observer 类有一个构造函数,接收一个参数 value
,并将其保存到实例属性 this.value
上。如果 value
不是数组,则会调用 walk
方法进行遍历并将对象中的属性转换为响应式属性。
在实现 walk
方法时,我们通过 Object.keys(obj)
获取到对象中的所有属性名,并对每个属性调用 defineReactive
方法进行响应式处理。
defineReactive
方法定义了一个被劫持的 getter 和 setter。在 getter 中,我们将当前的 Watcher 对象存放到一个数组中(该数组会在 Watcher 类中讲到),以便在该属性发生变化时能够触发回调函数。在 setter 中,我们首先判断新值是否等于旧值,如果是则不做处理,否则将新值保存到实例属性 val
中,并触发回调函数。
Watcher 类
Watcher 类是 Vue 实现数据响应式的另一个核心类。其主要作用是在数据发生变化时触发相应的监听回调函数。
Watcher 类的源码如下:
----- ------- - --------------- -------- --- - ------- - -- ------- - -- ------------ - ------- ----------- - --- ----- ---------- - ---------- - ----- - ---------------- ----- ----- - ------------------------- -------- ----------- ------ ----- - -------- - ----- -------- - ---------- ---------- - ---------- --------------------- ----------- --------- - ----------- - -- -------------------------- - ----------------------- ---------------- - - - --- ----------- - -- -------- ------------------ - ------------------------ ---------- - ------ - -------- ----------- - ----------------- ---------- - ------------------------------ - -- - ----- --- - ------------- - ------- - --------- --------- - -- - ----------- - ------------------- - -------------- - ----- ----- - ---------------------- -- ------ --- --- - ----------------------- -- - - -------- - -- ------------ - ----------------------- - - -------- - ----- ---- - ----------------- --- ---- - - -- - - ------------ ---- - ---------------- - - - ------- - - ---------- - ----
Watcher 类有一个构造函数,接收三个参数:vm
、`expOr
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/1352