4. What are slots? what's the effect? What is the principle?
Slot, also known as slot, is the content distribution mechanism of Vue. The template engine inside the component uses the slot element as the outlet for carrying and distributing content. Slot slot is a template label element of the child component, and whether and how to display this label element is determined by the parent component. There are three types of slots, default slots, named slots and scoped slots.
Default slot: also known as anonymous slot, when the slot does not specify a name attribute value, a slot is displayed by default, and there is only one anonymous slot in a component. Named slot: A slot with a specific name, that is, a slot with a name attribute. A component can have multiple named slots.
Scope slot: default slot, a variant of named slot, which can be anonymous slot or named slot, the difference of this slot is that when subcomponent renders scope slot, subcomponent The data inside the component is passed to the parent component, and the parent component decides how to render the slot based on the data passed from the child component.
Implementation principle: When the child component vm is instantiated, the content of the slot tag passed in by the parent component is obtained and stored in vm.$slot. The default slot is vm.$slot.default, and the named slot is vm.$ http ://slot.xxx , where xxx is the name of the slot. When the component executes the rendering function, it encounters a slot label and replaces it with the content in $slot. At this time, data can be passed to the slot. If there is data, it can be called This slot is a scoped slot.
5. The principle and function of $nextTick
The essence of Vue's nextTick is an application of the JavaScript execution principle EventLoop.
The core of nextTick is to use native JavaScript methods such as Promise, MutationObserver, setImmediate, and setTimeout to simulate the implementation of corresponding micro/macro tasks. The essence is to use these asynchronous callback task queues of JavaScript to realize its own asynchronous callback queue in the Vue framework. .
nextTick is not only the calling method of the asynchronous queue inside Vue, but also allows developers to use this method in actual projects to meet the subsequent logical processing of DOM update data timing in actual applications
nextTick is a typical example of applying the underlying JavaScript execution principle to a specific case. The reason for introducing an asynchronous update queue mechanism: if it is a synchronous update, assigning values to one or more attributes multiple times will frequently trigger UI/DOM rendering. Can reduce some useless rendering
At the same time, due to the introduction of VirtualDOM, after each state change, the state change signal will be sent to the component, and the component uses VirtualDOM to calculate the specific DOM node that needs to be updated, and then update the DOM. After each state update The rendering process requires more calculations, and this useless work will waste more performance, so asynchronous rendering becomes more critical
Vue adopts the idea of data-driven view, but in some cases, DOM still needs to be manipulated. Sometimes, you may encounter such a situation that the data of DOM1 has changed, and DOM2 needs to obtain data from DOM1, then you will find that the view of DOM2 has not been updated, and then you need to use nextTick.
Since Vue's DOM operation is asynchronous, in the above case, it is necessary to write the operation of DOM2 to obtain data in $nextTick.
Therefore, nextTick will be used in the following cases:
When an operation is performed after the data changes, and this operation needs to use the DOM structure that changes with the data change, this operation needs to be in the callback function of nextTick().
In the vue life cycle, if the DOM operation is performed in the created() hook, it must also be placed in the callback function of nextTick().
Because in the created() hook function, the DOM of the page has not been rendered, and there is no way to manipulate the DOM at this time, so if you want to manipulate the DOM at this time, you must put the code of the operation in the callback function of nextTick().
6. The difference between Vue single-page application and multi-page application
concept:
SPA single page application (SinglePage Web Application), refers to an application with only one main page, and only needs to load js, css and other related resources once at the beginning. All content is contained in the main page, and each functional module is componentized. Single-page application jumping is to switch related components and only refresh local resources.
MPA multi-page application (MultiPage Application) refers to an application with multiple independent pages, and each page must repeatedly load js, css and other related resources. Multi-page application jumps require a full-page resource refresh.
the difference:
