Shenzhen some company, scale 20 people control, still do not have front end at present, pen test questions are as follows.

1. What are the advantages and disadvantages of REM and VW layouts?

Through REM units, responsive layout can be realized, especially the introduction of the corresponding postCSS related plug-ins, eliminating the px to REM calculation in the design draft. Rem unit is also used in some foreign websites. The drawback of REM layout is that in responsive layout, js must be used to dynamically control the font size of the root element. That is, there is some coupling between CSS styles and JS code. The code that changes font size must precede the CSS style.

Vw does not need to introduce JS code to achieve a better effect than REM, and compared with the viewport, the shortcomings of VW can also be well displayed in widescreen: Vw works, but it’s a pain in the ass, because it loses the maximum width/height limit relative to the viewport, and you might see perfection on a widescreen, but not in portrait. You may need to add a maximum width/height limit to the element

2. What is the difference between Flex and Block layouts?

Traditional layout: based on the box model, relying on display, position, float properties;

Flex Layout: Flex stands for Flexible Box and is used to provide maximum flexibility to Box models.

3. What is the lifecycle of Vue? What does vUE do in each life cycle? What stage is DOM rendering?

The lifecycle of a Vue instance is the process from creation to destruction. The life cycle of a Vue is a series of processes from the beginning of creating, initializing data, compiling templates, mounting Dom, rendering, updating, rendering, and destroying.

There are 8 stages: before/after creation, before/after load, before/after update, and before/after destruction.

Beforecreate: You can add a loading event here, which is triggered when the instance is loaded

Created: This is where the initialization event is written. For example, this is where the loading event ends and asynchronous requests are called

Mounted: A DOM node is obtained after an element is mounted

Updated: If data is treated uniformly, write the corresponding function here

BeforeDestroy: Can make a confirmation box n to confirm stop events

ExtTick: Dom manipulation immediately after data update

DOM rendering is done in Mounted

4. How does VUE implement bidirectional data binding? Please write pseudocode or describe how it works.

Vue implements bidirectional data binding mainly by using data hijacking combined with publiser-subscriber mode, hijacking setter and getter of each attribute through Object.defineProperty (), publishing messages to subscribers when data changes, and triggering corresponding listening callback. When passing an ordinary Javascript Object to a Vue instance as its data option, Vue iterates through its properties, turning them into getters/setters with Object.defineProperty. Getters/setters are invisible to the user, but internally they let Vue track dependencies and notify changes when properties are accessed and modified.

5. How are parameters passed between VUE components?

1. Transfer values between parent components and child components.

1) The child component creates a property in props to receive the value passed by the parent component.

2) Register child components in parent components.

3) Add the properties created in the props subcomponent to the tag of the subcomponent.

4) Assign the value that needs to be passed to the child component to this property.

2. Transfer values between child components and parent components

1) The child component needs to fire a custom event in some way.

2) Pass the value as the second argument to $emit, which will be passed as an argument to the method that responds to the event.

3) Register the child component in the parent component and bind the custom event listener on the child component tag.

3. Value transfer between sibling components Creates a VUE instance as a “hub” that receives data via vm.on(), vm.on(), vm.on(), and vm.emit().

6. What is the difference between V-show and V-if in VUE?

A: V-if is true conditional rendering. Because it ensures that event listeners and subcomponents within the condition block are properly and appropriately destroyed and rebuilt during the switch; Also lazy: if the condition is false during the initial render, nothing is done — rendering conditions are not fast until the condition is true for the first time. V-show is much simpler — regardless of the initial conditions, elements are always rendered and simply switched based on the “display” property of CSS. Therefore, V-IF is suitable for scenarios where conditions are rarely changed at runtime and do not need to be switched frequently; V-show is suitable for scenarios that require very frequent switching of conditions.

7, Write the following Boolean statement (true or false)

1) = = 0 ‘0’ true

2) ‘= = undefined false

3) null = = undefined true

8. How does websocket maintain long connections

9. Design a data format for this

Const res = [{name:'a', moneny:0.01, time: 100000},{name:'b', moneny:0.01, time: 100000 }] function getData(res){ let timeArr = [...new Set(res.map(item=>getTime(item.time)))]; let data = []; for(let i = 0; i < timeArr.length; i++){ let a = {}; a['time'] = timeArr[i]; let info = res.filter(item=>getTime(item.time)===timeArr[i]); a['info'] = JSON.parse(JSON.stringify(info)); data.push(a); } return data; } function getTime(time){ let Time = new Date(time); let year = Time.getFullYear(); let month = Time.getMonth(); let date1 = Time.getDate(); Let newTime = new Date(year,month,date1,0,0,0); Return Number(newTime)} let res = [{name:'a', money:0.01, time:1606535884991}, {name:'a', money:0.01, Time :1607895884991}, {name:'a', money:0.01, time:1606534444991}, {name:'a', money:0.01, time:1606535880000}, {name:'a', money:0.01, time:1234242542552}, {name:'a', money:0.01, time:1606535884991}]; console.dir(getData(res));Copy the code