Summary of the latest high-frequency front-end interview questions in 2023 (with answers)

mvvm scenario: In scenarios where there are many data operations and a large number of DOM elements are required, it will be more convenient to adopt the open method of mvvm, allowing developers to spend more experience on data changes and liberating cumbersome DOM elements

MVVM model,
M data is the product data obtained from the background
V view is a written page, every div, every input is a view
VM view model,
When the data changes, the display of the view will be changed through the view model, and the change on the view will also affect the change of the data through the view model
Core: Regarding VUE two-way data binding, its core is the Object.defineProperty() method.

2. What are the life cycles of vue

beforeCreate (before creation), created (after creation), beforeMount (before loading), mounted (after loading), beforeUpdate (before update), updated (after update), beforeDestroy (before destruction), destroyed (after destruction)

mounted The real dom mount is completed updated updated automatically as long as the data data is changed Trigger destroy to destroy the global timer and custom events

If keep-alive is used, there will be two more: activated and deactivated. When the component is first loaded, the first 4 life cycles will be executed, respectively: beforeCreate, created, beforeMount, mounted

3. What is the difference between v-if and v-show?

The same point: can control the display and hiding of dom elements
The difference: v-show only changes the display attribute, the dom element does not disappear, and there is no need to re-render the page when switching
v-if directly deletes the dom element from the page, and switching again requires re-rendering the page

4. What is async await? What does it do?

async await is a new addition to ES7, async is used to declare a function, and await is used to wait for an asynchronous method to complete. The async function returns a promise object. You can use the .then method to add a callback function. During the execution of the function, once it encounters await, it will return first. After the asynchronous operation is completed, it will execute the statement behind the function body

5. What are the commonly used methods of arrays? Which methods will change the original array and which will not

Will change the original array:
- pop (remove the last element of the array and return the removed element)
- push (add one or more elements to the end of the array and return the new length)
- shift (delete and return the first element of the array)
- unshift (add one or more elements to the beginning of the array and return the new length)
- reverse (reverse the order of the elements of the array)
- sort (sorts the elements of an array)
- splice (for inserting, deleting, or replacing elements of an array)
Does not change the original array:
- concat --- connect two or more arrays and return the result.
- every --- checks whether each element of the array element meets the condition.
- some --- check whether there is an element in the array element that meets the specified condition.
- filter---Detects array elements and returns an array of all elements that meet the criteria.
- indexOf---Search for an element in the array and return its position.
- join --- put all the elements of the array into a string.
- toString---Convert the array to a string and return the result.
- lastIndexOf---Returns the last occurrence position of a specified string value, searching from the back to the front in a specified position in a string.
- map---Process each element of the array through the specified function and return the processed array.
- slice --- Select a part of the array and return a new array.
- valueOf---Returns the original value of the array object

6. What is the prototype chain?

Each instance object has a proto attribute, which points to the prototype object of the constructor. The prototype object of the constructor is also an object and also has a proto attribute. In this way, the process of looking up layer by layer forms a prototype chain.

7. What is a closure? What are the pros and cons of closures?

Concept: function nested function, internal variable can access external variable, this variable is called free variable
Problem Solved: Saving Variables
The problem: it will cause memory leaks
Closure application: anti-shake throttling

8. What are the new features of es6?

Add template string
arrow function
for-of (for iterating over data—such as values in an array.)
ES6 incorporates Promise objects into the specification and provides native Promise objects.
The let and const commands have been added for declaring variables.
There is also the concept of introducing the module module

9. Why does the v-for loop have to bind the key?

Add a key to each dom element as a unique identifier, and the diff algorithm can correctly identify this node, making page rendering faster!

10. Why should the data in the component be defined as a function instead of an object?

Every component is an instance of Vue. Components share the data attribute. When the value of data is the value of the same reference type, changing one of them will affect the other

11. What are the common methods of vertically centering boxes? Please give 3 examples?

Realize by using the positioning method of son and father

    <style>
        .container{
            width: 300px;
            height: 300px;
            position: relative;
        }
        .conter{
            width: 100px;
            height: 100px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -50px;
            margin-left: -50px;
        }
    </style>

Using the transform of Css3, you can easily realize the vertical centering of the element when the height and width of the element are unknown.

   <style>
        .container{
            position: relative;
        }
        .conter{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
    </style>

flex

   <style>
        .container{
         display: flex;
         justify-content: center;
         align-items: center;
        }
        .conter{
            
        }
    </style>

12. What are the js data types and what is the difference

Basic types: string, number, boolean, null, undefined, symbol, bigInt
Reference type: object, array
Basic types are stored in the stack, with small space and frequent operations
The reference data type is stored in the heap, and its address is in the stack. Generally, our access is its address

13. What is symbol

It is es6 that introduces a new primitive data type Symbol, which represents a unique value

14. What is the Same Origin Policy

The so-called same-origin policy is a security mechanism of the browser to restrict communication between websites of different origins (the same domain name, protocol, and port number)

15. What is promise and what is its function

Promise is an object that can get asynchronous operation information from changing objects
He can solve the problem of callback hell, that is, the problem of asynchronous deep nesting

16. What is recursion and what are the advantages and disadvantages of recursion?

Recursion: If the function can call itself internally, then the entire function is a recursive function. Simple understanding: the function calls itself internally, and this function is a recursive function.
Advantages: clear organization, strong readability
Disadvantages: low efficiency, the call station may overflow, in fact, each function call will allocate space in the memory stack, and the content of the stack of each process is limited. When there are too many levels of calls, the capacity of the stack will be exceeded, resulting in stack overflow

17. What is the difference between let and const

The let command does not have variable promotion, if it is used before let, it will cause an error
If there are let and const commands in the block area, it will form a closed scope
Duplicate statement not allowed
const defines constants and cannot be modified, but if an object is defined, the data inside the object can be modified

18. Vue performance optimization

functional components
Routing lazy loading
v-for needs to bind key key is the only sign of virtual dom, it can help vue to render pages efficiently and dynamically, it will use diff algorithm when rendering pages, it will compare new and old dom, only compare the same level when comparing, no cross-level comparison, The node is destroyed when the key changes, and the child nodes are destroyed first.
Computed cache data and watch keep-alive cache components
Do not use v-if and v-for at the same time, v-show is display, and destruction is display-none. v-if is true to create. False to destroy.
When designing vue responsive data, you can't design too deep. It will do full recursive calculations.
The granularity of components cannot be designed too finely. Reasonable division. The deeper the level, the greater the performance consumption
Anti-shake throttling
The ui component library is imported on demand

19..mvvm and mvc

m (data layer) v (view layer) vm (data view interaction layer) simplifies a lot of dom operations, only for a single page, and uses data to display the view layer instead of node operations.
MVC also needs to obtain dom, which makes page rendering performance low and loading speed slow
Project optimization that can be said in the interview:
When designing vue responsive data, you can't design too deep. It will do full recursive calculations.
The granularity of components cannot be designed too finely. Reasonable division. The deeper the level, the greater the performance consumption

20. Routing mode: hash and history

Implemented functions:

Change the url without letting the browser send a request to the server
detect url changes
Intercept the url address and parse out the required information to match the routing rules

The hash will have a volume limit based on the url parameter, and it will not be included in the http request and has no effect on the backend. Changing the hash will not reload the page; history can put parameters in the url and store data in a specific object. The solution to the white screen of the browser in history mode is to add a candidate resource covering all situations on the server side. The server must have a corresponding mode on the server before it can be used. If the server is not configured, you can use the default hash first.

21. What are the commonly used tags in the block and row attributes? what are the characteristics

Block tags: div, h1~h6, ul, li, table, p, br, form.
Features: Occupy one line, wrap display, width and height can be set, blocks and lines can be nested
Row labels: span, a, img, textarea, select, option, input.
Features: Only displayed in the line, the content is stretched to expand the width and height, and the width and height cannot be set (except for img, input, textarea, etc.)

22. The difference between == and ===

== is not strictly equal
- equal in value
=== is strictly equal, and compares the data types and value sizes on both sides
- The value and the reference address are equal to be equal

23. Limitations of Strict Mode

Variables must be declared before they can be used
The parameters of the function cannot have attributes with the same name, otherwise an error will be reported
cannot use the with statement
Forbid this to point to the global object

24.git

git init initializes the warehouse
git clone clone
git status check file status
git add. Add files to the staging area
git commit -m description information

25.tcp and udp protocols

tcp is more secure http protocol is based on tcp
udp is more efficient than tcp and easy to lose data

26. Five states of vuex

mutations (modify the data in the state, but he can only perform synchronous operations, asynchronous must be written in the action)
state (put data)
action (perform an asynchronous operation)
getter (computed property)
moudel (allows a single store to be split into multiple stores and stored in a single state at the same time)

transfer process

The page submits events to action asynchronously through mapAction. The action submits the corresponding parameters to the mutation synchronously through commit, and the mutation will modify the corresponding value in the state. Finally, the corresponding value is run out through the getter, and in the calculated property of the page, the value in the state is dynamically obtained through the mapGetter

27. What is anti-shake and throttling, how does js deal with anti-shake and throttling

First of all, anti-shake is to stop falling the previous event when the next event is triggered
Throttling is to trigger the current event after the end of the previous event
By setting the throttle (timer)

28. What is redraw and reflow

Redraw: When the content and layout of the element have not changed, but the appearance of the element has changed (background-color), it will be redrawn
Reflow: When part of the content or layout changes, rebuilding the page will generate reflow
Reflow will definitely cause redrawing, but redrawing does not necessarily cause reflow

29. CSS priority

!importent > inline > id > classes, pseudo-classes, attributes > tags, pseudo-elements selectors > inheritance and wildcards

30. How to solve box collapse

Set the top margin of the parent box
overflow：hidden
sub box off label
padding on the parent box

31. Clear floating method

There are 5 methods

parent box set height
overflow：hidden
pseudo element
double pseudo element
Add an empty box at the end of the parent box, set clear:both

32. Difference between Split() and join()?

The split string is converted into an array, and the parameter is separated by a certain string
The join array is converted to a string parameter indicating what to connect the converted string to

33. Array deduplication

1. Use double for loops, and then use the array method splice method to deduplicate (es5 commonly used)

2. Set deduplication: Prepare an array, deconstruct the newset, and then prepare a function to store the variables of the array as the judgment value of the function, return

Array.from(new set(arr))

3. Array method indexof

4. Array method sort Obj[a]-Obj[b]

34. What causes memory leaks

Improper use of global variables (variables not declared)
Improper use of closures
Timer/Delayer not cleared
Uncleaned DOM element references (events are not cleared when dom is emptied or deleted)

35. Which hook functions will be triggered when the page is loaded for the first time?

beforeCreate
created Data initialization is complete, the method is also called, but the DOM is not rendered
beforeMount
mounted DOM and data pending completion

36. What are the 5 core properties of Vuex?

state => basic data
getters => data derived from basic data (state), which is equivalent to the computed property of state
mutations => method to submit changed data, sync!
actions => is like a decorator that wraps mutations to make them asynchronous.
modules => Modular Vuex
Briefly describe the vuex data transfer process

The page submits events to action asynchronously through mapAction. The action submits the corresponding parameters to the mutation synchronously through commit, and the mutation will modify the corresponding value in the state. Finally, the corresponding value is run out through the getter, and in the calculated property of the page, the value in the state is dynamically obtained through the mapGetter

37. The difference between get and post

The same point.
The bottom layer of get request and post request is based on the TCP/IP protocol. Using either of the two can realize the most essential difference between the two-way interaction between the client and the server
.

Conventions and Specifications:
Specification: Define that GET requests are used to obtain resources, that is, query operations, and POST requests are used to transfer entity objects for addition, deletion, and modification operations
Convention: GET requests splicing parameters into the URL for parameter transmission POST requests write parameters into the request body for transmission

Non-essential difference

Cache is different, get will cache
The parameter length limit is different. The parameters of the get request are passed through the URL, and the length of the URL is limited, usually 2K; the parameters of the post request are stored in the request body, and there is no size limit
Rollback and refresh are different. Get requests can be rolled back and refreshed directly without affecting users and programs; if post requests are rolled back and refreshed directly, the data will be submitted again
The history records are different, the parameters of the get request will be saved in the history record, but the parameters of the post request will not
Bookmarks are different, the address requested by get can be bookmarked, but not by post

38. Cross domain

Cross-domain reasons: browsers protect resources for security reasons, same-origin policy. (protocol, domain name, port number)
Solve cross-domain:
jsonP but can only use the get principle - set the requested interface to the src attribute of the script tag and pass a function to the background to achieve cross-domain. The background response is a function call
cors: the most commonly used.
Reverse proxy: The local front-end sends to the local back-end without cross-domain, (same origin) the local back-end forwards to other servers after receiving the request (there will be no cross-domain between the server and the server). The proxy requires a special flag in the path .

39. The difference between the three types of storage

The cookie set expiration time is deleted even if the window or browser is closed
localStorage has a large storage capacity and stores persistent data. After the browser is closed, the data will not be lost unless manually deleted
sessionStorage is temporarily stored, and the stored content is automatically cleared when the browser is closed

Storage size:

Cookie data size cannot exceed 4k
Although sessionStorage and localStorage also have storage size limitations, a single cookie is much larger and can reach 5m or more

40. How dom implements communication between multiple tabs in the browser

websocket.SharedWoeket;
Local storage methods such as localStorage and cookies can also be called; when localStorage is added, modified or deleted in another browser context, it will trigger an event. We listen to the event and control its value for page information communication;
Pay attention to quirks: Safari will throw an exception of quotaExceededError when setting the localStorage value in incognito mode

41. Please tell me the usage of each folder and file in the src directory in the vue.cli project?

The assets folder is for static resources;
components are square components;
router is the definition of routing-related configuration
view is the view
app.vue is an application main component
main.js is the entry file

42. The difference between $route and $router

router is an instance of VueRouter, which is equivalent to a global router object, which contains many attributes and sub-objects, such as history object. . . Frequently used jump links can use this.$router.push, which is the same as router-link jump.

route is equivalent to the routing object currently being redirected. . You can get name, path, params, query, etc. from it

43. Virtual dom implementation principle

Simulate the real DOM tree with JavaScript objects and abstract the real DOM
diff algorithm: compare the differences between two virtual trees
Pach algorithm: apply the difference of two virtual DOM objects to the real DOM tree

44. The difference between ordinary functions and arrow functions

Arrow functions have no prototype, the prototype is undefined
The arrow function this points to the global object, while the function points to the reference object
The call, apply, and bind methods cannot change the direction of the arrow function

45. How to understand vue single item data flow

Data is always passed from the parent component to the child component. The child component has no right to modify the data passed from the parent component, and can only request the parent component to modify the original data.

46. slot slot

The slot slot can be understood as the slot occupying a position in the component template in advance. When the component is reused, when the relevant slot label is used, the content in the label will automatically replace the position of the corresponding slot label in the component template, as a bearer distribution export of content
The main function is: reuse and expand components, and do some processing of customized components

47. Vue common instructions

v-model is mostly used for form elements to realize two-way data binding

v-bind: Abbreviated as:, dynamically bind the properties of some elements, the type can be: string, object or array.

v-on:click binds a function to the label, which can be abbreviated as @, for example, binding a click function must be written in methods

v-for format: v-for="field name in(of) array json" loop array or json

v-show display content

v-else command: used with the v-if command, there is no corresponding value. When the value of v-if is false, v-else will be rendered

v-if instruction: the value is true/false, whether the control element needs to be rendered

v-else-if must be used in conjunction with v-if

v-else command: used with the v-if command, there is no corresponding value. When the value of v-if is false, v-else will be rendered

v-text parsing text

v-html parses html tags

v-bind:class Three binding methods 1. Object type '{red:isred}' 2. Ternary type 'isred?"red":"blue"' 3. Array type '[{red:"isred"} ,{blue:"isblue"}]'

v-once only renders once when entering the page and does not render

v-cloak prevents flickering

v-pre outputs the elements inside the tag in situ

48. The role of keep-alive in vue

< keep-alive > is a built-in component of Vue, which can keep the state in memory during component switching and prevent repeated rendering of DOM.
< keep-alive > When wrapping dynamic components, inactive component instances are cached instead of being destroyed.

49. The principle of vue two-way binding

The two-way binding of vue data is realized through data hijacking combined with publisher-subscriber mode. Its core is to set the set and get functions through the Object.defineProperty() method to implement data hijacking, publish messages to subscribers when data changes, and trigger corresponding monitoring callbacks. That is to say, the data and the view are synchronized, when the data changes, the view changes accordingly, and when the view changes, the data also changes accordingly;