A collection of questions (answers) that were asked during the interview yesterday

1. What is the two-way binding principle of vue? Where is the key point in it?
Vue's two-way binding principle is implemented based on Object.defineProperty or Proxy. The key point is data hijacking, that is, intercepting the reading and modification of data, and automatically updating the view when the data changes.

2. How to achieve horizontal and vertical centering?
There are many ways to achieve horizontal and vertical centering, such as using flex layout, absolute positioning, negative margin, etc.

3. What are the commonly used pseudo-elements?
Commonly used pseudo-elements are before and after.

4. How does the mobile terminal adapt to different screen sizes?
The mobile terminal can adapt to different screen sizes by setting the viewport attribute in the meta tag, such as setting width=device-width, initial-scale=1, etc.

5. What are the local storage? What is the difference between the three of them?
Common local storage methods include cookie, localStorage, and sessionStorage, and their differences lie in scope, storage capacity, and expiration time.

6. What is the data type of JS? How to judge the data type of js?
JavaScript data types include Number, String, Boolean, Object, Null, and Undefined, etc. You can use methods such as typeof, instanceof, and Object.prototype.toString.call() to judge the data type

7. What are the new features of ES6?
New features of ES6 include let and const keywords, arrow functions, template strings, destructuring assignments, classes and inheritance, modularization, and more.

8. What is the difference between Let, const, and var?
let and const are keywords of block-level scope, and var is a keyword of function scope. Variables declared by let and const cannot be declared repeatedly, and variables declared by const cannot be modified.

9. What are the ways to deduplicate the array?
The method of array deduplication includes using the deduplication function of the constructor Set, using loop traversal and deduplication of object properties, etc.

10. Talk about deep copy and shallow copy, how to implement a deep copy by yourself?
Deep copy and shallow copy refer to whether to recursively copy the internal sub-objects when copying the object. You can use methods such as JSON.parse(JSON.stringify(obj)) and recursive copy to implement deep copy.

11. What are the life cycles of Vue? Tell me what they do at each stage?
Vue's life cycle includes stages such as beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, and destroyed. Each stage corresponds to a different operation, such as data initialization, DOM mounting, and destruction.

12. What are the communication methods of components?
Component communication methods include props, $emit、$parent/$children,provide/injectectand$ refs etc.

13. How many attributes and functions does Vuex have?
The properties of Vuex include state, getters, mutations, actions and modules, etc., which are used to manage the state in Vue applications.

14. What is the difference between Vue's listener properties and computed properties?
Vue's listener attribute and computed attribute are both used to monitor data changes, but the listener attribute is a function that needs to be called manually, while the computed attribute is an attribute that automatically calculates and caches the result

15. Talk about anti-shake and throttling. How to achieve it?
Anti-shake and throttling are methods used to control the frequency of function execution. Anti-shake means that only the last operation is performed within a certain period of time, and throttling means that only one operation is performed within a certain period of time. It can be realized by means of setTimeout and timestamp.

16. What are the navigation guards of Vue?
Vue's navigation guards include global pre-guards, global post-hooks, routing exclusive guards and guards within components, etc.

17. How do you achieve your login interception?
Login interception can be achieved through routing guards, request interception, and response interception

18. Have you ever used charts? Do you use it a lot?
Common chart libraries include ECharts, Highcharts, D3, etc.

19. What is a closure? How to achieve?
Closures refer to variables inside functions that can access external functions, and can be used to encapsulate private variables and implement currying and other operations.

20. What is the difference between Vue2.0 and Vue3.0?
The difference between Vue2.0 and Vue3.0 lies in performance optimization, combined API, responsive system and virtual DOM.

21. What are the commonly used commands for Vue?
Vue commonly used instructions include v-model, v-for, v-if, v-show, v-bind, v-on, etc.

22. What is the difference between v-If and v-show?
The difference between v-if and v-show is that the former destroys the corresponding DOM element when the condition is false, while the latter just hides the element in style.

23. Why does v-for need to add a key?
v-for needs to add the key attribute to help Vue identify the uniqueness of nodes and improve rendering efficiency.

24. How do you encapsulate a component?
Encapsulating a component needs to consider the input and output of the component, which can be achieved by using props and $emit.

25. Have you ever built a project from 0 to 1?
Building a complete project from 0 to 1 requires consideration of project architecture, technology selection, development process, testing and deployment, etc.

26. Have you ever used uni-app?
uni-app is a cross-platform development framework based on Vue, which can be used to quickly develop small programs, H5, APP and other applications.

27. Can you write background? Have you tried server-side rendering?
Background development requires mastering technologies such as server-side language and database, and server-side rendering can improve the first-screen loading speed and SEO effect of the page.

28. Tell me about the difficulties encountered in your project, and how to solve them?
Difficulties encountered in the project may include architecture design, performance optimization, and business logic, which need to be solved through debugging and optimization

29. What are the steps in the process from URL to browser?
The process from URL to browser includes steps such as DNS resolution, establishment of TCP connection, sending HTTP request, server processing request, browser parsing and rendering page, etc.

30. How to implement request encapsulation and interception of applets?
Mini-program request encapsulation and interception can be achieved by encapsulating the request function and using interceptors.

31. In the project application of vue, how to package without using the framework?
Using native HTML, CSS, and JavaScript without using a framework in a Vue project requires manual handling of data and events.

32. What is Js prototype? What is the prototype chain?
The prototype of JavaScript means that each object has a prototype object, and the prototype object has its own prototype, forming a prototype chain.

33. What are the communication methods of components?
Component communication methods include props, $emit、$parent/$children,provide/injectectand$ refs etc.

34. What have you done with the principle of closure?
Closures can be used to implement operations such as currying, encapsulating private variables, and caching.

35. What is the scope?
Scope refers to the accessible scope of variables. JavaScript has global scope and function scope, etc.

36. What are the ways of manipulating arrays?
Ways to manipulate arrays include traversing arrays, adding and deleting elements, deduplicating and sorting arrays, and more.

37. Is 0.1 + 0.2 equal to 0.3? Why? How to solve?
0.1 + 0.2 is not equal to 0.3, because JavaScript uses the IEEE 754 floating-point standard, which has precision problems. It can be handled with the toFixed method.

38. What is keep-alive? What are the life cycle stages?
keep-alive is a component in Vue, which is used to cache component instances and improve the rendering efficiency of components. Its life cycle includes activated and deactivated stages

39. What are the ways to judge whether a variable is an array?
To determine whether a variable is an array, methods such as Array.isArray and instanceof can be used.

40. What are the ways to judge whether a variable is an object?
To determine whether a variable is an object, methods such as typeof and Object.prototype.toString.call() can be used.

41. What are the common methods of objects/arrays?
Object/array common methods include push, pop, shift, unshift, slice, splice, concat, map, filter, reduce, etc.

42. What are the ways to create an empty array/empty object?
To create an empty array you can use [] or new Array(), and to create an empty object you can use {} or new Object().

43. Which traversal methods will change the original array?
Using forEach, map, filter, reduce and other traversal methods will not change the original array, but using push, pop, shift, unshift, splice and other methods will change the original array

44. What are Set and Map?
Set is a data structure used to store unique values, and Map is a key-value pair data structure used to store keys and values ​​of any type

45. Introduce promises.
Promise is a solution for asynchronous operation management to solve the problem of callback hell, which is characterized by chain calls and state mechanisms

46. ​​Promise usually solves three kinds of problems

(1) Chain callback

(2) Initiate several asynchronous requests at the same time, whoever gets the result first will get it

(3) Initiate multiple requests, wait until all requests are processed before proceeding to the next step

How are promises handled in these three ways?

Promise can implement chained callbacks through the then method, initiate multiple asynchronous requests at the same time through the Promise.all method, and wait for the results of multiple asynchronous requests through the Promise.race method

47. How to change the context of a function a?
You can change the context of a function using methods such as bind, apply, and call

48. What is the difference between Call and replay?
Both call and apply are used to change the context of the function, the difference is that the way of passing in parameters is different

49. What is Evenbus?
EventBus is an event publish/subscribe mechanism that enables communication between components

50. What are the general life cycles in Vue?
The common life cycle in Vue includes stages such as beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, and destroyed.

51. What is the execution order of the parent-child component life cycle?
The execution order of the parent-child component life cycle is parent beforeCreate -> parent created -> parent beforeMount -> child beforeCreate -> child created -> child beforeMount -> child mounted -> parent mounted.

52. How many life cycle stages does mixins have?
Mixins have lifecycle phases beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, and destroyed.

53. Flexible layout, one row with two columns, one column with fixed width, how to achieve it?
To achieve a horizontal and vertical centered layout with one row, two columns, and one column with a fixed width, you can use the Flex layout, set display: flex, align-items: center, and justify-content: center for the parent element, set flex: 1 for the left element, and set the right element to be fixed width

54. What three properties does Flex: 1 contain?
Flex: 1 contains three properties: flex-grow, flex-shrink and flex-basis, which respectively represent the proportion of elements in the remaining space, the scaling ratio of elements when space is insufficient, and elements base size of .

Tool collection: https://aiburgeon.com/siteCollection/