Front-end interview questions (11)

Slot

Slots are actually equivalent to placeholders. It takes a place in the component to your HTML template, allowing you to pass in something. Slots are further divided into anonymous slots, named slots, and scope slots.

Anonymous slot:
We can also call it a single slot or a default slot. Compared with the named slot, it does not need to set the name attribute, and its hidden name attribute is default.
Named slots:
That is, slot has a name, and it needs to be wrapped with a template tag.
Scope slots:
It is the slot used to transfer data

52. Semantic tags:header nav main article section aside footer

The advantages of semanticization are: clear code structure, easy to read, conducive to development and maintenance, and convenient for other devices to parse (such as screen readers) to render web pages according to semantics. It is conducive to search engine optimization (SEO), and search engine crawlers will give different weights according to different labels.

What is it?

Definition: Set data, change data
Function: setDatafunctionUsed to send data from the logical layer to the view layer (asynchronous), and change the corresponding value (synchronous)
setData It isWeChat appletA built-in interface is provided to change the data under data in the logical layer.
The data of the view layer view is mounted under the data of the logical layer and sent to the view layer is asynchronous.
Change is synchronous. In other words, if you modify directly without calling the method, the status of the page cannot be changed, and data inconsistency will also be caused.

Two important parameters of setData:

The first parameter Object data is a must-pass, the data type is Object, and the meaning it represents is the data to be changed this time
The second parameter, Function callback function, is not required. It represents the callback function after the interface update and rendering caused by setData.

54. How to center elements vertically

Single line text: line-height = height
Image: vertical-align: middle;
absolute Positioning: top: 50%;left: 50%;transform: translate(-50%, -50%);
flex: display:flex;margin:auto

55.VueWhat is the role of the life cycle?

Creation phase:
	 beforecreate: The instance has been initialized, but the DOM node cannot be obtained.  (No data, no el)
	 created: The instance has been created, and the DOM node cannot be obtained.  (There is data, no el)
 Loading phase:
	 beforemount: The template is compiled, but has not been mounted to the interface yet.  (There is data, there is el)
	 mounted: The compiled template has been mounted to the page (the data and DOM have been rendered).
 Update phase:
	 beforeupdate: The data changes and is called immediately. At this time, the data in the data is the latest, but the data on the page is still old (when the data update is detected, but before the DOM update is executed).
	 updated: Execute after the update is completed. At this time, the values ​​in data and the values ​​on the page are the latest.
 Destruction phase:
	 beforedestroy: When you want to destroy the vue instance, execute before destruction.
	 destroy: Execute when destroying a vue instance.

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

AI writing code

Briefly describe what scenarios are suitable for each life cycle?

beforecreate: You can add Loading events.
	 create: The events when initialization is completed are written here, and asynchronous requests are also suitable for calling here (there should not be too many requests to avoid the white screen time being too long).  You can end the loading event here, do some initialization, or implement the self-execution of the function.  The DOM is not mounted at this time. If DOM operations are performed at this stage, it must be placed in the callback function of ().
     mounted: At this time, the DOM is mounted and rendered. The method that needs to operate the DOM can be placed here, or you can initiate a backend request here, get back the data, and do some things with the routing hook.
     beforeupdate: You can access the existing DOM before update, such as manually moving the added event listener.
     updated: The component DOM has been updated and can perform dependent DOM operations.  Note: Do not manipulate data (modify properties) in this function, as it will fall into a dead loop.
	 activated: When using vue-router, sometimes you need to use <keep-alive></keep-alive> to cache component state. At this time, the created hook will not be called repeatedly.  If our child components need to perform certain operations each time they are loaded, they can be triggered using the activated hook.
	 deactivated: Used when the <keep-alive></keep-alive> component is removed.
	 beforedestroy: Before destruction, you can make some deletion prompts, such as: Are you sure to delete xx?
	 destroy: After destruction, the component is gone at this time and no longer can be operated in it.

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

AI writing code