vue responsive mixed in the initialization time responsive initState file, using the data hijacking Object.defineProerty get and set methods to change the method in which binding, each component will generate a Watcher, which is mainly a function of stored update value generator update function call changes updateComponent comparison algorithm then diff updated specifically implemented to achieve a small demo View source responsive described below.
A first step in defining the object //
const {obj = foo: 'foo', bar: 'bar', baz: {A:. 1}}
// update function responsive to achieve the second step
observe (obj)
the observe function (obj) {
// To make the array responsive array must override the default method of
IF (typeof obj! == 'Object' || obj == null) {
// is desired incoming obj
return
}
Object. Keys (obj) .forEach (Key => {
defineReactive (obj, Key, obj [Key])
})
}
defineReactive function (obj, Key, val) {
// recursive because there may be an object val
the observe (val)
// intercept incoming access obj
Object.defineProperty (obj, Key, {
GET () {
the console.log ( 'GET' + Key);
return Val
},
SET (newVal) {
! IF (newVal == Val) {
the console.log ( 'SET' + Key + ':' + newVal);
// if the incoming newVal still obj, processing needs to be done in response to
the observe (newVal)
Val = newVal
}
}
})
}
// third then step to change the update object
obj.foo = 'xxxx';
Next issue: here is a responsive data, how data is displayed in real-time dynamic pages need to write a compiler compiler bring the next issue of deom
