Event instruction analysis
1. Take out the event name from the instruction
2. Obtain the corresponding event processing function object from the methods according to the value of the instruction
3. Bind the specified event name and the dom event listener of the callback function to the current element node (node.addEventListener(eventType, fn .bind(vm), false);)
4. After the instruction is parsed, remove this instruction
General instruction analysis
1. Obtain the instruction name and instruction value
2. Obtain the corresponding value from data
3. Determine which attribute of the element node needs to be operated according to the instruction name
v-text----textContent
v-html-----innerHtml
4. Change Set the value of the obtained expression to the corresponding attribute
5. Remove the instruction attribute of the element
Data binding
Once the value of an attribute in data is updated, all nodes that directly or indirectly use this attribute on the interface will be updated
Data hijacking
The basic idea: monitor the changes of all attribute data in data through defineProperty(), and update the interface once it changes,
such as this.xxx=3. First vm knows that the value of xxx in data is changed through set in vm, set Get it, then update the interface