1. Prepare

Object.defineproperty (obj, propertyName, {}): [].slice.call(lis): generates a real array from a pseudo-array. Enumerable adds/modifies the property of the object (64x, 64x, 64x, 64x, 64x, 64x, 64X, 64X, 64X). In/keys()) * value: specifies the initial value * writable: true/false Value Specifies whether to modify the access descriptor * get: function to get the current property value * set: Keys (obj): obtain an array of the Object's own enumerable property names 5.DocumentFragment: DocumentFragment (update multiple nodes in large numbers effectively) 6. Obj.hasownproperty (prop): Check whether prop is a property of OBj itselfCopy the code

2. Data Broker (mvVm.js)

1. Operations (read/write) on properties in another object through an object proxy 2. Operation 3 to proxy all properties in the data object through the VM object (vUE instance object). Benefits: More convenient operation of data in data 4. Basic implementation process 1). Add attribute descriptors corresponding to attributes of data objects to the VM via Object.defineProperty() 2). All added properties contain getters/setters 3). Inside the getter/setter to manipulate the corresponding property data in dataCopy the code

3. Template parsing (compile.js)

1. Key object of template parsing: Compile object 2. Basic process of template parsing: 1). Remove all child nodes of el and add them to a new document fragment object. Parse all level child node recursion in fragment * parse expression text node * parse element node instruction attribute * parse event instruction * Parse general instruction 3). Textnode. textContent = value 1). /RegExp.$1 2). Retrieve the corresponding property value from data 3). Set the property value to textContent 4 of the text node. Incident command parsing: elementNode. AddEventListener (event name, the callback function. The bind (vm)) v - on: click = "test" 1). Retrieve event name from instruction name 2). Obtain corresponding event handler object from methods according to instruction value (expression) 3). Dom event listener that assigns the event name and callback function to the current element node binding 4). 5. General instruction parsing: elementNode.xxx = value 1). Text/HTML /class content/content/myClass 2). 3). Determine which attribute of the element node to operate on according to the instruction name * V-text --textContent attribute * V-html --innerHTML attribute * V-class --className attribute 4). Set the value of the resulting expression to the corresponding attribute 5). Remove the element's directive attributeCopy the code

4. Data hijacking –> Data binding

Data binding (Model ==>View): 1). Once an attribute data in data is updated, all nodes on the interface that directly or indirectly use this attribute are updated (updated) 2. Data hijacking 1. Data hijacking is a technique used in VUE to implement data binding 2. Basic idea: Use defineProperty() to monitor all attribute (arbitrary level) data changes in data and update interface 3 when changes occur. 1). Observer * A constructor used to hijack all attributes of data * Redefines all attributes in data (get/set) * Creates a corresponding DEP object for each attribute in data 2) Each attribute (at all levels) in data corresponds to a deP object * when it was created: * The corresponding DEP object is created when each attribute in define Data is initialized * When an attribute value in data is set to a new object * the object structure {ID, // Each deP has a unique id subs // contains n arrays corresponding to the Watcher} * subs attribute description * When a Watcher is created, Internally, the current Watcher object is added to the subs of the corresponding DEP object * When the value of this data property changes, all watchers in the subs are notified of the update, Compile * The constructor of the object used to parse the template page (an instance) * The Compile object is used to parse the template page * A watcher object is created for each expression (non-event instruction) parsed. 4). Watcher * Each non-event directive or expression in the watcher template corresponds to a Watcher object * Monitors changes in the current expression data * when it is created: {vm, //vm exp, // the expression cb, // the callback function value when the corresponding expression data changes, DepIds = depIds; depIds = depIds; depIds = depIds; depIds = depIds; Conclusion: The relationship between DEP and Watcher: Man-to-many * A data attribute corresponds to a DEP, and a DEP may contain multiple Watcher (several expressions in the template use attributes) * a non-event expression in the template corresponds to a Watcher, There may be multiple DEPs in a watcher (several data attributes are included in the expression) * Data binding uses two core techniques * defineProperty() * Message subscription and publication 4. Bidirectional data binding 1). Bidirectional data binding is based on one-way data binding (Model ==>View) 2). Two-way data binding implementation flow: * Add input listener to current element while parsing V-model instruction * When the value of input changes, assign the latest value to the data property corresponding to the current expression --Copy the code