1. Course objectives
Implement vue
Simulate a minimum version of Vue
Common questions of response principle in interview
Learn from others' excellent experience and transform it into your own experience
Whether the rule is a response to an instance of Vue
Reassign the attribute to an object. Is it responsive
Blood deficiency vue Prepare the source code
2. Data driven
Data driven
Data response
Common js objects of data model will be updated automatically when we change the data map, so as to avoid cumbersome DOM operation and improve development efficiency
Bidirectional binding Data views change with each other v-model Create a two-way data binding on a form element Data driven: vue One of the most unique features In the development process, we only need to pay attention to the data itself, not how the data is rendered to the view
3. Core principle of data response
vue2.x
data and instances in vue
OBJ.defineProperty es5 adds a data hijacking agent to the entire object
object
Attribute assignment
property descriptor
There are no parameters in get
Attribute value changes data in Put dom in How can multiple attributes be changed at the same time The loop traverses the property and calls Object.defineProperty()
4. Core principle of data response
vue3.x
The Proxy modifies the properties targeted, and the properties are passed by the system to improve the browser performance
es6 new ie not supported
5. Publish / subscribe mode
Publish / subscribe mode
Subscriber parent on
Publisher teacher emit
Signal center class
vue Custom events for vue Examples of $on Event name event handler subscriber $emit trigger Publisher Handwriting event trigger class Store events Key value pair corresponding name and function method Method of registering events $on The registered functions and methods will be added later Method of triggering event $emit
6. Observer mode
Observer watcher
update method
Publisher Dep
subs store observers
addSub add observer
notify calls the observer's update method
Differentiated target trigger event notifies subscribers of subscription events Remove the dependency between publishers and subscribers through event center transformation
7. Simulated Vue response principle
Familiar with vm object vue instances
Property set/get method
$data _data
$el
$options
Vue ----> Observer Data hijacking ---->Dep Publisher Compiler Parsing instruction ---->Observer<------|
8.Vue
function
1. Receive initialization parameters
2. Inject the attribute in data into Vue instance and convert it into getter/setter
3. Be responsible for calling observer to monitor the changes of all attributes in data
4. Call compiler to parse instruction / difference expression
Structural class diagram $options $el $data _proxyData enumerable: true, enumerable configurable: true, Ergodic get() set()
9.Observer data hijacking monitors data changes in data and processes them
function
The attributes in the data option are converted to responsive data
A property of data can also be converted into responsive data
Method for sending notification of data change
method walk(data) Traverse all properties of the object defineReactive(obj,key,val) Convert attributes into get set
10.observer.defineReactive
Directly wear obj[key] dead recursion why
get has a closure and does not release the val attribute
1.data The object properties in should also be converted into responsive data stay defineReactive Inside call walk Make another judgment obj 2.data When reassigning a new object, it should also be converted into responsive data
11.Compiler operation DOM
function
1. Be responsible for compiling the template and parsing the instruction / difference expression
2. Responsible for page rendering
3. Re render when data changes
structure el dom object vm example method complie(el) ergodic dom Object's node Compile templates and handle text nodes and element nodes isTextNode Judge whether the node is a text node compileText(node) Compile the text node and process the difference expression node.nodeType === 3 Value is node.textContent isElementNode Judge whether the node is a text node compileElement(node) Compile element nodes and process instructions node.nodeType === 1 node.attributes Whether the attribute node is traversed isDirective Determine whether the element attribute is an instruction. The instruction starts with v- .startsWith() Start with what
12. Responsive data
Dep publisher
Collect dependencies and add observers
Notify all observers
structure subs Observers addSub Add observer notify Notify all observers watcher Observer function Data change triggers dependency, dep notice watcher Instance update view When instantiating itself dep Object structure vm key data Attribute name in cb callback How does the callback function update the view oldValue update() You can get the latest value take dep.target record watch example Give it first dep.target assignment Called when accessing properties get method get Method will dep.target Add to dep in Empty after adding to prevent duplication
13. Create a watcher object
The order in which files are introduced is important
The watcher can be imported only after dep is imported
Create a watcher object when processing text nodes
Create a watcher object when processing instruction nodes
14. Bidirectional binding
Data change update view
View change update data
Bind the inpit event to the form element, that is, the model node
Reassignment is equivalent to updating data Updating data triggers responsive data to drive view changes Form a closed loop
15. First rendering
Dep.target is generated when instantiating the watcher
16. Data change
notify
update
cb execution of watcher
cb is the callback function when instantiating the watcher
17. Summary - questions
1. Re assign the attribute as an object. Is it responsive?
Yes, it will traverse the child nodes
2.to Vue Is it responsive to add a member to the instance? No, it will only be called during initialization observer class have access to Vue.set(obj,propertyName,Value) this.$set(obj,propertyName,Value)
18. Summary
new vue object
Create a new observer, create a get/set, and notify Dep of changes
Send notification to watcher to add subscribers
Instantiate instruction compiler + create callback function
update the view