The following questions are in no particular order
1. What is the principle of bidirectional data binding implemented by VUE?
2. How is v-Model syntax sugar implemented
3. What’s the difference between Hash and history
What is deep copy and shallow copy? And how to implement deep copy and shallow copy?
Click the link below: juejin.cn/post/684490…
5. What is a prototype and what is a prototype chain?
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>Document</title>
</head>
<body>
</body>
<script>
function Person () {}var person = new Person();
person.name = 'Kevin';
console.log(person.name) // Kevin
// prototype
function Person () {
}
Person.prototype.name = 'Kevin';
var person1 = new Person();
var person2 = new Person();
console.log(person1.name)// Kevin
console.log(person2.name)// Kevin
// __proto__
function Person () {}var person = new Person();
console.log(person.__proto__ === Person.prototype) // true
//constructor
function Person() {}console.log(Person === Person.prototype.constructor) // true
// To sum up
function Person () {}var person = new Person()
console.log(person.__proto__ == Person.prototype) // true
console.log(Person.prototype.constructor == Person) // true
// Learn the ES5 method, you can get the prototype of the object
console.log(Object.getPrototypeOf(person) === Person.prototype) // true
// Examples and prototypes
function Person () {
}
Person.prototype.name = 'Kevin';
var person = new Person();
person.name = 'Daisy';
console.log(person.name) // Daisy
delete person.name;
console.log(person.name) // Kevin
// The prototype is the prototype
var obj = new Object(a); obj.name ='Kevin'.console.log(obj.name) //Kevin
/ / prototype chain
console.log(Object.prototype.__proto__ === null) //true
// null means "no object", meaning there should be no value there
/ / added
function Person() {}var person = new Person()
console.log(person.constructor === Person) // true
// When the constructor property is retrieved, there is no constructor property in person. When the constructor property cannot be retrieved, the prototype of person is retrieved
Person. Prototype reads the property in the prototype, so
person.constructor === Person.prototype.constructor
//__proto__
// Then there is __proto__. Most browsers support this non-standard method of accessing prototypes, but it is not in Person.prototype. In fact, it is
Object. Prototype is more of a getter/setter than a property. When using obj.__proto__, it can be interpreted as a return
// Object.getPrototypeOf(obj)Conclusion:1When an object looks for properties and methods, it looks from itself; if it can't find them, it points to the instantiated constructor's prototype via __proto__2An implicit stereotype is also an object that points to our constructor3Except at the topObjectObjects have no __proto_, all other objects have __proto__, which is implicit archetype4The implicit __proto__ is used by an object to find attributes or methods up to the top levelObjectThe __proto__ attribute of thenullThe search process is called the prototype chain</script>
</html>
Copy the code6. What is the difference between arrow functions and normal functions?
(1) arrow function more concise than normal function You write directly without parameters, an empty parentheses If there is only one parameter, could save parameters brackets If there are multiple parameters, comma separated If the return value of a function body only, can omit the braces If you don't need to return a value function body, and only in a word, can add one to the front of this statementvoidThe keyword. The most common is to call a function:let fn = () = > void doesNotReturn()
(2Arrow functions do not have their ownthisArrow functions will not create their ownthisSo it doesn't have its ownthisIt inherits only at the level above its scopethis. So the arrow functionthisThe direction of is fixed at the time of its definition and does not change thereafter. (3) inherited from the arrow functionthisThe point never changes (4Call (), apply(), bind(), and so on cannot change the arrow functionthisPoint (5Arrow functions cannot be used as constructors (6Arrow functions do not have their ownarguments
(7Arrow function has no prototype (8Arrow functions cannot be used as Generator functions and the yeild keyword cannot be usedCopy the code7. What does the New operator do?
1First, a new object is created2Set the prototype of the object to the prototype object of the function3, let the functionthisPoint to the object and execute the constructor code (add attributes to the new object)4, determine the return value type of the function, if the value type, return the created object. If it is a reference type, an object of that reference type is returnedCopy the code8. Eventloop
9. What is a closure and what are its application scenarios
10, What is Promise? What syntax is async await
What is the difference between a Set and a map
12. What is the difference between Map Foreach
Localstorage sessionStorage cookie
14. What are the basic attributes of Vuex and how to use methods in a page
15. What is the difference between Loader and Plugin
Loader: Loader. Webpack treats all files as modules, but Webpack can only parse JS files natively. If you want to package other files, you will use the 'loader'. So what Loader does is give WebPack the ability to load and parse non-javascript files. Plugin: Plugin. Plugin can extend the functionality of WebPack to make it more flexible. A number of events are broadcast during the life cycle of a Webpack run, and the Plugin can listen for these events and change the output when appropriate through the API provided by Webpack.
16. What happens when you enter an address in the address bar and press enter
What is the difference between UDP and TCP
18. What are common performance optimizations used in projects
19, how to solve the cross-domain problem, how do you configure
20. What is the difference between calculated properties and Watch
21. What is the Vue lifecycle? What exactly does each hook do
22. There are several ways to pass values between components
23. How is Eventbus implemented
24. What is the way that parent components update to child components
What does $nexttick do, and what do you do with it
26. What is Keepalive and what hooks are in it
27. What are slots and how are they used
Es6 common grammar do you know which ones
29. How do you use custom commands
30. Redraw and rearrange
Common horizontal and vertical way
32. Standard box model and weird box model
What does Flex: 1 stand for
Rem how do you adapt
What is the media inquiry
36. How did you optimize the first screen performance
How to solve the problem of white screen
How do you monitor browser performance
Key = index (index); key = index (index)
40. How do you implement virtual lists
Say anti – shake and throttling
42, Tell me about the difficulties of your project and your role in the project. What role do you think you play in the team
Do you have any questions?
44, What are some common ways to detect data types?
typeofWhere array, object,nullAre judged to beObjectAll other judgments are correctinstanceofOnly reference data types can be determined, not base data typesconstructorIt has two functions: one is to determine the type of data, and two is to pass the object instanceconstructorThe object accesses its constructor. One thing to note is that if you create an object that changes its prototype,constructorYou can't judge the data typeObject.prototype.toString.call()
Copy the code45, Why is data a function and not an object?
An object in JavaScript is a reference type of data. When multiple instances reference the same object, as long as one instance operates on the object, the data in the other instances also changes. In Vue, we want to reuse components more, so we need each component to have its own data so they don't interfere with each other. So component data cannot be written as an object, but as a function. The data is defined in the form of the return value of the function, so that every time we reuse a component, we return a new data. This means that each component has its own private data space, and they maintain their own data without interfering with the normal operation of other components.
46, Say the difference between a slice splice split?
// slice(start,[end])
// Slice (start,[end]) method: this method is a partial interception of an array, which returns a new array
// The start argument is the truncated start array index, and the end argument is equal to the position of the last character you want plus 1 (optional).
// contains the elements specified by the source function from start to end, but does not include the end element, such as a.ice (0,3);
// If there is a negative number, add the negative number to the length.
// Slice displays all arrays if the absolute value of a negative number is greater than the array length
// If there is only one parameter and the parameter is greater than length, it is null.
// If the end position is less than the start position, an empty array is returned
// The number returned is the number of end-start
// Does not change the original array
var arr = [1.2.3.4.5.6]
/*console.log(arr.slice(3))//[4,5,6] from subscript 0 to 3, Console. log(arr.slice(0,3))//[1,2,3] console.log(arr.slice(0,-2))//[1,2,3] Console. The log (arr. Slice (4, 4)) / / [3, 4] the console log (arr. Slice (7)) / / [6] the console log (arr. Slice (3, 3)) / / [] console.log(arr.slice(8))//[]*/
// Personal summary: Slice parameters are left to right if positive, right to left if negative,
// The array is truncated in the same direction as the number. If there are two parameters, the array is truncated as the intersection of the number. If there is no intersection, an empty array is returned
// ps: Slice can also slice strings in the same way as arrays, but note that Spaces count as characters
// splice(start,deletecount,item)
// start: indicates the start position
// deletecount: deletes bits
// item: the replacement item
// Returns the deleted string
// If there are additional arguments, the item is inserted at the position of the removed element.
// splice: Remove. The splice method removes one or more arrays from an array and replaces them with new items.
// Take a simple example
var a=['a'.'b'.'c'];
var b=a.splice(1.1.'e'.'f');
console.log(a) //['a', 'e', 'f', 'c']
console.log(b) //['b']
var a = [1.2.3.4.5.6];
//console.log(" deleted as: ", a.ice (1, 1, 8, 9)); // Delete: 2
// console.log("a array element: ",a); / / 1,8,9,3,4,5,6
// console.log(" deleted as: ", a.ice (0, 2)); // delete 1,2
// console.log("a array element: ", a) //3,4,5,6
console.log("Deleted is:", a.splice(1.0.2.2)) // Insert the second number is 0, indicating that 0 is deleted
console.log("A array element:", a) / / 1,2,2,2,3,4,5,6
// split(string)
Split (separator,limit) : The split method creates an array of strings by splitting the string into pieces.
// The optional parameter limit limits the number of fragments to be split.
The separator argument can be a string or a regular expression.
// If separator is a null character, it returns a single-character array that does not alter the original array.
var a="0123456";
var b=a.split("".3);
console.log(b);//b=["0","1","2"]
// Note: String.split() does the opposite of array.join.
Copy the codeHow to convert a class array to an array?
// Call the array's slice method for conversion
Array.prototype.slice.call(arrayLike)
// Call the array's splice method to do the conversion
Array.prototype.splice.call(arrayLike,0)
// Use apply to call the concat method of the array
Array.prototype.concat.apply([],arrayLike)
// Use the array. from method to implement the conversion
Array.from(arrayLike)
Copy the codeTalk about how to remove the array, how many methods do you have?
let arr = [1.1."1"."1".true.true."true", {}, {},"{}".null.null.undefined.undefined]
1 / / method
let uniqueOne = Array.from(new Set(arr)) console.log(uniqueOne)
2 / / method
let uniqueTwo = arr= > {
let map = new Map(a);// Or use an empty object let obj = {} to make use of object properties that cannot be repeated
let brr = []
arr.forEach( item= > {
if(! map.has(item)) {// If it is an object, it can be judged! obj[item]
map.set(item,true) // obj[item] =true
brr.push(item)
}
})
return brr
}
console.log(uniqueTwo(arr))
3 / / method
let uniqueThree = arr= > {
let brr = []
arr.forEach(item= > {
// Use indexOf to return whether the array contains a value
if(brr.indexOf(item) === -1) brr.push(item)
// Or use includes to return whether the array contains a value false or true if it does
if(! brr.includes(item)) brr.push(item) })return brr
}
console.log(uniqueThree(arr))
4 / / method
let uniqueFour = arr= > {
// Use filter to return the set that matches the criteria
let brr = arr.filter((item,index) = > {
return arr.indexOf(item) === index
})
return brr
}
console.log(uniqueFour(arr))
Copy the code49, How to get the largest array item?
Json.stringfy Json.parse what are the disadvantages of json.stringfy json.parse?
51. React hooks
What is the difference between a class component and a function component?
1.Syntax: A functional component is a pure function that takes props and returns a React element. Class components are required to inherit from React.component. andclassComponents need to be createdrenderAnd returnsReactElement, which is syntactically more complex. Functional components can be called directly, returning a new oneReactElements; Class components need to create an instance when called, and then call therenderMethod to return aReactElements. Functional components have no state management, while class components have state management. 4. There are no specific requirements for using scenario class components. Functional components are generally used in large projects to separate large components (functional components do not need to create instances, all more efficient). In general, functional components are used instead of class components to improve efficiency.Copy the codeReact update mechanism
54. What’s in redux
Talk about the difference between the React and Vue frameworks
What are the advantages of proxy
57, Talk about the common attributes of VUe3.0
58. What are the advantages and disadvantages of BFC
Say how you adapt to various mobile phone models on the mobile end
Say what are the advantages and disadvantages of SPA single page?
Advantages:1.Good experience, no refresh, reduce the request data Ajax asynchronous access page process;2.Front end separation3.Reduce the pressure on the server4.Share a set of back-end program code, set with multi-terminal disadvantages:1.The first screen loading is slow.2.SEO is bad for search engine crawlsCopy the codeTalk about the login process
62, say how to implement the permission configuration
63, What is the logic of shopping cart?
// The implementation of shopping cart logic in vUE
1.Shopping cart information is stored in an array that holds objects with id and count attributes2.Add a cartList of data to state in VUex to hold this array3.Since the item details page requires the add cart function, we need to provide a mutation to add cart information to the cartList4.When adding cart information, follow the following rules: if the cart already has the item information, then add the quantity, if not, then add an object5.On the item details page, when the addToCart button is clicked, the addToCart mutation provided by vuex is called to pass the current item information (id count) to addToCartthis.$store.commit("addToCart", {id:, count:}// implement the shopping cart logic in javascript
1.Product page click "Add to cart" button, trigger the event2.Event calls the shopping cart "add item" Js program (function, object method)3.Pass to Js program "commodity ID", "commodity quantity" and other data4.Store "commodity ID" and "commodity quantity" to the browserlocalStorageDisplay items in shopping cart ******1.Open the shopping cart page2.fromlocalStorageTo obtain information such as product Id and Product Quantity.3.Call the "Get Item Details" interface on the server side to get the item information in the shopping cart (parameter is the item Id)4.Display the obtained product information on the shopping cart page. ** Complete the purchase of items in the shopping cart ******1.The user completes the purchase process of the goods in the shopping cart and generates the purchase order2.removelocalStorageInformation notes for purchased goods stored in1: in the shopping cart goods stored data in addition to the "product id", "quantity", based on product requirements can also have other information, such as complete product details (so you don't have to drop the server interface) for more details, shopping cart, the expiration date of the goods, shopping cart of goods over time in the next time you open the web site or shopping cart page is cleared. note2: Shopping cart except for goods stored inlocalStorageAccording to product requirements, it can also be stored in sessionStorage, cookie, session, or directly send requests to the server interface and stored on the server. In which case use which way of storage, what is the difference please analyze.Copy the code64, Talk about multi-page state management
65, Say something about the common HTTP status code? What do I mean by the status codes 302 and 304? Were you in the project? How did you solve it?
<! -- Status code: Yes3The first number defines the category of the response --> <! -- 1xx: indicating message that the request has been received, continue processing --> <! -- 2xx: successful, indicating that the request has been received successfully, processing --> <! --200OK: The client request is successful204No Content: indicates No Content. The server processed successfully, but did not return content. This is usually used when the client sends information to the server, but the server does not return any information to the client. The page is not refreshed.206Partial Content: The server has completed a Partial GET request (the client made a scope request). The response message contains the entity Content in the specified content-range --> <! -- 3xx redirect --> <! --301Moved Permanently: Permanently redirects, indicating that the requested resource has been Permanently Moved to another location.302Found: Temporary redirection, indicating that the requested resource has been temporarily moved to another location303See Other: temporary redirection. Use GET to obtain requested resources.303Function and302Same thing, just different303Make it clear that clients should use GET access307Temporary Redirect: Temporary Redirect, and302It has the same meaning. POST doesn't become GET304Not Modified: indicates that the client sends a conditional request (IF...). , the condition is not met. return304Does not contain any response body. although304Is classified in 3XX, but has nothing to do with redirection --> <! -- 4xx: client error --> <! --400Bad Request: The client Request has a syntax error that the server cannot understand.401Unauthorized: The request is Unauthorized. This status code must be used with the WWW-Authenticate header field.403Forbidden: The server receives requests but refuses to provide services404Not Found: The requested resource does Not exist. For example, enter the wrong URL415Unsupported media type: Unsupported media type --> <! -- 5xx: server side error. The server failed to fulfill a valid request. -- > <! --500 Internal Server Error: An unexpected error occurred on the server.503Server Unavailable: The Server is currently unable to process requests from clients, but it may become normal after a period of time. -->Copy the codeGit git git git git git git