In view of the interview rate is relatively high difficult knowledge comb.

This article is more relevant to this year’s interviews than the previous article, which included 400 questions and detailed answers. The first one is more comprehensive and more basic. It is recommended to read the previous one first and then this one will be easier to understand.

Common usage of ES6

ES6 (ECMAScript 2015 and beyond) is a common interview question: “Do you usually use ES6? Name a few uses of ES6.

Three or four answers should be enough, but each one needs to be clear, and some interviewers will continue to ask questions.

If you have enough time, you are advised to check out Ruan yifeng’s introduction to ES6.

1.1 the let and const

  • Let is valid in block-level scope and does not contaminate global variables
  • Const cannot be changed once declared. Note that the memory address it points to cannot be changed, if it is an object or an array of properties or elements can be changed.
  • Temporary dead zones exist and cannot be variable promoted.
  • It can only be declared before use, and cannot be repeated

1.2 Character Templates

Used as string concatenation: Hello, ${name}

1.3 Deconstructive assignment of variables

  • Let [a, b, c] = [1, 2, 3]
  • Swap variables: [a,b] = [b,a]
  • Let {data, code} = res
  • Input module specification method:
const { SourceMapConsumer, SourceNode } = require("source-map");
Copy the code
  • Returns multiple values from a function: returns an array or an object

1.4 Extended operators

The spread operator (spread) is three points (…) .

  • Let arr2 = […arr1]
  • Merge arrays: […arr1,…arr2,…arr3]

1.5 Promise

  • A successful callresolve, failed callreject
  • .thenGet results,.catchCatch exceptions. Catching exceptions can also be passed.thenThe second argument to
  • .finallyWill be called regardless of success or failure
  • Multiple concurrent requests, withPromise.all()
    • onlyp1,p2,p3The state of theta becomesfulfilled.pWill becomefulfilledAt this time,p1,p2,p3To form an array of return values passed topThe callback function of.
    • As long asp1,p2,p3One of them wasrejected.pThe state of theta becomes thetarejectedAt this time, the first to berejectIs passed topThe callback function of.
let p = Promise.all([p1,p2,p3])
p.then(([res1, res2,res3]) => {};
Copy the code

Promise the sample:

New Promise(){if (/* succeed */){resolve(value); } else { reject(error); } }.then().catch().finally()Copy the code

1.6 async await

What is async function? In short, it is the syntactic sugar of Generator functions. Async improves Generator functions:

  • Built-in actuator, directly called. The Generator also needs to be callednext()To perform
  • Better semantics.async 和 await 比 * 和 yieldA better understanding
  • The return value is Promise

1.7 Arrow Function

This of the arrow function () => {} is bound when the function is defined, not during execution. Simply put, when a function is defined, this inherits the object from which the function was defined. This will not change once determined.

The this of an ordinary function refers to the object on which it was called.

Second, mobile TERMINAL H5 compatibility and adaptation

A common adaptation is the REM + Flex layout.

2.1 rem adaptation

Set the base font size in the app entry, the earlier the better. If the design dimension is 750, divide by 7.5. The specific value is calculated according to the actual situation.

Document. The documentElement. Style. FontSize = document. DocumentElement. ClientWidth / 7.5 + 'px';Copy the code

After setting the base font size, the SASS function encapsulates a method for easy use

@function px2rem($value){@return $value * 0.02rem}Copy the code

When using it, you can directly call the encapsulated function. Value is passed the value of PX, and the method will be automatically converted into REM.

width: px2rem(100)
Copy the code

2.2 Flex layout

Flex Layout tutorial: Syntax by Yifeng Ruan

Iii. Vue related issues

Generally speaking, small and medium-sized companies will ask more framework, the specific Vue or React depends on the technology stack used by the company. Because the technology stack of small and medium-sized companies is relatively unified, it is rare to use two or even three frameworks at the same time, and pay more attention to the ability to work, so the use of the framework will take up half of the interview time.

Big companies, on the other hand, focus less on the framework and more on the basics. Their logic is to see if you have the ability, and if you have the ability to use any framework quickly.

Since I am not familiar with React, I only prepared some questions for Vue. The following are some of the most common interview questions that you must understand.

There is an article on Vue summary of the more complete, here is also excerpted several answers. The full content of the latest Vue interview questions including source level answers, the interview series

3.1 Vue bidirectional binding principle

If asked about the framework, Vue will definitely ask this question. Just memorize the following passage.

Vue implements bidirectional data binding through the following four steps:

  • Implement a listener Observer that iterates over data objects, including properties of child property objects, adding setters and getters to all properties using Object.defineProperty(). So, if you assign a value to this object, it will trigger the setter, so you can listen for changes in the data.
  • Implement a parser Compile: parse Vue template instructions, replace variables in the template with data, and then initialize render page view, and bind the corresponding node of each instruction to update function, add subscribers to listen to the data, once the data changes, receive notification, call update function for data update.
  • Implement a subscriber Watcher: The Watcher subscriber acts as a bridge between the Observer and Compile. Its main task is to subscribe to the message of the change of attribute value in the Observer. When the message of the change of attribute value is received, the corresponding update function in the parser Compile is triggered.
  • Implement a subscriber Dep: The subscriber uses a published-subscribe design pattern to collect subscriber Watcher and manage listener Observer and subscriber Watcher uniformly.

Vue3 will replace Object.defineProperty() with a Proxy. What are the advantages of Proxy?

It is recommended to introduce proxy and tell several advantages.

3.2 Implementation principle of virtual Dom

The importance of this topic is second only to the principle of Vue bidirectional binding

The realization principle of virtual DOM mainly includes the following three parts:

  • JavaScript objects are used to simulate the real DOM tree and abstract the real DOM.
  • Diff algorithm — Compare the difference between two virtual DOM trees;
  • Pach algorithm – The difference between two virtual DOM objects is applied to a real DOM tree.

Advantages:

  • Lower performance: The framework’s virtual DOM needs to accommodate any operations that the upper-level API may produce, and some of its DOM operations must be implemented in a universal way, so its performance is not optimal; But performance is much better than rough DOM manipulation, so the framework’s virtual DOM can at least guarantee decent performance without having to manually optimize it.
  • No need to manually manipulate the DOM: We no longer need to manually manipulate the DOM, just need to write the code logic of the View-Model, the framework will help us update the View in a predictable way according to the virtual DOM and data two-way binding, greatly improving our development efficiency;
  • Cross-platform: The virtual DOM is essentially a JavaScript object, and the DOM is platform-dependent. In contrast, the virtual DOM can be more easily cross-platform, such as server rendering, WEEX development, and so on.

Disadvantages:

  • Extreme optimization cannot be carried out: Although reasonable optimization of virtual DOM + is sufficient to meet the performance requirements of most applications, targeted extreme optimization cannot be carried out in some applications with extremely high performance requirements.

3.3 Route Caching

Use

to cache routes.

It has include and exclude attributes to include or exclude certain routes, respectively. The value can be a string, array, or regular expression.

Unique lifecycle methods: Activited, deActivited

3.4 Route Hops: Difference between Name hops and PATH hops

Several ways to redirect a route

$router. Push ({name: 'user', params: {userId:) // String this.$router. Push ('home') // Named route this. UserId = this.$route.params.userId = this.$route.params.userId; UserId =123 this.$route. push({path: '/user', query: {userId: '123'}});Copy the code

The difference between name and PATH jumps is that

  • Params is used for name and Query is used for path.
  • The name parameter is not carried to the URL. The query parameter is carried to the URL.

3.5 Route Guard

Global front guard

Be sure to call next(); Otherwise the hook will not be resolved.

const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
  // ...
  next();
})
Copy the code

Global parsing guard

In 2.5.0+ you can register a global guard with router.beforeResolve. This is similar to router.beforeeach, except that the parse guard is called before the navigation is confirmed and after all the intra-component guards and asynchronous routing components are parsed.

Global post-hook

You can also register global post-hooks, however unlike guards, these hooks do not accept the next function nor change the navigation itself:

router.afterEach((to, from) => {
  // ...
})
Copy the code

Route exclusive guard

You can define beforeEnter guards directly on the routing configuration:

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})
Copy the code

These guards have the same method parameters as the global front-guard.

Guards within components

Finally, you can define the following route navigators directly within the routing component:

  • beforeRouteEnter
  • beforeRouteUpdate(new) 2.2
  • beforeRouteLeave

Notice that next() is called

const Foo = { template: `... ', beforeRouteEnter (to, from, next) {// Call the render component before the corresponding route is confirmed // no! Can!!!! }, beforeRouteUpdate (to, from, next) {// Called when the current route changes but the component is being reused. For example, For a path /foo/:id with dynamic parameters, the component instance will be reused as // renders the same foo component when jumping between /foo/1 and /foo/2. And the hook will be called in that case. // Call beforeRouteLeave (to, from, next) {// Call beforeRouteLeave (to, from, next) {Copy the code

This section is quite extensive, see the official vue-Router documentation for more details

3.6 The difference between Vue and React

Vue forms can use v-Model to support two-way binding, which is much easier to develop than React. Of course, V-Model is a syntax candy, essentially the same way React forms are written.

React requires the use of setState to change the state, and there are some pitfalls to using this API. In addition, the bottom layer of Vue uses dependency tracking, so page update rendering is already optimal, but React still requires users to manually optimize this aspect.

After React 16, some hook functions will be executed multiple times due to the introduction of Fiber, which will be covered in a later section.

React requires the use of JSX, which has an initial cost and requires a complete toolchain support. However, you can use JAVASCRIPT to control pages, which is much more flexible. Vue uses template syntax, which is less flexible than JSX, but it can be run in a browser by writing the Render function directly out of the toolchain.

In terms of ecology, there is not much difference between React and Vue. Of course, React has far more users than Vue.

In terms of start-up cost, Vue’s initial positioning was to reduce the threshold of front-end development as much as possible. However, React was more about changing users to accept its concepts and ideas, and the start-up cost was slightly higher than Vue.

3.7 Transferring Values between Components

Component transmission is divided into parent-child component transmission and non-parent-child component transmission

Pass values between parent and child components

  • Parent component passes value to child component, directly throughpropsThe value of
<custom content="hello world"></custom>
Copy the code
  • The child passes a value to the parent, passingemitSend the event
this.$emit('chooseType', type)
Copy the code

The parent component receives events:

<custom content="hello world" @chooseType="handleType"></custom>
Copy the code

Non-parent components pass values

Values are mainly passed through the event bus

Mount an empty Vue object on the root node

Vue.prototype.bus = new Vue();
Copy the code

The component that needs to send the event

this.bus.$emit("change", params)
Copy the code

The component that receives events

this.bus.$on("change", (msg) => {
    //do yourself work
})
Copy the code

In addition to these questions, there are also Vue life cycle, V-show and V-IF, vuEX, etc.

More Vue interview related:

Front-end learning -Vue built-in components Entry-level Vue interview questions + Detailed answers Medium difficulty Vue interview questions + detailed answers

Okay, so that’s it for today, and more in the next video.

The last

Entering big factory is not so difficult as imagined, the key is technology.

Opportunities are left to prepared people, understand the job requirements, early preparation, do enough preparation, you can take detdetments, online all kinds of surface by pen, learning courses.

The following share with you a “front-end development engineer essential information pack” I organized.

269 pages of the front-end factory interview treasure book

Front end test summary

JavaScript

performance

linux

jQurey

Applet correlation

Front-end data summary

Due to the lack of space, a complete version ofEssential data pack for front-end development engineers“Friends directlyClick here to get it for free, I wish you a smooth wind and smooth water god of wealth!

conclusion

No matter what you do, you should have your own ideas and thinking, so that you can do things well and do them deeper. Otherwise this is like a dream, wake up or very moved. Hope you readers, look at the above topic is not back the answer, but to understand it, and can be used, do similar things in the future, there is a reference train of thought. If I meet with the same interviewer, of course, the topic is not exactly the same, at this time need to play their own accumulation and flexible use.

Finally, if you have seen the universal situation and understood the universal phenomenon, then if everything is the same as others, won’t it finally become the universal level? If you want to break away from the current status quo and achieve a breakthrough, then the goal should be to become a person with personality, characteristics and distinction, to become a different front end, a different person.