preface

Jin Jiu Yin shi, because of various reasons I left the job, and then began to look for a job situation, base Xiamen, the following simple review of a number of companies were asked some interview questions. Many of the questions behind are repetitive or related, I just briefly talk about their own answers, specific answers you have to learn to understand, so that is your own, some questions I put some reference links, you can learn according to the actual situation.

The content is a little bit much, the suggestion likes the collection that is meeting

To introduce myself

In most cases, the interviewer will tell you a little bit about yourself and then ask you to introduce yourself. This is the first step, and it’s almost always there. I’ve also met interviewers who don’t need to ask me to introduce myself.

Good morning/afternoon, my name is Wang Xiaoer, I graduated from a certain school in a certain major, today I apply for the position of front-end engineer in your company, I have been engaged in front-end development for more than three years, then briefly describe the first entry, the second company. Tell me about my personality, blah, blah, blah, blah

Review of interview questions

Here are some interview questions I recorded. There is no difficulty order, just a simple review. Some questions are slightly repeated, without second filtering. The following interview questions are based on VUE2, with a few involving VUE3

1. Life cycle

beforeCreate => created =>beforeMount => Mounted =>beforeUpdate => updated =>beforeDestroy=> destroyed

Keep-alive: activated deactivated

Extended link

Vue official website document

2. Parent-child life cycle order

Parent beforeCreate => parent created => parent beforeMount => child beforeCreate => child created => child beforeMount => child Mounted=> parent Mounted

The child component is first mounted and then to the parent, and updates are similar to parent beforeUpdate => child beforeUpdate => child updated => parent updated

Extended link

Vue official website document

3. Transfer values between parent and child components

For example, emitpropsemit props emitpropsref parentparent parentChildren eventBus provide/ Inject vuex

Extended link

Parent and child components pass values

4. Eight cross-domain solutions

  • Iframe + document.domain location.hash window.name
  • possMessage
  • proxyTable
  • Nodejs middleware
  • cors
  • websocket
  • jsonp
  • Nginx reverse proxy
Extended link

Multiple solutions across domains

5. Ordinary function arrow function difference * constructor

  • 1. Arrow function has no archetype. Archetype is undefined
  • 2. The arrow function this points to a global object and the function points to a reference object
  • 3. The call, apply, and bind methods do not change the direction of the arrow function
Extended link

What’s the difference between a normal function and an arrow function?

6. Reduce (use of accumulator, self-realization)

  • arr.reduce(a,b)
  • A is a function and b is the initial value
  • Arr. Reduce ((a,b,c,d)=>{a is the initial value, total b is the current array value, C is the current idNEx,d is the entire array})
Extended link

8 JS Reduce usage instances, and reduce operations

7. What is the difference between JQ and VUE

One of the core ideas of Vue.js is data-driven. By data-driven, we mean that the view is generated by data, and we modify the view not by manipulating the DOM directly, but by modifying the data. Compared with our traditional front-end development, such as using jQuery and other front-end libraries to directly modify the DOM, it greatly simplifies the amount of code. Especially when the interaction is complex, focusing only on changes to the data makes the logic of the code very clear, because the DOM becomes a mapping of the data, and all of our logic is changes to the data without touching the DOM, which is very maintainable code.

  • Vue data driven
  • Jq controls dom elements
  • Simple or few DOM elements. If the two don’t look very different from each other and there are a lot of DOM elements and operations, you’ll find that VUE is much more convenient and concise
  • Vue renders elegantly and the code is easy to maintain

8. Basic data types, reference types, basic types…

String, Boolean, number, null, undefined, symbol, bigInt

object

Js data type

9. Promise and async await knowledge ES6

Es6 介 绍 :

  • Declarations and expressions: let const deconstruct the assignment Symbol
  • Built-in objects: Map and Set Proxy and Reflect
  • String template
  • Function: argument extension arrow function iterator for of
  • Class class
  • Export and import modules
  • Promise async await and generator

Ruan Yifeng’s ES6 study

10. Which macro task and micro task (Event loop) promise belong to

  • Event loop
  • Task queue
  • Macro task
  • Micro tasks

Macro task and micro task in JS

11. Difference between VUe2 and VUe3 (where is vue3 fast?)

  • Diff algorithm adds patchFlag static identifiers and only compares DOM elements with static identifiers
  • Event increment cache
  • Many text node promotions are defined once and do not need to be defined again during rendering, and VUe2 needs to be redefined each time
  • SSR rendering renders as strings
  • Proxy replaces defineProterty
  • vite
  • ts

.

12. Some principles of VUe2 (for more information)

NextTick, Diff, virtual DOM, Watch, etc

Vue2 principle learning link

13. Cesium and three.js, Babylu.js map engine and 3D maps etc. (individual required)

Knowledge of maps or 3D

14. Some knowledge of vuex (extending Router Axios)

state moudles getter actions moutation

Vuex website

15. Axios fetch Ajax difference

The Axios interceptors request Response

The difference between Ajax and Axios and FETCH

Explain the differences between AXIos, FETCH, ajax, etc

16. Vue2 filter

Filter function of Vue2. X

Four uses of vue filter

17. Es6 like promise…

The importance of es6 knowledge points is repeated

Ruan Yifeng’s ES6 study

18. What problems does ES6 deconstruction solve

  • Data values are assigned
  • Gets the object property value
  • More concise code, etc

Ruan Yifeng’s ES6 study

19. The difference between V-if and V-show

  • Presence of rendering
  • Recommended scenarios

V -for+ V -if

20. The function of v-for key

Diff algorithm’s contrast identifier speeds up DIFF

21. Some knowledge of diff algorithm and virtual DOM

  • Create a dom tree
  • Generate style sheets
  • Associate the DOM tree with the stylesheet to generate the Render tree
  • Layout of the layout
  • Paint draw

The virtual DOM is a JS object

Virtual dom

22. Two ways of routing Routing guard

Hash History works with common hooks

23. Implementation of dynamic loading routes

Implementation of dynamic load routing 1

Implementation of dynamic load routing 2

24. Realization and control of system permissions (consider the problems related to project login)

  • Combined with the back-end
  • Pure front end
  • How to encapsulate
  • Different roles

25. The difference between watch and computed

  • Usage scenarios
  • The computed cache
  • Both are Vue Watcher classes

26. Tell me about the difficulty of your own project

Combined with their own projects said several can be good at their own direction, such as performance optimization data buried points or engineering practice and so on

27. [] = = false and! []==false

  • The first []==false is converted to the number 0==0
  • The second! []==false Converts to Boolean false==false

Think about explicit versus implicit transformations

28. Performance optimization

There is too much to say about performance optimization in terms of code, network resource loading, packaging, deployment, etc

Thinking: User experience optimization such as white screen loading (skeleton screen)

29. The router guard and system permissions correspond to 23 and 24

  • Routing encapsulation, lazy loading and so on
  • System permissions

30. The similarities and differences between Vue and React

The same:

  • All use the virtual DOM,
  • Have a SSR,
  • Both support JSX,
  • Good performance,
  • Responsive,
  • Data-driven,
  • Keep your focus on the core library, but also on routing and secondary libraries that handle global state management.

The difference between:

  • Vue is used for small projects,
  • Vue learning cost is low,
  • Vue renders faster,

React is JSX,

  • Vue two-way data binding,
  • React is one-way,
  • Vue has command syntax,

React is all in JS and vue is all in. Vue

31. Webpcack’s way of packaging images

Base64 and address import

I learn webpack from a CSND author

32. What are the types of content-type

  • application/json
  • multipart/form-data
  • raw
  • binary

33. What are the ways of post

  • get
  • post
  • header
  • put
  • delete
  • .

34. Es6 class principle

Ruan Yifeng’s ES6 study

35. Higher-order and partial functions

Functions whose parameters are functions are higher-order functions

The return function is partial

36. Async Generator Promise is an asynchronous solution

  • Async /await is the syntactic sugar of Generator.
  • Generator yield is invoked step by step, and then() is invoked continuously
  • Async /await returns a promise object, so you can write then();

37. How to determine whether the browser supports ES6

You can use an ES6 syntax to see if an error is thrown

38. The difference between FORM and JSON, etc

The content-type type

39. Why does vue’s data return a function instead of an object

If the data of the component directly returns an object, the mapping address of their data is the same when the component is introduced many times, causing mutual pollution. If the function returns an object, each time the component is registered, a new object is generated, and their mapping address is different

40. Hock: Life cycle

this.$once(‘hook:beforeDestroy’,()=>{ })

41: How to determine whether the login user has the knowledge of the page permission token expiration and so on

It’s permission dependent and easy to ask

42. Route guard functions again like beforeEach

Recurring problems

43. What are the attribute values of defineProterty

  • The property and attribute description can be deleted without any additional information
  • An Enumerable can only appear in an object enumeration
  • The value of initial value
  • Whether writable can be changed by assignment operators
  • get
  • set

Extended link

Obj ={a:0} each time attribute a value +1

Simple implementation: add a record value outside

44. The use and difference of mutations and actions in VUex

  • The Action commits mutation rather than a direct state change.
  • Actions can contain any asynchronous operation.

Observe observer DEp Watcher, vue2

Learn the vuE2 principle

46.webpack 的loader

use test loader exclude

Different from the plugins

47.ts的readOnly ? public

Ts knowledge,

48. NextTick principle

The callback executed after a DOM update

Can be used to get updated DOM elements

49. Axios interceptors

interceptor

50. Extends and vue.use mixins

Plug-ins need install to be used

Distinguish between extends:… And the vue. The extend

  • Extend can import only one object while mixins can import multiple objects in an array
  • vue.extend()And the way to do that isvueA constructor inherited fromvue
  • Can be achieved byextentExtend global components

51. Init () principle of vue

BeforeCreate init events and the life cycle

What is the difference between the Component global and local registry of a Vue

  • Global Component: Vue.com Ponent ()
  • Local components:

53. Look at the project API and Router encapsulation

Repeat the topic

54. Eventbus is implemented manually

How do I implement an EventBus myself

Some thoughts on virtual DOM

Interviewer: How do you understand Virtual DOM?

56. Vite fast where vite advantages

  • Webpack uses Ployfill to register dependencies
  • Vite uses ESM registration dependencies
  • Vite package size smaller vITE faster Vite configuration easier

57. Difference between defineProterty and proxy

  • DefineProterty is the hijacked object’s data
  • Proxy is the whole object

React vs. Vue

Repeat:

  • Similarities: Both have virtual DOM both have SSR responsiveness both support JSX both have corresponding state management and route management libraries both focus on their own libraries
  • Vue has more Chinese documents. Vue has Templete. React is JSX

Setup Data coupling knowledge

A link to the

60. Concept of js closures

  • The sum of a function and its variables
  • External fetch uses this variable but cannot be changed directly by the outside and is called using a method owned by the function

61. Three-way handshake and four-way wave HTTP related concepts 1.1 added keep-alive status codes such as 301 302

HTTP http1.0 http1.1 HTTPS http2.0 and so on (to be enhanced)

Learning links

62. Why is JS single threaded

Js was originally designed to speed up client and server access. With multiple threads, changing DOM elements in multiple places makes it harder to design for chaos

63. The worker of h5

  • This is an API for H5
  • It’s also a class
  • The new worker adds a thread, but this thread is restricted from manipulating DOM elements and is managed by the main thread

64. Macro and micro tasks for eventLoop

  • Event loop
  • Task queue
  • Macro task
  • Micro tasks

Macro task and micro task in JS

(Perform macro task first and then micro task)

65. PNPM NPM YARN

Learning links

66. Webpack vs Vite comparison and common WebPack apis (loader vs Plugins)

  • Webpack uses Polyfill to load modules
  • Vite uses ESM to load modules
  • Vite is faster, smaller and easier to configure
  • Loader loader

67. Vue3 vs VUe2, where is vue3 fast

  • The diff algorithm adds a static tag to compare only tagged DOM elements
  • The text DOM element enhancement can be used multiple times with only one render declaration, unlike vue2 which had to re-declare render each time
  • Events increase the cache
  • Now use proxy to retrieve attributes directly instead of definePrototery hijacked data attributes to know the corresponding attribute name
  • Used SSR update rendering to quickly update them as strings
Extended link

68. Caches are classified into strong caches and negotiated caches.

  • Strong caching does not require sending requests to the server
  • The negotiation cache needs to send a GET request 304

69. Principle of bidirectional binding

The implementation is then changed without binding value using the Model hook

Model hooks (props, Event)

70.MVVM

A link to the

Algorithmic questions (asked)

  • Reverse a linked list
  • Merge two ordered lists (extended to merge K ordered lists)

Interview Facts

  • Interview met a treasure elder brother is the interviewer, at that time quite nervous
  • The longest interview lasted more than 100min and my mouth was dry (admire myself for being able to talk a lot)
  • After entering the company to find help push partners look forward to face base

Interview Summary

The typical interview question is:

  • HTML (less involved, asked, not remembered) : such as semantic tags or non-semantic tags what
  • CSS (less involved) : For example, weight layout
  • Js: There’s a lot involved, data types, prototype chains, closures… Several of them
  • Framework: Involves multiple vue or React focuses on the design of a use and principle or some design ideas
  • Performance optimization: one question (if you have this advantage you can take the initiative to cite this)
  • The computer foundation is important, ask not necessarily much
  • Node. js, nginx, etc
  • Engineering ci/CD
  • Algorithms (essential for large factories)
  • .

Unless the big factory prepares js and framework and then has 1-2 other familiar or advantage no problem

The latter

The interview is a two-way choice, the overall preparation is very important, state is also very important, for example, at the beginning of the interviewer suppressed, if not adjusted back, then the subsequent interview may not go well. Jin Jiu Yin ten, I quit in the middle of September, in the middle of October, the interview for more than a month, also can be regarded as to give myself a satisfactory answer.

I am very satisfied with the new company, the entry standard with M1 MAC and some other hardware, the company’s technology and life atmosphere is very sufficient, all kinds of construction and technical documents I can not see over, daily activities are also many, some other benefits, can privately talk to help push, push success I also have a reward is (hee hee 😁😁).

My foundation is not enough, depth is not enough, so lead to few highlights, to strengthen…

This article has been in the draft box since the middle of October, but it has not been sent out. The topics of several companies in early October were not added, so it was used to go over them silently before the interview. There are many details in the interview, so I don’t need to mention them.

Wish all XDJMM job-hopping or job-hunting can find their ideal job!! XDJMM who don’t change jobs will get a raise and a promotion and marry bai Fumei/Gao Fushuai!

Feel free to leave a comment if you have anything to add or clarify.

Practice makes perfect! .