The answer is for reference only, everyone's understanding is different.
Article directory
1. Briefly talk about the principle of event flow
Event flow:
(1) Event flow refers to the order in which the page receives events;
(2) It is assumed that the elements in the page all have the same events, and these elements are nested in each other
.
(3) Then when triggering a When an element's event occurs, other elements will be triggered;Summary: The event flow describes the sequence of receiving events from the page. When several elements that all
have cascaded together, then when you click on one of the elements,
not only the currently clicked element will trigger the event, but the cascading All elements within the click
range will trigger the event.Event flow includes two modes:
(1) Event bubbling: means that the child element triggers the event first, and then the parent element triggers the event; from the inside out
(2) Event capture: means that the parent element triggers the event first, and then the child element triggers the event; outside to insideEvent capturing and event bubbling are completely opposite behaviors! ! !
2. How many ways are there to introduce CSS? What is the difference between link and @import methods?
- Using the style attribute of the HTML tag (inline)
- Use style tag (embedded)
- Use the link tag to introduce external CSS files (link style)
- Use @import to introduce CSS files (import type)
What is the difference between l ink and @import methods:
1. Differences in affiliation
@import is a syntax rule provided by CSS, which only has the function of importing style sheets; link is a tag provided by HTML, which can not only load CSS files, but also define RSS, rel connection attributes, etc.
2. Differences in loading order
When the page is loaded, the CSS introduced by the link tag is loaded at the same time; the CSS introduced by @import will be loaded after the page is loaded.
3. Compatibility differences
@import is a syntax only available in CSS2.1, so it can only be recognized in IE5+; the link tag is an HTML element, so there is no compatibility issue.
4. Differences in DOM controllability
You can operate the DOM through JS and insert link tags to change the style; since the DOM method is based on documents, you cannot use @import to insert styles.
3. CSS horizontal and vertical centering implementation
1. Use flexible layout
{
display: flex;
justify-content: center;
align-items: center;}
2. Use absolute positioning + transform
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}3. Use absolute positioning + margin
{
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin:auto;
}
4. The difference between typeof and instanceof
The return value of typeof is a string used to describe the data type of the variable;
The return value of instanceof is a Boolean value, used to determine whether a variable belongs to an instance of an object.
typeof generally can only return the following results: number, boolean, string, function, object, undefined
5. What is event proxy and its advantages
Event proxy (also called event delegation) Event proxy, in layman's terms, is to delegate the function of one element in response to an event (click, keydown...) to another element; for example: not to each child node Set the event listener individually, but instead set it on its parent node, and then use the bubbling principle to set each child node.
advantage:
- Reduce the memory required for the entire page and improve overall performance
- Dynamic binding to reduce duplication of work
6. The difference between window.onload and $(document).ready
The window.onload method is executed after all elements in the webpage (including all associated files of the elements) are completely loaded into the browser, that is, JavaScript can only access any element in the webpage at this time.
The event handler registered by the $(document).ready() method in jQuery can be called when the DOM is completely ready. It can be operated as long as the DOM is ready. There is no need to wait for all image resources to be downloaded.
7. Array deduplication method in JS
- .Use Array.from(new Set(arr)) to remove duplicates
- Use includes to remove duplicates
//includes() 方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。 let list = [ 8,6, 6, 7, 1, 2, 3, 4, 5, 6, 7, 8] let newList2 = [] list.forEach((item) => { // 空数组newList2 不包含item为false ,取反为true 执行数组添加操作 // 如果数组包含了 item为true 取反为false 不执行数组添加操作 if (!newList2.includes(item)) { newList2.push(item) } }) console.log('newList2', newList2);- Use map to remove duplicates
//map数据结构是es6中新出的语法，其本质也是键值对，只是其键不局限于普通对象的字符串 let list = [3, 4, 4, 5, 5, 6, 6, 7, 1, 2, 3, 4] let newList3 = []; let map = new Map() list.forEach((item) => { // 如果map.has指定的item不存在，那么就设置key和value 这个item就是当前map里面不存在的key,把这个item添加到新数组 // 如果下次出现重复的item，那么map.has(item等于ture 取反 !map.has(item) 不执行 if (!map.has(item)) { map.set(item,ture) newList3.push(item) } }) console.log('newList3', newList3);
8. Describe the Vue component life cycle and briefly describe the role of each cycle
beforeCreate : The instance has just been created in the memory. The data and methods have not been initialized yet. It only contains some built-in life cycle functions.
created : The instance has been created in the memory. At this time, the data and methods have been created.
beforeMount : This has been completed. The template has been compiled, but it has not yet been rendered into the interface and
mounted : The template has been rendered to the browser, the creation phase is over, and it is about to enter the running phase.beforeUpdate : The data in the interface is still old, but the data has been updated, and the page and data have not yet been synchronized.
Intermediate processing (non-life cycle, easy to learn abstract intermediate processing):
First, based on the data in the data, in the memory A new DOM is rendered in it. When the new DOM tree is updated, it will be re-rendered to the real interface, thus realizing the
conversion from data layer (model) to view layer (view)
updated : The page is re-rendered. , the data in the page is consistent with databeforeDestroy : When this method is executed, Vue's life cycle has entered the destruction stage, but various data on the instance are still available.
destroyed : All components have been destroyed, the Vue instance has been destroyed, and no data in Vue is available.
9. Why is data in Vue a function?
In Vue components, the reason why the data option is a function is to ensure that each component instance has an independent copy of the data. When a component is used multiple times, each instance needs to have its own data, rather than sharing the same copy of the data.
10. The difference between watch and computed in Vue
1. computed is a calculated attribute; watch is monitoring, monitoring data changes in data.
2. Computed supports caching. When the value of the property it depends on changes, the calculated property will be recalculated. Otherwise, the property value in the cache will be used; watch does not support caching. When the corresponding property changes, the response will be executed.
3. Computed does not support asynchronous operations and cannot monitor data changes when there are asynchronous operations; watch supports asynchronous operations.
4. Computed will listen when it is loaded for the first time; watch will not listen when it is loaded for the first time by default.
5. Functions in computed must call return; watch does not.
6. Usage scenarios:
computed: One attribute is affected by multiple attributes, such as shopping cart product settlement.
watch: One data affects multiple pieces of data, such as search data.
11. vue-router has several routing modes. What are the differences?
Hash: Use the hash value of the URL as the route. Supports all browsers.
History: Since HTML5 History API and server configuration
Abstract: Supports all javascript running modes. If it is found that there is no browser API, the routing will automatically force into this mode.
the difference
Hash mode:
The # character will appear in the url path
The hash value is not included in the HTTP request. It is handled by the front-end routing, so when the hash value is changed, the page will not be refreshed and a request will not be sent to the server.
Changes in the hash value will trigger the hashchange event
history mode:
The entire address is reloaded, and history records can be saved for easy forwarding and retreating.
Use HTML5 API (old browsers do not support it) and HTTP server configuration. Without background configuration, 404 will appear when the page is refreshed.
12. What are the ways to pass parameters in Vue components? Which components are suitable for each?
1. Props: Pass data to child components by defining props attributes in the parent component. Child components receive data through props attributes; parent passes to child
2. $emit: Pass data to the parent component by triggering events in the child component. The parent component receives data by listening to events on the child component. From son to father
3. Transfer data through Vuex state management: Both ancestor components and descendant components can manage the state of the application through Vuex to achieve data transfer.
4. Transfer data through the event bus: You can create an event bus in the Vue instance, and then trigger and listen for events in sibling components respectively to achieve data transfer.
5. Pass data through a common parent component: If two sibling components have a common parent component, you can define the data in the parent component and then pass it to the two sibling components through the props attribute .