preface

Blog writing is mainly used to summarize, consolidate knowledge points, deepen their understanding of this knowledge point. I also hope to help those in need. If there is anything wrong. Point it out in the comments section. Your support. Is the source of my continuous progress.

In the job-hopping season, I believe many people are looking for new opportunities (actually, it’s just me). Here are some common interview questions that I think are more classic. At the same time also give again to look for a job of small partners a reference.

1. Vue lifecycle

Let’s start with a picture

This is the life cycle diagram in the official vUE document. I would like to combine this diagram to illustrate my understanding that the life cycle of VUE is divided into 8 phases.

1. In the beforeCreated phase, no data in props and data can be obtained because the data is not initialized. In the Created phase, data that cannot be accessed before can be accessed, but the component is not mounted, so el cannot be accessed.

2. BeforeMounted phase Starts to execute the render function, and el and data start to execute. In the Mounted stage, the virtual DOM is still mounted to the actual DOM. Now we can make the Ajax request.

3. BeforeUpdated and updated are invoked when data is updated, respectively

4. Destroy the component’s hook functions beforeDestroy and destroyed. The former is suitable for removing events, timers, and so on, which might otherwise cause memory leaks. The root component’s Destroyed hook function is executed only after the destroyed subcomponents, if any, are destroyed recursively.

2. What are macro tasks, micro tasks and the differences between them

Due to limited technical depth, I can only briefly explain my understanding of macro and micro tasks:

Js is single-threaded, so macro tasks will be executed first in the queue, but if there are micro tasks in the macro task, the micro task will be executed first before the next macro task. So let’s see here

3. Differences between Webpack and gulp

Gulp is defined as Task Runner, which is used to run one Task at a time

We can compile sass, less using gulp configuration task. Image compression, code compression, etc. But gulp does not solve the problem of JS modules. That’s where the Webpack comes in. Webpack can put CSS, JS. Images and so on are packaged into a bundle. So webpack is also called file Bundler

At the same time Webpack to solve require different files. With the introduction of one of the core loader, we can compile SASS into CSS through sass-loader. Babel-loader can convert ES6 etc. into browser-aware ES5 etc..

The core of Webpack is Entry, Output, loader and puglin.

4. What are the modes of front-end routing

There are hash and history. Hash mode is implemented primarily through hashchange and history mode is implemented primarily through pushState and popState methods.

5. The browser’s rendering process

1. Enter the URL

2. The browser performs DNS resolution on the entered URL

3. Establish a TCP connection (three-way handshake)

4. The browser initiates an HTTP request

5. The server responds to the HTTP request

6. Destroy TCP connections (wave four times)

7. The browser renders the page through the rendering engine.

The difference between for in and for of

Use of for in in arrays and objects

Var array=[1,2,3,4,5];for(let item inArray){console.log(item) // 0 1 2 3 4}'leo',
    age:26,
    job:'FED'
}
for(let item in obj){
    console.log(item) // name age job
}
Copy the code

The use of for in arrays and objects

Var array=[1,2,3,4,5];for(letItem of array){console.log(item) // 1 2 3 4 5}'leo',
    age:26,
    job:'FED'
}
for(let item of obj){
    console.log(item) //  Error obj is not iterable
}
Copy the code

For in is used to iterate over the keys or indexes of groups and objects. For of is used to iterate over value. Keys () is used with object.keys (). The following

var obj = {
    name: 'leo',
    age: 26,
    job: 'FED'
}
let objValue = Object.keys(obj);
for (let item of objValue) {
 console.log(obj[item])   // leo 26 FED
}
Copy the code

7. How do components communicate in applets

How components are created in applets is not explained here. Please visit the official documentation for a detailed tutorial

Let’s focus on how components in applets communicate

1. How does a page pass data to a custom component

// Pages use custom components <online userList="{{list}}"></online> // Component online.js Component({properties:{userList:{)type:Array,
          value:[],
         }
    }
})
Copy the code

This way, the custom component can get the list data of the page.

2. How does a custom component pass data to a page

Like VUE, data interaction between components is primarily through custom events.

To visualize the code, use the triggerEvent method to specify the event name, detail object, and event options:

<! -- In custom component online --> <button bindtap="onTap"</button> Component({properties:{}, methods:{)onTapConst myEventDetail = {name: const myEventDetail = {name: const myEventDetail = {name:'leo'// Bubbles is whether the event bubbles or not. // Composed is whether the event can cross component boundariesfalse// whether the capturePhase event has a capturePhase const myEventOption = {"composed": true
          } 
          this.triggerEvent('myEvent', myEventDetail, myEventOption) } } }) <! Listen for custom events in the page --> <onlinebind:myEvent="getData"></online> getData (eventDetail) {console.log(eventDetail) // detailCopy the code

3. How do sibling components communicate with each other

Communication between the same sibling components can be resolved through custom events. But there’s another, lighter way to do it in the applet. This can be solved by the relations property. There are the following components

<online>
    <chat></chat>
</online>
Copy the code

Two components capture an instance of each other’s component using the this.getRelationNodes() method. Now that you have an instance of the other component, you can access data on the other component and set data on the other component, but you cannot call methods on the other component.

<! --> Component({relations:{)'./chat': {
            type: 'child',
            linked:function(target){} // Target is an instance of the component online, linkChanged:function(target){}
            unlinked: function(target){}
        }
    },
    methods:{
        test () {
            var nodes = this.getRelationNodes('./chat') var component_b = nodes[0]; Console. log(Component_B.data.name) for component BsetData() method to set Component_B.setData ({name:'leo93'})}}) <! --> Component({relations:{'./online': {type:'parent'
        }
    },
    data:{
        name:'leo'}})Copy the code

Note: The relations definition must be included in both component definitions, otherwise it will not take effect.

This component could not get an instance of this component. Using this.getrelatonsNodes (‘./ path_to_self ‘) returns null

Type Can be parent, child, ancestor, or descendant

Here is an article that makes the communication of applets very clear

Exports and module. Exports,export and export default

Exports and module.exports belong to node modules

Export and Export Default belong to the ES6 module

Exports is a reference belonging to Module. exports

Export and export default can be used to export constants, functions, files, and modules

In a file or module, there can be more than export and import, but only one export default

If you export the file in export mode, add {} when importing the file. Export default does not need to import the file

Export can export variable expressions directly, export default cannot.

9. Difference between openId and unionId in wechat

They’re not the same length

openId=28;

unionId=29;
Copy the code

OpenId is unique within the same application for the same user

UnionId The same user is unique in multiple applications of the same wechat public platform.

List all the ways you know how to center a DIV element vertically and horizontally

You can read my article on this issue

11. What is a prototype, prototype chain

Whenever an object is defined in JS, it contains predefined properties, including Prototype. Prototype Prototype of the execution object. The advantage of using stereotype objects is that the real columns of all objects contain their properties and methods and the stereotype chain is mainly used to solve inheritance problems. Each object has a prototype object that is referred to by a proto pointer and inherits methods and properties from it. Peer prototype objects may also have prototypes, layer by layer, and eventually point to NULL. This relationship is called a prototype chain.

Continuously updated…

If there is any improper description, please correct. Thank you very much!