1, The priority of V-for and V-if

First judge the condition and then see whether to execute! Conclusion:

1. Obviously, V-for should be interpreted before V-if. 2. If both occur, each render will execute a loop before judging the condition, which is inevitable anyway, wasting performance 3. To avoid this, nested Templates in the outer layer, v-if judgment in the -layer, and then v-for loop inside

2. Why does the VUE component data have to be a function when the root instance of the VUE does not have this restriction? The SRC \ corelInstance \ state.js-initData () function returns a new instance of the data object each time it is executed



conclusion

There may be multiple instances of a VUE component, and if data is defined as an object, they will share a single Data object, so state changes will affect all component instances, which is unreasonable. It is defined in the form of a function. When initData is used, it will be used as a factory function to return a new data object, effectively avoiding the problem of state pollution between multiple instances. This restriction does not exist during VUE root instance creation, and because there can only be one root instance, there is no need to worry about this.

3. Do you know the function and working principle of key in Vue? Tell me your understanding of it. SRC \core\vdom\patch.js-updateChildren()



conclusion

1. The function of key is mainly to update virtual DOM efficiently. The principle is that Vue can accurately judge whether two nodes are the same in the patch process through key, so as to avoid frequent updating of different elements, making the whole patch process more efficient, reducing DOM operation and improving performance. 2. In addition, if the key is not set, it may cause some hidden errors when the list is updated. 3. The key attribute is also used in the transition switch between elements with the same tag name in Vue.

4. How do you understand the diff algorithm in Vue?

Lifecycle.js-mountComponent () component may have many data keys using source analysis 2: execution mode patch.js-patchvnode () patchVnode is where diff occurs Overall strategy: Depth first, comparison at the same level source analysis 3: high efficiency,patch.js-updateChildren()



  1. conclusion

    1. Diff algorithm is the inevitable product of virtual DOM technology: through the comparison of new and old virtual DOM (i.e. Diff), the changed place is updated on the real DOM; In addition, it is also necessary for diff to perform the comparison process efficiently, thus reducing the time complexity to O(n).

    2. In Vue2. X, in order to reduce Watcher granularity, each component has only one Watcher corresponding to it, and only by introducing diff can the changes be found accurately.

    3. The moment when diff is executed in Vue is when the component instance executes its update function, and it compares the last rendered result OLDVNode with the new rendered result NewVNode, which is called patch.

    4. DIF inch process decocting body to follow the depth of the first, with the county than the strategy, the comparison between the two sections will be based on whether they have sub-section or text section to do different operations; The key point of the algorithm is to compare the two groups of child nodes. First, it is assumed that the head and tail nodes may be the same, and the comparison attempt is made four times. If no same node is found, the search is conducted in a general way, and the remaining nodes are processed according to the situation after the search. The same node can be found very accurately with the help of key, so the whole patch process is very efficient.

    5. What is the understanding of VUE componentization?

    Answer the general idea:

    The definition, advantages, usage scenarios and considerations of componentization will be stated, and some characteristics of componentization in Vue will be emphasized.

    Source code analysis 1: component definition

    // Component definition

    Component (‘comp’, {template: ‘<div>this is a component</div>’})

    Component definition, SRC \core\global-api\assets.js

    <template>

    <div>this is a component</div>

    </template>

    The Vue-loader compiles the template into the render function, and the final export is still the component configuration object.

    Open the I

    conclusion

    1. Components are independent and reusable units of code organization. A component system is one of Vue’s core features. It allows developers to build large applications from small, independent, and often reusable components.


    2. Componentized development can greatly improve the efficiency, testability and reusability of application development;


    3. The use of components is classified as: page components, business components and general components;


    4. The components of Vue are configuration-based. We usually write components that are component configurations rather than components.


    5. Common componentization technologies in Vue include property prop, custom events, slots, etc., which are mainly used for component communication and extension, etc.;


    6. Reasonable division of components helps to improve application performance;


    7. Components should be highly cohesive and low-coupling;


    8. Follow the principle of one-way data flow.

6. What is your understanding of VUE design principles? On Vue’s website, there are big definitions and features:. Progressive JavaScript Framework ● Easy to use, flexible and efficient so the overall idea of this topic can be expanded in accordance with this. Progressive JavaScript frameworks: Unlike other large frameworks, Vue is designed to be applied from the bottom up. Vue’s core library focuses only on the view layer, making it easy to get started and integrate with third-party libraries or existing projects. On the other hand, when combined with a modern toolchain and a variety of supporting libraries, Vue is fully capable of providing driver ease for complex single-page applications with core features such as data-responsive, declarative template syntax, and configuration-based component systems. This allows us to focus on the core business of the application, making it easy to write Vue applications as long as we know how to write JS, HTML, and CSS. Flexibility The great advantage of a progressive framework is flexibility. If the application is small enough, we may only need Vue core features to complete the functionality; As the size of the application grows, libraries and tools such as routing, state management, and Vue-CLI are introduced, and both the size of the application and the difficulty of learning it is a flat curve that increases gradually. The high efficiency and super fast virtual DOM and diff algorithm make our application have the best performance. The quest for efficiency continues. The introduction of Proxy responsive improvements to data in VUE3 and the compiler’s improvements to static content compilation will make Vue more efficient. Flexibility The great advantage of a progressive framework is flexibility. If the application is small enough, we may only need Vue core features to complete the functionality; As the size of the application grows, libraries and tools such as routing, state management, and Vue-CLI are introduced, and both the size of the application and the difficulty of learning it is a flat curve that increases gradually. The high efficiency and super fast virtual DOM and diff algorithm make our application have the best performance. The quest for efficiency continues. The introduction of Proxy responsive improvements to data in VUE3 and the compiler’s improvements to static content compilation will make Vue more efficient.

What is your understanding of MVC, MVP and MVVM? Summary. All three are framework patterns designed to solve the coupling problem between Model and View. ●MVC pattern appeared early, mainly used in the back end, such as Spring MVC, ASP.NETMVC, etc., in the early stage of the front-end field, there are also applications, such as Backbonejs. Its advantage is clear layering, the disadvantage is the data flow chaos, the flexibility of the maintainability problems. MVP mode is an evolutionary form of MVC. Presenter as the middle layer is responsible for MV communication, which solves the coupling problem between the two. However, the overstaffed P layer may lead to maintenance problems. , MVM mode has been widely used in the front-end field. It not only solves the MV coupling problem, but also solves a large number of complex codes and DOM operation codes to maintain the mapping relationship between the two. It improves development efficiency and readability while maintaining superior performance.