Watcher Class — vue Architecture
Architecture documentation for the Watcher class in watcher.ts from the vue codebase.
Entity Profile
Dependency Diagram
graph TD e7f4f452_deed_8a48_b501_c415a06a6251["Watcher"] acd39cb4_1b40_1f96_d7d8_00ba7dc7b283["watcher.ts"] e7f4f452_deed_8a48_b501_c415a06a6251 -->|defined in| acd39cb4_1b40_1f96_d7d8_00ba7dc7b283 8603c200_e0a7_36c4_e293_fa045d31fa46["constructor()"] e7f4f452_deed_8a48_b501_c415a06a6251 -->|method| 8603c200_e0a7_36c4_e293_fa045d31fa46 ad67e7ed_c155_de53_2de2_0458d2c842ef["get()"] e7f4f452_deed_8a48_b501_c415a06a6251 -->|method| ad67e7ed_c155_de53_2de2_0458d2c842ef 5aef7771_bdc8_a374_cfde_6f534dc3bd40["addDep()"] e7f4f452_deed_8a48_b501_c415a06a6251 -->|method| 5aef7771_bdc8_a374_cfde_6f534dc3bd40 5e45cb10_075f_436d_5803_7d7474a26d26["cleanupDeps()"] e7f4f452_deed_8a48_b501_c415a06a6251 -->|method| 5e45cb10_075f_436d_5803_7d7474a26d26 4f1747ac_5aeb_b4ff_a868_1c9fed4bec76["update()"] e7f4f452_deed_8a48_b501_c415a06a6251 -->|method| 4f1747ac_5aeb_b4ff_a868_1c9fed4bec76 a4fba0c0_c91e_f56f_3c69_5a18514bb8e1["run()"] e7f4f452_deed_8a48_b501_c415a06a6251 -->|method| a4fba0c0_c91e_f56f_3c69_5a18514bb8e1 0f484864_ebd2_9142_daff_b0e63d1dd58a["evaluate()"] e7f4f452_deed_8a48_b501_c415a06a6251 -->|method| 0f484864_ebd2_9142_daff_b0e63d1dd58a 4fb245e9_ef0c_c389_c113_747330caa63e["depend()"] e7f4f452_deed_8a48_b501_c415a06a6251 -->|method| 4fb245e9_ef0c_c389_c113_747330caa63e f780ff44_85db_e399_d971_8fdf493ab15a["teardown()"] e7f4f452_deed_8a48_b501_c415a06a6251 -->|method| f780ff44_85db_e399_d971_8fdf493ab15a
Relationship Graph
Source Code
src/core/observer/watcher.ts lines 41–278
export default class Watcher implements DepTarget {
vm?: Component | null
expression: string
cb: Function
id: number
deep: boolean
user: boolean
lazy: boolean
sync: boolean
dirty: boolean
active: boolean
deps: Array<Dep>
newDeps: Array<Dep>
depIds: SimpleSet
newDepIds: SimpleSet
before?: Function
onStop?: Function
noRecurse?: boolean
getter: Function
value: any
post: boolean
// dev only
onTrack?: ((event: DebuggerEvent) => void) | undefined
onTrigger?: ((event: DebuggerEvent) => void) | undefined
constructor(
vm: Component | null,
expOrFn: string | (() => any),
cb: Function,
options?: WatcherOptions | null,
isRenderWatcher?: boolean
) {
recordEffectScope(
this,
// if the active effect scope is manually created (not a component scope),
// prioritize it
activeEffectScope && !activeEffectScope._vm
? activeEffectScope
: vm
? vm._scope
: undefined
)
if ((this.vm = vm) && isRenderWatcher) {
vm._watcher = this
}
// options
if (options) {
this.deep = !!options.deep
this.user = !!options.user
this.lazy = !!options.lazy
this.sync = !!options.sync
this.before = options.before
if (__DEV__) {
this.onTrack = options.onTrack
this.onTrigger = options.onTrigger
}
} else {
this.deep = this.user = this.lazy = this.sync = false
}
this.cb = cb
this.id = ++uid // uid for batching
this.active = true
this.post = false
this.dirty = this.lazy // for lazy watchers
this.deps = []
this.newDeps = []
this.depIds = new Set()
this.newDepIds = new Set()
this.expression = __DEV__ ? expOrFn.toString() : ''
// parse expression for getter
if (isFunction(expOrFn)) {
this.getter = expOrFn
} else {
this.getter = parsePath(expOrFn)
if (!this.getter) {
this.getter = noop
__DEV__ &&
warn(
`Failed watching path: "${expOrFn}" ` +
'Watcher only accepts simple dot-delimited paths. ' +
Domain
Defined In
Source
Frequently Asked Questions
What is the Watcher class?
Watcher is a class in the vue codebase, defined in src/core/observer/watcher.ts.
Where is Watcher defined?
Watcher is defined in src/core/observer/watcher.ts at line 41.
Analyze Your Own Codebase
Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.
Try Supermodel Free