My previous article vUE responsive principle learning (a) describes some simple knowledge of VUE data responsive principle. As we all know, Vue data attribute, is the default depth listening, this time we again in-depth analysis, Observer source implementation.
Let’s warm up with a deep copy
Since the data property is deeply listened on, let’s first implement a simple deep copy ourselves to understand the idea.
The principle of deep copy is a bit like recursion. In fact, when you encounter a reference type, you call your own function to parse it again.
function deepCopy(source) {
// Type check, if not reference type or all equal to null, return directly
if (source === null || typeofsource ! = ='object') {
return source;
}
let isArray = Array.isArray(source),
result = isArray ? [] : {};
// Iterate over attributes
if (isArray) {
for(let i = 0, len = source.length; i < len; i++) {
let val = source[i];
// typeof [] === 'object', typeof {} === 'object'
// Consider typeof null === 'object'
if (val && typeof val === 'object') {
result[i] = deepCopy(val);
} else{ result[i] = val; }}/ / short
// result = source.map(item => {
// return (item && typeof item === 'object') ? deepCopy(item) : item
// });
} else {
const keys = Object.keys(source);
for(let i = 0, len = keys.length; i < len; i++) {
let key = keys[i],
val = source[key];
if (val && typeof val === 'object') {
result[key] = deepCopy(val);
} else{ result[key] = val; }}/ / short
// keys.forEach((key) => {
// let val = source[key];
// result[key] = (val && typeof val === 'object') ? deepCopy(val) : val;
// });
}
return result;
}
Copy the codeWhy simple deep copy, because regexps, dates, prototype chains, DOM/BOM objects are not taken into account. It’s not easy to write a deep copy.
Some students may ask, why not just a for in solution. As follows:
function deepCopy(source) {
let result = Array.isArray(source) ? [] : {};
// Iterate over the object
for(let key in source) {
let val = source[key];
result[key] = (val && typeof val === 'object')? deepCopy(val) : val; }return result;
}
Copy the codeOne of the pain points of for in is that non-built-in methods on the prototype chain are also iterated. Examples include the developer’s own methods that extend the object’s prototype.
Some students might say, add hasOwnProperty to solve it. If it is Object, it can be resolved, but if it is Array, it cannot get the index of the Array.
One more thing to note about for in is that for in can continue, but forEach methods on arrays can’t. Because the internal implementation of forEach executes the functions you pass in sequence in a for loop.
Analyze Vue’s Observer
I’m just adding comments to the code here, and I suggest you open the source code.
Source code: the Vue project under SRC/core/observer/index, js
Vue encapsulates the Observer as a class
Observer
export class Observer {
value: any;
dep: Dep;
vmCount: number; // number of vms that has this object as root $data
constructor(value: any) {
this.value = value
this.dep = new Dep()
this.vmCount = 0
// Each time an object is observed, an __ob__ attribute is added to the object with the value of the current Observer instance
// Of course, the premise is that the value itself is an array or object, and not the underlying data type, such as a number, string, etc.
def(value, '__ob__'.this)
// If it is an array
if (Array.isArray(value)) {
// These two lines of code will be explained later
// This code is used to enable the array operator function
// That is, when we use the PUSH Pop Splice array API, we can also trigger the data response to update the view.
const augment = hasProto ? protoAugment : copyAugment
augment(value, arrayMethods, arrayKeys)
// Walk through the array and observe
this.observeArray(value)
} else {
// Walk through the object and observe
// There is a case where value is not Object,
Keys takes a number and returns an empty array if it is a string.
this.walk(value)
}
}
// Walk through the object and observe
walk(obj: Object) {
const keys = Object.keys(obj)
for (let i = 0; i < keys.length; i++) {
DefineReactive calls the observe method internally,
// Observe internally calls the Observer constructor
defineReactive(obj, keys[i])
}
}
// Walk through the array and observe
observeArray(items: Array<any>) {
for (let i = 0, l = items.length; i < l; i++) {
Observe internally calls the Observer constructor
observe(items[i])
}
}
}
function protoAugment(target, src: Object, keys: any) {
target.__proto__ = src
}
function copyAugment(target: Object, src: Object, keys: Array<string>) {
for (let i = 0, l = keys.length; i < l; i++) {
const key = keys[i]
def(target, key, src[key])
}
}
Copy the codeObserve, def, defineReactive, and so on
observefunction
Used to call the Observer constructor
export function observe(value: any, asRootData: ? boolean) :Observer | void {
// If it is not an object or a VNode instance, return it directly.
if(! isObject(value) || valueinstanceof VNode) {
return
}
// Define a variable to store an Observer instance
let ob: Observer | void
// If the object has already been observed, Vue automatically assigns an __ob__ attribute to the object to avoid repeated observations
If the object already has an __ob__ attribute, indicating that it has been observed, then __ob__ is returned
if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
ob = value.__ob__
} else if (
shouldObserve && // Whether to observe! isServerRendering() &&// Non-server rendering
(Array.isArray(value) || isPlainObject(value)) && // Is an array or Object Object
Object.isExtensible(value) && // Whether the object is extensible, that is, whether new attributes can be added to the object! value._isVue// Non-vUE instance
) {
ob = new Observer(value)
}
if (asRootData && ob) { // It's not clear yet, but we can ignore it for now
ob.vmCount++
}
return ob // Return an Observer instance
}
Copy the codeObserve that the observe function simply returns an Observer instance with a little extra judgment. To make it easier to understand, we can simply shorten the code:
// This is much clearer
function observe(value) {
let ob;
if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
ob = value.___ob___
} else {
ob = new Observer(value)
}
return ob;
}
Copy the codedeffunction
This is a wrapper around Object.defineProperty
export function def(obj: Object, key: string, val: any, enumerable? : boolean) {
Object.defineProperty(obj, key, {
value: val,
// The default is not enumerable, which means that the __ob__ attribute Vue adds to the object is not iterated normallyenumerable: !! enumerable,writable: true.configurable: true})}Copy the codedefineReactivefunction
The defineReactive function does more than collect dependencies at initialization and trigger dependencies when attributes are changed
export function defineReactive(
obj: Object, //Observed object Key: string,//Object property val: any,//Does the user assign a value to the property, customSetter? :? Function,//Additional user-defined set shallow? : boolean//Depth observation) {
// Used to collect dependencies
const dep = new Dep()
// If it cannot be modified, return directly
const property = Object.getOwnPropertyDescriptor(obj, key)
if (property && property.configurable === false) {
return
}
// If the user has not defined get or set on the object, and the user has not passed val
// Evaluates the initial value of the object and assigns it to the val parameter
const getter = property && property.get
const setter = property && property.set
if((! getter || setter) &&arguments.length === 2) {
val = obj[key]
}
/ /! Shallow indicates deep observation. If shallow is not true, it indicates the default deep observation
// To observe in depth, run the observe object method
letchildOb = ! shallow && observe(val)Object.defineProperty(obj, key, {
enumerable: true.configurable: true.get: function reactiveGetter() {
// Get the original value of the object
const value = getter ? getter.call(obj) : val
// Collect dependencies. Collecting and triggering dependencies is a larger process that will be discussed later
if (Dep.target) {
dep.depend()
if (childOb) {
childOb.dep.depend()
if (Array.isArray(value)) {
dependArray(value)
}
}
}
// Return the original value of the object
return value
},
set: function reactiveSetter(newVal) {
// Get the original value of the object
const value = getter ? getter.call(obj) : val
// Check whether the value changes
// (newVal ! == newVal && value ! == value) to determine NaN! == NaN
if(newVal === value || (newVal ! == newVal && value ! == value)) {return
}
// for non-production environments, additional custom setters are triggered
if(process.env.NODE_ENV ! = ='production' && customSetter) {
customSetter()
}
// Fire the original setter for the object, if not, override the old value with the new value (val)
if (setter) {
setter.call(obj, newVal)
} else {
val = newVal
}
// If it is a deep observation, observe again after the property is changedchildOb = ! shallow && observe(newVal)// Trigger dependencies. Collecting and triggering dependencies is a larger process that will be discussed later
dep.notify()
}
})
}
Copy the codeWhere is entrance
So, where is the initialization entry of the Vue observation object, of course, at the initialization of the Vue instance, i.e., at new Vue?
Source code: the Vue project under SRC/core/instance/index, js
function Vue (options) {
if(process.env.NODE_ENV ! = ='production' &&
!(this instanceof Vue)
) {
warn('Vue is a constructor and should be called with the `new` keyword')}this._init(options) // This method is defined in initMixin
}
// This is where the initMixin function extends a _init method on Vue's Prototype
// The this._init(options) method is executed when we are new Vue
initMixin(Vue)
stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)
Copy the codeThe initMixin function extends a _init method on vue. prototype that has an initState function for data initialization
initState(vm) // vm is the current Vue instance, and Vue assigns the data attribute we passed to vm._data
Copy the codeThe initState function internally executes a piece of code that looks at the data property on the VM instance
Source code: the Vue project under SRC/core/instance/state. Js. I’ve commented out the useless code, leaving only the code that initializes data.
export function initState(vm: Component) {
// vm._watchers = []
// const opts = vm.$options
// if (opts.props) initProps(vm, opts.props)
// if (opts.methods) initMethods(vm, opts.methods)
// If the data attribute is passed in
// Data is the data attribute we passed in when new Vue
if (opts.data) {
// initData internally normalizes the data property we pass in.
// If data is not a function, observe(data)
// If data is a function, perform the function first, assign the returned value to data, override the original value, and observe(data).
// This is why data can be passed as a function when we write components
initData(vm)
} else {
// If no data attribute is passed in, observe an empty object
observe(vm._data = {}, true /* asRootData */)}// if (opts.computed) initComputed(vm, opts.computed)
// if (opts.watch && opts.watch ! == nativeWatch) {
// initWatch(vm, opts.watch)
// }
}
Copy the codeconclusion
What does Vue do to the data property we passed in when we new it?
- If we pass in
dataIs a function that executes the function first to get the return value. And assign overridesdata. If an object is passed in, no action is done. - perform
observe(data)- Observe does this internally
new Observer(data) new Observer(data)Will be indataExtend one on the objectAn enumerationThe properties of the__ob__, this property is very useful.- if
dataIs an array- perform
observeArray(data). This method iteratesdataObject and executes on each array itemobserve.Refer to Step 2 for the rest of the process
- perform
- if
dataIs an object- perform
walk(data). This method iteratesdataObject and execute on each propertydefineReactive. defineReactiveInternally, it executes on the object properties passed inobserve。Refer to Step 2 for the rest of the process
- perform
- Observe does this internally
Space and energy are limited, about the function of protoAugment and copyAugment, how to collect dependency and trigger dependency implementation in defineReactive will be discussed later.
Please also point out any mistakes in the content of the article.
Reference:
How does JavaScript fully implement deep Clone objects
Vue technology insider