이 글은 Vue 소스코드의 의존성 수집 원리를 주로 소개하는데, 이는 특정 참조 가치를 갖고 있습니다. 이제는 모든 사람과 공유합니다. 도움이 필요한 친구들은 참고할 수 있습니다.
vue는 현재 국내에 있습니다. 웹사이드는 전 세계의 3분의 1을 차지하며, 일상적으로 사용하는 주요 기술 스택 중 하나이기도 합니다. 게다가 Vue 소스 코드를 읽는 기사가 많은 이유도 궁금합니다. 최근 커뮤니티에 등장한 적이 있는데, 이 기회를 빌어 여러분의 글과 토론을 통해 영양분을 조금 배우고 동시에 소스 코드를 읽을 때 어떤 생각을 정리하고 제 생각을 요약하여 몇 가지 글을 작성했습니다. .레벨이 제한되어 있으니 토론메세지를 남겨주세요~
Goal Vue 버전: 2.5.17-beta.0
Vue 소스코드 댓글: https //github.com/SHERlocked...
진술: 기사의 소스 코드 구문은 Flow를 사용했으며 필요에 따라 소스 코드를 삭제했습니다(혼란을 피하기 위해@_@) .풀버전을 보시려면 위의 github 주소를 입력해주세요. 본 글은 연재글 주소는 하단에서 확인하실 수 있습니다~2.5.17-beta.0
vue源码注释:https://github.com/SHERlocked...
声明:文章中源码的语法都使用 Flow,并且源码根据需要都有删节(为了不被迷糊 @_@),如果要看完整版的请进入上面的github地址,本文是系列文章,文章地址见底部~
通过官网的介绍我们知道 Vue.js 是一个MVVM框架,它并不关心视图变化,而通过数据驱动视图更新,这让我们的状态管理非常简单,而这是怎么实现的呢。盗用官网一张图
每个组件实例都有相应的 Watcher
实例对象,它会在组件渲染的过程中把属性记录为依赖,之后当依赖项的 setter
被调用时,会通知 watcher
重新计算,从而致使它关联的组件得以更新。
这里有三个重要的概念 Observe
、Dep
、Watcher
,分别位于src/core/observer/index.js
、src/core/observer/dep.js
、src/core/observer/watcher.js
Observe
类主要给响应式对象的属性添加 getter/setter
用于依赖收集与派发更新
Dep
类用于收集当前响应式对象的依赖关系
Watcher
类是观察者,实例分为渲染 watcher、计算属性 watcher、侦听器 watcher三种
响应式化的入口位于 src/core/instance/init.js 的 initState
中:
// src/core/instance/state.js export function initState(vm: Component) { const opts = vm.$options if (opts.props) initProps(vm, opts.props) // 初始化props if (opts.methods) initMethods(vm, opts.methods) // 初始化methods if (opts.data) initData(vm) // 初始化data if (opts.computed) initComputed(vm, opts.computed) // 初始化computed if (opts.watch) initWatch(vm, opts.watch) // 初始化watch } }
它非常规律的定义了几个方法来初始化 props
、methods
、data
、computed
、wathcer
,这里看一下 initData
方法,来窥一豹
// src/core/instance/state.js function initData(vm: Component) { let data = vm.$options.data data = vm._data = typeof data === 'function' ? getData(data, vm) : data || {} observe(data, true /* asRootData */) // 给data做响应式处理 }
首先判断了下 data 是不是函数,是则取返回值不是则取自身,之后有一个 observe
方法对 data
进行处理,这个方法尝试给创建一个Observer实例 __ob__
,如果成功创建则返回新的Observer实例,如果已有Observer实例则返回现有的Observer实例
// src/core/observer/index.js export function observe (value: any, asRootData: ?boolean): Observer | void { let ob: Observer | void ob = new Observer(value) return ob }
这个方法主要用 data
作为参数去实例化一个 Observer 对象实例,Observer 是一个 Class,用于依赖收集和 notify
更新,Observer 的构造函数使用 defineReactive
方法给对象的键响应式化,给对象的属性递归添加 getter/setter
,当data被取值的时候触发 getter
并搜集依赖,当被修改值的时候先触发 getter
再触发 setter
并派发更新
// src/core/observer/index.js export class Observer { value: any; dep: Dep; constructor (value: any) { value: any; this.dep = new Dep() def(value, '__ob__', this) // def方法保证不可枚举 this.walk(value) } // 遍历对象的每一个属性并将它们转换为getter/setter walk (obj: Object) { const keys = Object.keys(obj) for (let i = 0; i <p><code>getter</code> 的时候进行依赖的收集,注意这里,只有在 <code>Dep.target</code> 中有值的时候才会进行依赖收集,这个 <code>Dep.target</code> 是在Watcher实例的 <code>get</code> 方法调用的时候 <code>pushTarget</code> 会把当前取值的watcher推入 <code>Dep.target</code>,原先的watcher压栈到 <code>targetStack</code> 栈中,当前取值的watcher取值结束后出栈并把原先的watcher值赋给 <code>Dep.target</code>,<code>cleanupDeps</code> 最后把新的 <code>newDeps</code> 里已经没有的watcher清空,以防止视图上已经不需要的无用watcher触发</p><p><code>setter</code> 的时候首先 <code>getter</code>,并且比对旧值没有变化则return,如果发生变更,则dep通知所有subs中存放的依赖本数据的Watcher实例 <code>update</code> 进行更新,这里 <code>update</code> 中会 <code>queueWatcher( )</code> 异步推送到调度者观察者队列 <code>queue</code> 中,在nextTick时 <code>flushSchedulerQueue( )</code> 把队列中的watcher取出来执行 <code>watcher.run</code> 且执行相关钩子函数</p><h3>2.3 Dep</h3><p>上面多次提到了一个关键词 <code>Dep</code></p><h2> 1. 반응형 시스템</h2> <strong>공식 웹사이트의 소개를 통해 Vue.js가 뷰 변경에 관심이 없지만 데이터를 통해 뷰 업데이트를 구동하므로 상태 관리가 매우 간단하다는 것을 알 수 있습니다. 달성? 공식 홈페이지에서 사진 훔치기</strong><img src="https://img.php.cn//upload/image/780/349/668/1531105929801901.png" title="1531105929801901. png" alt="Vue 소스 코드의 종속성 수집 원칙">#🎜🎜##🎜🎜#각 구성 요소 인스턴스에는 해당 <code>Watcher</code> 인스턴스 개체가 있으며, 속성은 종속성으로 기록됩니다. , 나중에 종속성의 <code>setter</code>가 호출되면 <code>watcher</code>에 다시 계산하라는 알림이 전달되어 관련 구성 요소가 업데이트됩니다. #🎜🎜##🎜🎜#여기에는 세 가지 중요한 개념이 있습니다: <code>Observe</code>, <code>Dep</code>, <code>Watcher</code>는 <code>에 있습니다. src/core/observer/index.js</code>, <code>src/core/observer/dep.js</code>, <code>src/core/observer/watcher.js</code>#🎜🎜 #
Observe
클래스는 주로 종속성 수집을 위해 반응형 개체의 속성에 getter/setter
를 추가합니다. 업데이트 전달 #🎜🎜#Dep
클래스는 현재 반응형 객체의 종속성을 수집하는 데 사용됩니다 #🎜🎜#initState
에 있습니다: #🎜🎜# // src/core/observer/dep.js let uid = 0 // Dep实例的id,为了方便去重 export default class Dep { static target: ?Watcher // 当前是谁在进行依赖的收集 id: number subs: Array<watcher> // 观察者集合 constructor() { this.id = uid++ // Dep实例的id,为了方便去重 this.subs = [] // 存储收集器中需要通知的Watcher } addSub(sub: Watcher) { ... } /* 添加一个观察者对象 */ removeSub(sub: Watcher) { ... } /* 移除一个观察者对象 */ depend() { ... } /* 依赖收集,当存在Dep.target的时候把自己添加观察者的依赖中 */ notify() { ... } /* 通知所有订阅者 */ } const targetStack = [] // watcher栈 export function pushTarget(_target: ?Watcher) { ... } /* 将watcher观察者实例设置给Dep.target,用以依赖收集。同时将该实例存入target栈中 */ export function popTarget() { ... } /* 将观察者实例从target栈中取出并设置给Dep.target */</watcher>#🎜🎜#it
props
, methods
, data
, computed
, 그리고 wathcer
, initData
메서드를 살펴보고 살짝 살펴보겠습니다#🎜🎜#// src/core/observer/watcher.js /* 一个解析表达式,进行依赖收集的观察者,同时在表达式数据变更时触发回调函数。它被用于$watch api以及指令 */ export default class Watcher { constructor( vm: Component, expOrFn: string | Function, cb: Function, options?: ?Object, isRenderWatcher?: boolean // 是否是渲染watcher的标志位 ) { this.getter = expOrFn // 在get方法中执行 if (this.computed) { // 是否是 计算属性 this.value = undefined this.dep = new Dep() // 计算属性创建过程中并未求值 } else { // 不是计算属性会立刻求值 this.value = this.get() } } /* 获得getter的值并且重新进行依赖收集 */ get() { pushTarget(this) // 设置Dep.target = this let value value = this.getter.call(vm, vm) popTarget() // 将观察者实例从target栈中取出并设置给Dep.target this.cleanupDeps() return value } addDep(dep: Dep) { ... } /* 添加一个依赖关系到Deps集合中 */ cleanupDeps() { ... } /* 清理newDeps里没有的无用watcher依赖 */ update() { ... } /* 调度者接口,当依赖发生改变的时候进行回调 */ run() { ... } /* 调度者工作接口,将被调度者回调 */ getAndInvoke(cb: Function) { ... } evaluate() { ... } /* 收集该watcher的所有deps依赖 */ depend() { ... } /* 收集该watcher的所有deps依赖,只有计算属性使用 */ teardown() { ... } /* 将自身从所有依赖收集订阅列表删除 */ }#🎜🎜#먼저 데이터가 함수인지 확인하고, 그렇다면 반환 값을 취하고, 그렇지 않으면
data
를 처리하는 observe
메서드가 있습니다. 이 메서드는 Observer 인스턴스 를 생성하려고 시도합니다. __ob__
, 성공적으로 생성되면 새 Observer 인스턴스를 반환합니다. Observer 인스턴스가 있으면 기존 Observer 인스턴스 #🎜🎜#data
를 매개변수로 사용하여 Observer 객체 인스턴스를 인스턴스화합니다. Observer는 종속성 수집 및 notify
업데이트에 사용되는 클래스입니다. code>defineReactive 메소드를 사용하여 객체의 키 형식을 반응적으로 지정합니다. 속성은 getter/setter
를 사용하여 반복적으로 추가되며, getter
가 트리거되고 종속성이 수집됩니다. . 값이 수정되면 getter
가 먼저 트리거됩니다. setter
가 다시 트리거되고 업데이트가 전송되면 #🎜🎜#rrreee#🎜🎜#getter code>에 종속성이 수집됩니다. 여기서는 <code>Dep.target
만 종속성 수집이 code>에 값이 있는 경우에만 수행된다는 점에 유의하세요. Watcher 인스턴스의 get
메서드가 호출됩니다. pushTarget
은 감시자의 현재 값을 Dep.target
에 푸시하고, 원래 감시자를 targetStack
스택, 그리고 값이 완료된 후 감시자의 현재 값을 스택에서 팝합니다. 감시자 값은 Dep.target
, cleanupDeps 그리고 마지막으로 더 이상 새 <code>newDeps
에 없는 감시자는 보기에서 더 이상 필요하지 않도록 지워집니다. 쓸모 없는 감시자가 #🎜🎜##🎜🎜#setter, 먼저 getter
를 수행하고, 이전 값과 비교하여 변경 사항이 없으면 반환합니다. 변경 사항이 있으면 dep는 모든 Watcher 인스턴스 update
에 알립니다. > 이 데이터에 의존하는 하위 항목에 저장된 update
는 queueWatcher( )
에 의해 스케줄러 관찰자 대기열에 비동기적으로 푸시됩니다. , nextTick에서 flushSchedulerQueue( )
는 대기열에 있는 감시자를 꺼내고 watcher.run
을 실행하고 관련 후크 함수를 실행합니다#🎜🎜# Dep
는 위에서 여러 번 언급한 바 있으며 종속성 수집을 위한 컨테이너이거나 #🎜🎜#Dependency Collector#🎜🎜라고도 합니다. #, 그는 어떤 Watchers를 기록합니다. 자신의 변경 사항에 의존하거나 자신의 변경 사항을 구독하는 Watchers는 다음 네티즌의 인용문입니다. #🎜🎜#@liuhongyi0101 :简单点说就是引用计数 ,谁借了我的钱,我就把那个人记下来,以后我的钱少了 我就通知他们说我没钱了
而把借钱的人记下来的小本本就是这里 Dep
实例里的subs
// src/core/observer/dep.js let uid = 0 // Dep实例的id,为了方便去重 export default class Dep { static target: ?Watcher // 当前是谁在进行依赖的收集 id: number subs: Array<watcher> // 观察者集合 constructor() { this.id = uid++ // Dep实例的id,为了方便去重 this.subs = [] // 存储收集器中需要通知的Watcher } addSub(sub: Watcher) { ... } /* 添加一个观察者对象 */ removeSub(sub: Watcher) { ... } /* 移除一个观察者对象 */ depend() { ... } /* 依赖收集,当存在Dep.target的时候把自己添加观察者的依赖中 */ notify() { ... } /* 通知所有订阅者 */ } const targetStack = [] // watcher栈 export function pushTarget(_target: ?Watcher) { ... } /* 将watcher观察者实例设置给Dep.target,用以依赖收集。同时将该实例存入target栈中 */ export function popTarget() { ... } /* 将观察者实例从target栈中取出并设置给Dep.target */</watcher>
这里 Dep
的实例中的 subs
搜集的依赖就是 watcher 了,它是 Watcher
的实例,将来用来通知更新
// src/core/observer/watcher.js /* 一个解析表达式,进行依赖收集的观察者,同时在表达式数据变更时触发回调函数。它被用于$watch api以及指令 */ export default class Watcher { constructor( vm: Component, expOrFn: string | Function, cb: Function, options?: ?Object, isRenderWatcher?: boolean // 是否是渲染watcher的标志位 ) { this.getter = expOrFn // 在get方法中执行 if (this.computed) { // 是否是 计算属性 this.value = undefined this.dep = new Dep() // 计算属性创建过程中并未求值 } else { // 不是计算属性会立刻求值 this.value = this.get() } } /* 获得getter的值并且重新进行依赖收集 */ get() { pushTarget(this) // 设置Dep.target = this let value value = this.getter.call(vm, vm) popTarget() // 将观察者实例从target栈中取出并设置给Dep.target this.cleanupDeps() return value } addDep(dep: Dep) { ... } /* 添加一个依赖关系到Deps集合中 */ cleanupDeps() { ... } /* 清理newDeps里没有的无用watcher依赖 */ update() { ... } /* 调度者接口,当依赖发生改变的时候进行回调 */ run() { ... } /* 调度者工作接口,将被调度者回调 */ getAndInvoke(cb: Function) { ... } evaluate() { ... } /* 收集该watcher的所有deps依赖 */ depend() { ... } /* 收集该watcher的所有deps依赖,只有计算属性使用 */ teardown() { ... } /* 将自身从所有依赖收集订阅列表删除 */ }
get
方法中执行的 getter
就是在一开始new渲染watcher时传入的 updateComponent = () => { vm._update(vm._render(), hydrating) }
,这个方法首先 vm._render()
生成渲染VNode树,在这个过程中完成对当前Vue实例 vm
上的数据访问,触发相应一众响应式对象的 getter
,然后 vm._update()
去 patch
注意这里的 get
方法最后执行了 getAndInvoke
,这个方法首先遍历watcher中存的 deps
,移除 newDep
中已经没有的订阅,然后 depIds = newDepIds; deps = newDeps
,把 newDepIds
和 newDeps
清空。每次添加完新的订阅后移除旧的已经不需要的订阅,这样在某些情况,比如 v-if
已不需要的模板依赖的数据发生变化时就不会通知watcher去 update
了
整个收集的流程大约是这样的,可以对照着上面的流程看一下
watcher 有下面几种使用场景:
render watcher
渲染 watcher,渲染视图用的 watcher
computed watcher
计算属性 watcher,因为计算属性即依赖别人也被人依赖,因此也会持有一个 Dep
实例
watch watcher
侦听器 watcher
只要会被别的观察者 (watchers
) 依赖,比如data、data的属性、计算属性、props,就会在闭包里生成一个 Dep 的实例 dep
并在被调用 getter
的时候 dep.depend
收集它被谁依赖了,并把被依赖的watcher存放到自己的subs中 this.subs.push(sub)
,以便在自身改变的时候通知 notify
存放在 dep.subs
数组中依赖自己的 watchers
自己改变了,请及时 update
~
只要依赖别的响应式化对象的对象,都会生成一个观察者 watcher
,用来统计这个 watcher
依赖了哪些响应式对象,在这个 watcher
求值前把当前 watcher
设置到全局 Dep.target
,并在自己依赖的响应式对象发生改变的时候及时 update
以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!
相关推荐:
위 내용은 Vue 소스 코드의 종속성 수집 원칙의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!