Watcher Class — vue Architecture
Architecture documentation for the Watcher class in watcher.ts from the vue codebase.
Entity Profile
Dependency Diagram
graph TD 6447431e_6924_8ca8_071d_44b55ba081b1["Watcher"] 093a7a23_fa4b_6464_b268_8f9d10bcaa2f["watcher.ts"] 6447431e_6924_8ca8_071d_44b55ba081b1 -->|defined in| 093a7a23_fa4b_6464_b268_8f9d10bcaa2f a722da6d_3b55_7364_ef37_4ef6a7eeebfe["constructor()"] 6447431e_6924_8ca8_071d_44b55ba081b1 -->|method| a722da6d_3b55_7364_ef37_4ef6a7eeebfe 9af667fb_20e8_0763_f10d_d63da0255ba8["get()"] 6447431e_6924_8ca8_071d_44b55ba081b1 -->|method| 9af667fb_20e8_0763_f10d_d63da0255ba8 70bd5aef_e61f_468a_cb62_8d7947947ee9["addDep()"] 6447431e_6924_8ca8_071d_44b55ba081b1 -->|method| 70bd5aef_e61f_468a_cb62_8d7947947ee9 55c27de4_ac93_74ee_727e_97a8a8b978d4["cleanupDeps()"] 6447431e_6924_8ca8_071d_44b55ba081b1 -->|method| 55c27de4_ac93_74ee_727e_97a8a8b978d4 82001dd5_db37_dcc4_2a46_4033717cc6a2["update()"] 6447431e_6924_8ca8_071d_44b55ba081b1 -->|method| 82001dd5_db37_dcc4_2a46_4033717cc6a2 71876f35_b702_de2d_a393_99f72b820099["run()"] 6447431e_6924_8ca8_071d_44b55ba081b1 -->|method| 71876f35_b702_de2d_a393_99f72b820099 b14c934a_c745_b1c9_851b_632eb5aa48a6["evaluate()"] 6447431e_6924_8ca8_071d_44b55ba081b1 -->|method| b14c934a_c745_b1c9_851b_632eb5aa48a6 f27f8043_126c_8edc_d490_d3e19f848317["depend()"] 6447431e_6924_8ca8_071d_44b55ba081b1 -->|method| f27f8043_126c_8edc_d490_d3e19f848317 be270b49_47e8_8f99_8878_880772c2e703["teardown()"] 6447431e_6924_8ca8_071d_44b55ba081b1 -->|method| be270b49_47e8_8f99_8878_880772c2e703
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