Principle and implementation of 414vue router

Posted by bird_man11 on Fri, 04 Mar 2022 05:46:38 +0100

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

Topics: Vue.js