vue2与vue3区别浅析：vue2和vue3区别 浅析-CSDN博客
vue是mvvm框架，即“模型—视图—视图模型”，数据模式还是javascript对象，通过模型中应用程序数据和业务逻辑影响到视图的改变，视图(用户的操作)的改变会影响到底层数据的变动。
源码目录
src
--compiler # 编译相关
--core # 核心代码
--platforms # 不同平台的支持
--server # 服务端渲染
--sfc # .vue文件解析
--shared # 共享代码
1：简易的双向数据绑定
创建 vue 类
class Vue {constructor (options) {this._data = options.data// 把参数传入到observer函数中进行处理observer(this._data)}
}
function observer (value) {if (!value || (typeof value !== 'object')) {return}// 获取指定对象的可枚举键Object.keys(value).forEach((key) => {defineReactive(value,key,value[key])})
}
function defineReactive(obj,key,value) {// 通过Object.defineProperty()处理数据Object.defineProperty(obj,key,{enumerable: true,configurable: true,get: function reactiveGetter() {console.log('收集数据')return value},set: function reactiveSetter(newValue) {if (newValue === value) returnconsole.log('数据更新')cb(newValue)}})
}vue2基于Object.defineProperty()方法结合订阅者模式实现数据响应式
2：订阅者实现依赖收集
2.1接口类型定义
/*** @internal*/
export interface DepTarget extends DebuggerOptions {id: numberaddDep(dep: Dep): voidupdate(): void
}2.2dep源码
/*** A dep is an observable that can have multiple* directives subscribing to it.* @internal*/
export default class Dep {static target?: DepTarget | nullid: numbersubs: Array<DepTarget | null>// pending subs cleanup_pending = false
constructor() {this.id = uid++this.subs = []}addSub(sub: DepTarget) {this.subs.push(sub)}
// 删除相关订阅信息removeSub(sub: DepTarget) {// #12696 deps with massive amount of subscribers are extremely slow to// clean up in Chromium// to workaround this, we unset the sub for now, and clear them on// next scheduler flush.this.subs[this.subs.indexOf(sub)] = nullif (!this._pending) {this._pending = truependingCleanupDeps.push(this)}}
// 依赖收集depend(info?: DebuggerEventExtraInfo) {if (Dep.target) {Dep.target.addDep(this)if (__DEV__ && info && Dep.target.onTrack) {Dep.target.onTrack({effect: Dep.target,...info})}}}
notify(info?: DebuggerEventExtraInfo) {// stabilize the subscriber list firstconst subs = this.subs.filter(s => s) as DepTarget[]if (__DEV__ && !config.async) {// subs aren't sorted in scheduler if not running async// we need to sort them now to make sure they fire in correct// ordersubs.sort((a, b) => a.id - b.id)}for (let i = 0, l = subs.length; i < l; i++) {const sub = subs[i]if (__DEV__ && info) {sub.onTrigger &&sub.onTrigger({effect: subs[i],...info})}sub.update()}}
}创建dep类，类中的通过depend方法进行依赖收集，
notify方法进行数据更新
sub.update()3：watch 监听
export default class Watcher implements DepTarget {constructor(vm: Component | null,expOrFn: string | (() => any),cb: Function,options?: WatcherOptions | null,isRenderWatcher?: boolean) {/*** Evaluate the getter, and re-collect dependencies.*/get() {pushTarget(this)let valueconst vm = this.vmtry {value = this.getter.call(vm, vm)} catch (e: any) {if (this.user) {handleError(e, vm, `getter for watcher "${this.expression}"`)} else {throw e}} finally {// "touch" every property so they are all tracked as// dependencies for deep watchingif (this.deep) {traverse(value)}popTarget()this.cleanupDeps()}return value}
/*** Add a dependency to this directive.*/addDep(dep: Dep) {const id = dep.idif (!this.newDepIds.has(id)) {this.newDepIds.add(id)this.newDeps.push(dep)if (!this.depIds.has(id)) {dep.addSub(this)}}}
/*** Clean up for dependency collection.*/cleanupDeps() {let i = this.deps.lengthwhile (i--) {const dep = this.deps[i]if (!this.newDepIds.has(dep.id)) {dep.removeSub(this)}}let tmp: any = this.depIdsthis.depIds = this.newDepIdsthis.newDepIds = tmpthis.newDepIds.clear()tmp = this.depsthis.deps = this.newDepsthis.newDeps = tmpthis.newDeps.length = 0}
/*** Subscriber interface.* Will be called when a dependency changes.*/update() {/* istanbul ignore else */if (this.lazy) {this.dirty = true} else if (this.sync) {this.run()} else {queueWatcher(this)}}
/*** Scheduler job interface.* Will be called by the scheduler.*/run() {if (this.active) {const value = this.get()if (value !== this.value ||// Deep watchers and watchers on Object/Arrays should fire even// when the value is the same, because the value may// have mutated.isObject(value) ||this.deep) {// set new valueconst oldValue = this.valuethis.value = valueif (this.user) {const info = `callback for watcher "${this.expression}"`invokeWithErrorHandling(this.cb,this.vm,[value, oldValue],this.vm,info)} else {this.cb.call(this.vm, value, oldValue)}}}}
/*** Evaluate the value of the watcher.* This only gets called for lazy watchers.*/evaluate() {this.value = this.get()this.dirty = false}
/*** Depend on all deps collected by this watcher.*/depend() {let i = this.deps.lengthwhile (i--) {this.deps[i].depend()}}
/*** Remove self from all dependencies' subscriber list.*/teardown() {if (this.vm && !this.vm._isBeingDestroyed) {remove(this.vm._scope.effects, this)}if (this.active) {let i = this.deps.lengthwhile (i--) {this.deps[i].removeSub(this)}this.active = falseif (this.onStop) {this.onStop()}}}
}watch中相关方法解析：
get方法中获取vm对象，对value进行处理
addDep方法添加新的依赖update更新数据run更新视图cleanupDeps清空数据
4：defineReactive函数
defineReactive()函数中主要的几个处理：Object.defineProperty()中get属性和set属性的操作，当set数据操作时，调用dep实例更新订阅者；
/*，** Define a reactive property on an Object.*/
export function defineReactive(obj: object,key: string,val?: any,customSetter?: Function | null,shallow?: boolean,mock?: boolean,observeEvenIfShallow = false
) {const dep = new Dep()
const property = Object.getOwnPropertyDescriptor(obj, key)if (property && property.configurable === false) {return}
// cater for pre-defined getter/settersconst getter = property && property.getconst setter = property && property.setif ((!getter || setter) &&(val === NO_INITIAL_VALUE || arguments.length === 2)) {val = obj[key]}
let childOb = shallow ? val && val.__ob__ : observe(val, false, mock)Object.defineProperty(obj, key, {enumerable: true,configurable: true,get: function reactiveGetter() {const value = getter ? getter.call(obj) : valif (Dep.target) {if (__DEV__) {dep.depend({target: obj,type: TrackOpTypes.GET,key})} else {dep.depend()}if (childOb) {childOb.dep.depend()if (isArray(value)) {dependArray(value)}}}return isRef(value) && !shallow ? value.value : value},set: function reactiveSetter(newVal) {if (setter) {setter.call(obj, newVal)} else if (getter) {// #7981: for accessor properties without setterreturn} else if (!shallow && isRef(value) && !isRef(newVal)) {value.value = newValreturn} else {val = newVal}childOb = shallow ? newVal && newVal.__ob__ : observe(newVal, false, mock)if (__DEV__) {dep.notify({type: TriggerOpTypes.SET,target: obj,key,newValue: newVal,oldValue: value})} else {dep.notify()}}})
return dep
}
参考资料：
vue2源码：https://github.com/vuejs/vue/blob/main/src/core/observer/dep.ts
vue2源码：https://github.com/vuejs/vue/blob/main/src/core/observer/index.ts
vue2目录：vue2与vue3源码解析对比——vue2目录（1） - 掘金
LuckyWintyGit：https://github.com/LuckyWinty/blog/blob/master/markdown/vue/vue2%E5%8E%9F%E7%90%86%E6%8E%A2%E7%B4%A2--%E5%93%8D%E5%BA%94%E5%BC%8F%E7%B3%BB%E7%BB%9F.md
简单做个笔记~
