This video I think he will be good is to directly go to the analysis of vue source code, from the source analysis, simple and easy to understand and persuasive.
Conclusion: a total of 9 sections and 9 small knowledge points
1, V-IF and V-for comparison 2, VUE component data function form 3, key function 4, DIFF algorithm 5, componentization 6, VUE design concept 7, MVC MVP and MVVM 8, VUE optimization 9, VUe3 features
1. V-if and V-for have a higher priority. If they appear at the same time, how can we optimize them for better performance
V-for is resolved before V-if
After the guidance of the comments section, the conclusion is changed to:
2. X When v-if and V-for are used together, v-for has a higher priority than V-if.
3. X When v-if and V-for are used together, v-if has a higher priority than V-for.
2. Why must the Vue component data be a function when the vue root instance is not?
Conclusions: 1. Data must be a function to ensure that in the case of multiple instances, in order to protect the states between each other without interference and pollution. 2, each time when creating the root instance, use new method, global scope only create one, do not create multiple, there is no pollution problem, so can not use the function
The function returns a new data object instance each time it executes
The test code is as follows:
Data initialization is in: the SRC/core/instance/init. Js file
When creating the root instance each time, use the new method, the global scope only creates one, does not create multiple, there is no pollution problem, so can not use the function,
In the case of multiple instances, to protect the states between each other without interference, without pollution. The root instance of vue therefore needs to use the function function
Conclusion:
A VUE component may have multiple instances. If you define data using objects, they will share a single data object. State changes will affect all component instances, which is not reasonable. In the vue root instance creation process, there is no change restriction, because there can only be one root instance, do not need to worry about this problem
3. How key works and explain your understanding of it
SRC /core/vdom/ patch.js-updatechildren ()
It is more efficient to perform the diff algorithm by uniquely identifying a DOM element
Conclusion:
1. Key is mainly used to update virtual DOM efficiently. The principle is that vUE can accurately judge whether two nodes are the same by key during patch, so as to avoid frequent updates of different elements, make the whole patch process more efficient, reduce the amount of DOM operation and improve performance
2, if you do not set the key may cause some hidden bugs when the list is updated, such as the update and not update can not be seen.
3. Vue also uses the key attribute when transitioning elements with the same label name. The purpose is also to allow VUE to distinguish between them, otherwise VUE will only replace its internal attributes without triggering the transition effect. You need a key as a measure of uniqueness.
4. How to understand the DIff algorithm in VUE
1. Necessity of DIFF algorithm:
Conclusion: There are multiple data keys in the component, how to ensure that the key changes, perform the diff algorithm can compare the old and new two virtual DOM comparison, in order to know exactly
2. The execution mode of diFF algorithm
Core source: line 586 starting
3. Efficiency of DIFF algorithm:
That’s updateChildern () that I mentioned above
Conclusion: 1. Diff algorithm is the inevitable product of virtual DOM technology: The old and new virtual DOM are compared (i.e., DIFF) to update the changes on the real DOM. In addition, the efficient execution of the comparison process by DIFF is also required to reduce the time complexity to O (n) 2. In Vue2.0x, in order to reduce the granularity of watcher, each component only has one Watcher corresponding to it. 3. The moment of DIff execution in VUE is when the component instance executes the update function, it will compare with the last rendering result oldVnode and the new rendering result. This process is called patch 4. Comparison between the two nodes according to whether they have child nodes or text node do different operations, compared two groups of child nodes is a key, the algorithm first hypothesis head nodes could be done 4 times same contrast to try, if not found the same node to be carried out in accordance with the general way to traverse the search, search over again according to the situation to deal with the rest of the nodes, With the help of key, the same node can be found very accurately, so the whole patch process is very efficient.
5. Understanding of VUE componentization
General answer idea: componentization definition, advantages, use scenarios and matters needing attention and so on. At the same time, some characteristics of VUE componentization should be emphasized
1. Source code analysis: component definition
I’m going to separate out some of the individual functions, separate functions, so I can reuse the common definitions in VUE the first one is the global definition and the second one is the single file component definition
2, source code analysis: componentization advantages
Lifecycle. Js-mountcomponent () Maintainability testability, reusability, from component Watcher, rendering function to analyze the execution component, each component will correspond to a Watcher, component and changes will only when the inside of the calling component rendering functions, often change data alone can put a component, the late only need to perform this function, Play the role of local refresh.
3. Realization of componentization
Constructor: SRC /core/global-api/extend.js instantiate and mount: SRC /core/vdom, patch.js-createelm ()
6. Understanding of VUE design principles
Vue is an incremental JavScript framework that is easy to use, efficient and flexible
Answer progressive javascript frameworks based on these two points:
Unlike other large frameworks, VUE is designed to be applied layer by layer from the bottom up. Vue’s core library, which focuses only on the view layer, is not only easy to get started with, but also easy to integrate with existing projects of third-party libraries, on the other hand, when used in combination with modern toolchains and various supporting libraries. Vue also completely can provide driving core library for complex single page is some statement yes rendering, component system Only focus on the view layer can be used as a library to use in other projects, also can be used as to set up the framework of a large project, this is gradual Learning is a gradual process, learning only template syntax, basis functions can be developed, I learned engineering later,
Ease of use:
Vue provides core features such as data responsiveness, declarative template syntax, and configuration-based component systems that allow us to focus only on the core business of the application, as long as we can write JS. HTML and CSS make it easy to write vUE applications
Flexibility:
Progressive framework biggest advantage is flexibility, if the application is small enough, we may need the vue core features alone will go to completion, with the expansion of the scale, we can only was chasing the introduction of routing, state management, vue – cli libraries and tools, such as whether the application volume or learning difficulty is a gradually increasing gentle curve
Efficiency:
The super-fast virtual DOM and DIff algorithms give our applications the best performance, and the quest for greater efficiency continues. The introduction of proxy responsiveness to data in VUe3 and improvements to static content in the compiler make VUE even more efficient
7. Understanding of MVC MVP and MVVM
Answer:
There are a lot of knowledge points involved, and it is difficult to explain them clearly, because we front-end programmers have not used MVC MVp models themselves. At that time, it just reflects the change process from nothing to something and from something to excellence in these years
“Age
There was no front-end in web1.0. ASP.NET, Java PHP projects usually have multiple aspx/ JSP/HPH single file to compose, each file has HTML CSS js or Java code
In order to make the development more convenient, the code is easy to maintain, the responsibility of the front and back end is clear, MVC development pattern and framework. A typical framework in the form of a front-end presentation template is Spring Structs Hibernate (SSH)
Web2.0 era
Ajax technology has been around since Gmail came along. The responsibilities of the front and back end are clearer, because the front end can interact with the back end through Ajax, so the overall architecture diagram is changed to:
The problem: There is no viable development model to accommodate more complex business requirements, and the page content is all mixed up, which becomes difficult to maintain once the application scale increases, hence the MVC on the front end
Architecture evolution for back-end separation: MVC MVP MVVMMVC The FRONT-END MVC is similar to the back-end, with View, Controller and Model Model: responsible for saving application data. Contoller: in charge of service logic and modify Model data according to user behaviors. View: in charge of View display. Visualize the data in the model:
MVP MVP is very close to MVC. P refers to Persenter’s understanding as a middleman, who is responsible for the data flow between the View and the Model, preventing the view from communicating directly with the emodel,
MVVM 
Conclusion: 1. These three are framework patterns, and their design goal is to solve the coupling problem of Model and View. 2. MVP mode in the MVC evolution form, Presenter as the middle layer responsible for MV communication, to solve the coupling problem, but the P layer in the past oversize will lead to maintenance problems. 4. MVVM mode is widely used in the front-end field, it not only solves the MV coupling problem, It also solves the complex code and DOM manipulation required to maintain the projective relationship between the two, which means that there is no need to change the DOM manipulation one by one, while improving development efficiency and readability while maintaining superior performance
8. What performance optimization methods do you know about VUE
The optimization of VUE level is mainly discussed
1. Route lazy loading:
2. Keep-alive cache page
3. Reuse DOM using V-show
4, V-for traversal avoid using v-if simultaneously
Evaluate attributes to filter the array ahead of time
5. Long list performance optimization
If the list is purely a display of data and doesn’t change the data you don’t need to be reactive
For large data lists, you can use virtual scrolling to render only a small portion of the area
6. Event destruction
When a VUE component is destroyed, all instructions and event listeners are automatically unbound, but only for the component’s own events
7. Lazy loading of images
For pages with too many pictures, in order to accelerate the loading speed of the page, we often need to load the pictures that do not appear in the visual area of the page, and wait until the scroll to the visual area to load
8. Import third-party plug-ins as required
Third-party component libraries such as Element-UI can be mapped on demand to avoid oversize
Stateless components are marked as functional components
Display component, so there is no instance tag functional
10. Sub-component segmentation
11. Localization of variables
12 、SSR
Server rendering.
9 New features of VUe3.0
Faster:
Virtual DOM rewriting optimizes slots to generate static trees to promote static attributes to promote proxy-based responsive systems
Smaller:
By tree shaking optimization core library volume static nodes are marked out to reduce rewriting
Easier to maintain:
The TypeScript + modular
Be friendlier:
Cross-platform: Compiler core and runtime core are platform independent, making vUE easier to use with any platform (Web Android IOS)
Easier to use:
Improved TypeScript support, powerful type checking and error and warning editing, better debugging, and support for the independent reactive module CompositionAPI
Several directions are highlighted: virtual DOM rewriting looks forward to more compile-time hints to reduce runtime overhead, making it easier to optimize the JS engine by making efficient code to create virtual node components faster + a single call + child node type detection to skip unnecessary conditional branches
Optimized Slots generates separate re-renders of parent and child components in VUe3 to ensure that instances track dependencies correctly and avoid unnecessary re-renders of parent and child components
In case of staticTree promotion, means that vue3’s compiler will be able to detect what is static and then apply it as a reactor. as a result, the rendering cost will be reduced
Static attribute promotion Using static attribute promotion, vue3 patch will skip these attributes will not change the node children need to continue to change
Proxy-based data responsive Vue2.0 uses Object. DefinfPropertyde Getter and setter vue3 will use ES6 proxies as an observation mechanism: Component instance initialization speed up to 100% using Proxy to save the previous half of the memory is too small to love fast speed, but there is low browser version incompatibility, in order to continue to support IE11 vue3 will be released on the observer mechanism and a new Proxy version build
Highly maintainable VUE3 will lead to more maintainable source code that not only uses Typescript but also many packages that are decoupled and more modular
Today is the last day of National Day, I have been silent for a long time, and I have to start studying seriously recently. I haven’t written a blog and taken notes for more than three months. Recently, I have started a new plan and prepared to write a new series. Mainly vUE some underlying principles and algorithms. Autumn recruitment has come to an end, now it is stable, continue to study and prepare for spring recruitment, it must be great to see the students here, the road of learning is difficult, but the rare time means that you are going uphill, come on, you will live as you want!!