Response principle
What is the responsive principle?
The reactive principle is that when a variable in data changes, vUE can listen and do something about it
How does VUE listen for variable changes?
In VUe2, the principle behind responsivity is to use Object.defineProperty to “hijack” variables in the data option. This means recursively walking through the data Object, retrieving the variables inside, and adding getters and setter interceptors (hooks) to each variable.
When we use these variables through the VUE directive (that is, get getter access to variables), Vue collects the dependencies (that is, records the use of these variables on the DOM in the template and adds an update function to the DOM), and notifies Watcher to update the view when the dependencies are collected.
When we update a variable, we fire setter hooks, which notify Watcher, and Watcher updates the view where the variable is used based on the dependency collection.
The life cycle
Concept:
The vUE life cycle is the process from creation to destruction of vUE components. We can think of it as a person’s journey from birth to death. Vue has a total of 11 life cycle functions, of which 8 are commonly used. These life cycle functions are called back when the vUE component life cycle reaches its corresponding point
The vUE lifecycle has four phases, each corresponding to two lifecycle functions (eight commonly used) :
The first stage (create stage): beforeCreate, created
Phase 2 (Mounting phase): beforeMount and Mounted
Phase 3 (Update phase): beforeUpdate, updated
Stage 4 (destruction stage) : beforeDestroy, destroyed
To understand:
Think of the callbacks of each lifecycle function as a record of a person at some point in their life. Always keep in mind that the lifecycle function callback is a moment in time, not a phase.
What did you do?
Before beforeCreated moment:
Initialize methods in methods and initialize lifecycle functions
Between beforeCreated moment and created moment:
Data hijacking is a recursive loop of data in which a getter/setter interceptor (hook) is added to each variable using Object.defineProperty. And bind them to the component instance (bind this value, which indicates that the created phase can access variables in data).
Between the created moment and beforeMount moment:
Check to see if there are el and template attributes, if there are, compile the corresponding template template into the render function, if not, try to compile the parent element of el as a template.
Beforetime between mount and Mounted:
Abstract syntax tree (AST) is generated according to the Render function, and then virtual DOM(VNode) is generated according to the AST. Virtual DOM is a data description of the real DOM, which is essentially a JSON file and exists in the memory of our computer.
After that, the real DOM is generated from the virtual DOM (this process involves dependency collection, Watcher, and reactive functions), and the DOM is rendered by replacing the declarative variables with real data.
Mounted to beforeUpdate:
It’s a little bit of a stretch to say time, but it’s simply when the data changes, and it’s a circular process, because the data is constantly changing.
BeforeUpdate time to updated time:
Whenever data changes, the render function rerenders the new virtual DOM with the old and new, then uses the famous Diff algorithm to compare the old and new virtual DOM, looking for differences, and notifies Watcher to update the real DOM again based on the dependency collection.
BeforeDestroy time and Destroyed time
Remove the Watcher, child components, and event listeners
Think about:
1. The Diff algorithm is used to compare the old and new VNodes to find the smallest difference between them.
2. Generating a virtual DOM is a waste of time, so why generate a virtual DOM?
The existence value of virtual DOM: it greatly reduces the cost of manually updating DOM, minimizes DOM updating, reduces DOM operations as much as possible, and avoids “killing innocent people”.
Conclusion:
Not all of these lifecycle functions are used in real development. The most common ones are created, Mounted, and beforeDestroy
Created calls interfaces, creates long connections,
Mounted Also allows you to invoke an interface to establish a long connection, enable a timer, and perform DOM operations.
BeforedDestroyed closes long connections, closes timers, and clears cached data.