Today I met a small company and came up to ask the computerized underlying principle directly. This is how the interviewer asked, and the a and b variables are defined in data. The c attribute is defined in computered, and the result of c depends on a and b, and the variable c is used in the template. Assuming that a has been changed, how does the underlying layer collect dependencies and how does the update trigger?
<div>{<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->{ c }}</div>data(){
return {
a: 'foo',
b: 'bar'
}
},
computed: {
c() {
return + ' - ' + ;
}
},
mounted(){
setTimeout(() => { = 'FOO' }, 1000)
}
Page effect: foo - bar is displayed first, and FOO - bar is displayed after one second
After checking the source code here, the principle of computerized is briefly described as follows:
InitComputed is initialized initState function
export function initState (vm: Component) {
vm._watchers = []
const opts = vm.$options
if () initProps(vm, )
if () initMethods(vm, )
if () {
initData(vm)
} else {
observe(vm._data = {}, true /* asRootData */)
}
if () initComputed(vm, )
if ( && !== nativeWatch) {
initWatch(vm, )
}
}
The initComputed function traverses each property in the computed, and new Watcher (computed watcher), you can see that the cb passed into the Watcher constructor is noop, which is an empty function. And defineComputed
function initComputed (vm: Component, computed: Object) {
// $flow-disable-line
const watchers = vm._computedWatchers = (null)
// computed properties are just getters during SSR
const isSSR = isServerRendering()
for (const key in computed) {
const userDef = computed[key]
const getter = typeof userDef === 'function' ? userDef :
if (.NODE_ENV !== 'production' && getter == null) {
warn(
`Getter is missing for computed property "${key}".`,
vm
)
}
if (!isSSR) {
// create internal watcher for the computed property.
watchers[key] = new Watcher(
vm,
getter || noop,
noop,
computedWatcherOptions
)
}
// component-defined computed properties are already defined on the
// component prototype. We only need to define computed properties defined
// at instantiation here.
if (!(key in vm)) {
defineComputed(vm, key, userDef)
} else if (.NODE_ENV !== 'production') {
if (key in vm.$data) {
warn(`The computed property "${key}" is already defined in data.`, vm)
} else if (vm.$ && key in vm.$) {
warn(`The computed property "${key}" is already defined as a prop.`, vm)
} else if (vm.$ && key in vm.$) {
warn(`The computed property "${key}" is already defined as a method.`, vm)
}
}
}
}defineComputed uses hijacking of attributes. Getting returns the corresponding getter, i.e. createComputedGetter
export function defineComputed (
target: any,
key: string,
userDef: Object | Function
) {
const shouldCache = !isServerRendering()
if (typeof userDef === 'function') {
= shouldCache
? createComputedGetter(key)
: createGetterInvoker(userDef)
= noop
} else {
=
? shouldCache && !== false
? createComputedGetter(key)
: createGetterInvoker()
: noop
= || noop
}
if (.NODE_ENV !== 'production' &&
=== noop) {
= function () {
warn(
`Computed property "${key}" was assigned to but it has no setter.`,
this
)
}
}
(target, key, sharedPropertyDefinition)
}
function createComputedGetter (key) {
return function computedGetter () {
const watcher = this._computedWatchers && this._computedWatchers[key]
if (watcher) {
if () {
()
}
if () {
()
}
return
}
}
}Seeing this, we can roughly understand that when the Vue component is initialized, initState -> initComputed -> new Watcher() calculates the watcher. The callback passed is the getter of the computer attribute. Since computered is lazy: true watcher, get() on the watcher instance will not be executed immediately when new Watcher, but the createComputedGetter function is called in the defineComputed function, and the createComputedGetter function is executed () and then executed ().
Execute () First pushTarget(this), assign the value to the current computed watcher, and then execute
That is, execute the getter configured by the computer attribute. Execute the getter and access to every value it depends on, and will be hijacked to enter get. Execute () , and add a computered watcher to the dep instance corresponding to each attribute. At the same time, this computerized watcher will also save the corresponding dep.
After saying so much, I'm talking about the computerized watcher. Why does the page of modification update happen?
Answer: Because there are not only computerized watcher but also a render watcher in the dependency
reason:
$mount will execute mountComponent, create a render watcher, which will execute cb immediately (currently is a render watcher), call the render function to compile the template at the bottom, and finally access the attribute calculation property c. When accessing the computed property c, it will definitely access a. When accessing a, the defineComputed will be triggered and then hijacked to call createComputedGetter, and then call (). This watcher is a computed watcher
function createComputedGetter (key) {
return function computedGetter () {
const watcher = this._computedWatchers && this._computedWatchers[key]
if (watcher) {
if () {
()
}
if () {
()
}
return
}
}
}
//
depend () {
let i =
while (i--) {
[i].depend()
}
}
Calling () , this refers to the computered watcher, which will save the deps in the computered watcher in all dependency calls deps[i].depend(), and then call (this) in the Dep class, so that the current dep is saved in the render watcher, and the render watcher is saved in the dep at the same time.
The render watcher is saved in dep at the same time. It can be seen that the render watcher will also be saved in the dep of the property a in the example, so there are two watchers in the dep of the property a: [computedWatcher, renderWatcher]
Therefore, modifying the value of the a property, and finally notify will clear the queue that saves the watcher and update the page! Okay!
This is the end of this article about the in-depth exploration of the underlying principles of Vue Computed. For more related Vue Computed content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!