爬闪数媒 网站建设,万网域名登录,wordpress订阅,内网建站教程Vue 2 的双向绑定原理基于 Object.defineProperty#xff0c;核心源码在 src/core/observer 目录中。 1. 核心模块#xff1a;observer
observer 模块负责将普通对象转换为响应式对象#xff0c;主要包括以下文件#xff1a;
index.js#xff1a;定义 Observer 类#…Vue 2 的双向绑定原理基于 Object.defineProperty核心源码在 src/core/observer 目录中。 1. 核心模块observer
observer 模块负责将普通对象转换为响应式对象主要包括以下文件
index.js定义 Observer 类用于将对象转换为响应式。dep.js定义 Dep 类用于管理依赖订阅者。watcher.js定义 Watcher 类用于监听数据变化并触发更新。 2. Observer 类
Observer 类是 Vue 2 响应式系统的核心它通过 Object.defineProperty 将对象的属性转换为 getter 和 setter从而实现依赖收集和派发更新。
源码位置src/core/observer/index.js
export class Observer {value: any;dep: Dep;vmCount: number;constructor(value: any) {this.value value;this.dep new Dep();this.vmCount 0;def(value, __ob__, this); // 将 Observer 实例挂载到对象的 __ob__ 属性上if (Array.isArray(value)) {// 处理数组if (hasProto) {protoAugment(value, arrayMethods);} else {copyAugment(value, arrayMethods, arrayKeys);}this.observeArray(value);} else {// 处理对象this.walk(value);}}walk(obj: Object) {const keys Object.keys(obj);for (let i 0; i keys.length; i) {defineReactive(obj, keys[i]);}}observeArray(items: Arrayany) {for (let i 0, l items.length; i l; i) {observe(items[i]);}}
}
Observer 类会递归地将对象的属性转换为响应式。对于数组Vue 2 通过重写数组的变异方法如 push、pop 等来实现响应式。
3. defineReactive 函数
defineReactive 是 Vue 2 实现响应式的核心函数它通过 Object.defineProperty 定义属性的 getter 和 setter。
源码位置src/core/observer/index.js
export function defineReactive(obj: Object,key: string,val: any,customSetter?: ?Function,shallow?: boolean
) {const dep new Dep(); // 每个属性都有一个 Dep 实例用于管理依赖const getter property property.get;const setter property property.set;if ((!getter || setter) arguments.length 2) {val obj[key];}let childOb !shallow observe(val); // 递归处理嵌套对象Object.defineProperty(obj, key, {enumerable: true,configurable: true,get: function reactiveGetter() {const value getter ? getter.call(obj) : val;if (Dep.target) {dep.depend(); // 收集依赖if (childOb) {childOb.dep.depend();if (Array.isArray(value)) {dependArray(value);}}}return value;},set: function reactiveSetter(newVal) {const value getter ? getter.call(obj) : val;if (newVal value || (newVal ! newVal value ! value)) {return;}if (setter) {setter.call(obj, newVal);} else {val newVal;}childOb !shallow observe(newVal); // 对新值进行响应式处理dep.notify(); // 通知依赖更新},});
}
getter在访问属性时调用 dep.depend() 收集依赖。setter在修改属性时调用 dep.notify() 通知依赖更新。
4. Dep 类
Dep 类是依赖管理器用于存储和管理 Watcher 实例。
源码位置src/core/observer/dep.js
export default class Dep {static target: ?Watcher;id: number;subs: ArrayWatcher;constructor() {this.id uid;this.subs [];}addSub(sub: Watcher) {this.subs.push(sub);}removeSub(sub: Watcher) {remove(this.subs, sub);}depend() {if (Dep.target) {Dep.target.addDep(this);}}notify() {const subs this.subs.slice();for (let i 0, l subs.length; i l; i) {subs[i].update();}}
}
Dep.target当前正在计算的 Watcher 实例。subs存储所有订阅了该属性的 Watcher 实例。notify通知所有订阅者更新。
5. Watcher 类
Watcher 类是 Vue 2 中用于监听数据变化的订阅者它会在数据变化时触发回调函数。
源码位置src/core/observer/watcher.js
export default class Watcher {vm: Component;expression: string;cb: Function;id: number;deps: ArrayDep;newDeps: ArrayDep;depIds: SimpleSet;newDepIds: SimpleSet;getter: Function;value: any;constructor(vm: Component,expOrFn: string | Function,cb: Function,options?: ?Object,isRenderWatcher?: boolean) {this.vm vm;this.cb cb;this.id uid; // uid for batchingthis.deps [];this.newDeps [];this.depIds new Set();this.newDepIds new Set();this.getter parsePath(expOrFn);this.value this.get();}get() {pushTarget(this); // 将当前 Watcher 设置为 Dep.targetlet value;const vm this.vm;try {value this.getter.call(vm, vm);} catch (e) {// 处理错误} finally {popTarget(); // 恢复之前的 Watcherthis.cleanupDeps();}return value;}update() {queueWatcher(this); // 将 Watcher 加入队列等待批量更新}run() {const value this.get();if (value ! this.value || isObject(value)) {const oldValue this.value;this.value value;this.cb.call(this.vm, value, oldValue); // 执行回调}}
}
Watcher 实例会在初始化时调用 get 方法触发属性的 getter从而收集依赖。当数据变化时Watcher 的 update 方法会被调用最终触发回调函数。
Vue 2 的双向绑定原理基于 Object.defineProperty通过以下步骤实现
响应式化Observer 类将对象的属性转换为 getter 和 setter。依赖收集在 getter 中调用 dep.depend()将当前 Watcher 添加到依赖列表中。派发更新在 setter 中调用 dep.notify()通知所有依赖的 Watcher 更新。批量更新Watcher 的更新会被加入队列异步执行以提高性能。
