I spent a week on this article, sleeping in the early hours of the morning every day, feeling my body was hollowed out. But finally finished writing vUE, among them, I think their understanding is better, directly write. But there are some things that danniu write very thoroughly, and I do not understand danniu thoroughly. So I gave the link below. We’ll make up the rest over time.

The beginning of the beginning. Please give me a thumbs up and encourage me to die on the keyboard. This is important **

Summary of the most complete front-end interview questions

One: CSS interview questions

1. The box model

The width of the standard model is the content  The width of IE model is Content +padding+border 

2. How to center a box horizontally and vertically?

floating

Absolute positioning

Flex layout

Table layout

Grid layout

See page layout

3. Determine the CSS priority

Great power, high priority

! Important > Inline Style > ID selector > Class selector/property selector > Tag selector > Wildcard (*)

See rookie, this is the basis

4. Explain float and how it works. How to clear float?

1. Basic principles of floating

Float —– mainly to allow some tags to be displayed side by side

A floating box can be moved left and right until its outer edge encounters an edge containing the box or another floating box. Float box does not belong to the normal flow of the document (the document flow), namely from the document flow, when an element is floating, will not only affect the block-level box layout will affect the arrangement of inline boxes (usually text), average flow of the document will behave like float box does not exist, when the float box height beyond the containing box, The contain box does not automatically extend to close the floating element.

2. How do I clear floats

  • End empty elements or pseudo-elements such as after or clear
  • The parent element also sets the float
  • The parent element sets Overflow to hidden or auto
  • Parent element display: table

5. Several ways to hide elements in CSS

  • display: none

This one is used more often, hiding elements directly, taking up no space and responding to no events.

  • visibility:hidden

The visibility property specifies whether an element is visible and triggers a redraw of the page, not a rearrangement

  • opacity: 0

Sets the opacity of the element. The default value is 1(opaque) and the minimum value is 0(fully transparent).

If you set the element to 0, it’s invisible, but it still takes up space, and remember, if you bind an event to it, it fires.

Redraw the page, not rearrange it

  • transfrom: scale(0)

Transfrom is a new element conversion in CSS3. Scale stands for scale, 1 for no scaling, and 0 for minimum scaling. Redraw the page, not rearrange it.

  • Width and height are set to 0

Set the width and height of the element to 0, and if it has child elements, set overflow to Hidden.

Setting width and height to 0 triggers page rearrangement and redrawing.

attribute performance
display:none Does not take up space, does not trigger events, triggers rearrangements and redraws
visibility:hidden Occupying space does not trigger events, only redraw
opacity: 0 Occupying space, triggers events, only triggers redraw
transfrom: scale(0) Occupying space does not trigger events, only redraw
Width and height are set to 0 Does not take up space, does not trigger events, triggers rearrangements and redraws

6. How to achieve communication between multiple tabs in the browser?

Method 1: Use localStorage

Use localStorage. SetItem (key, value); Add content

Use storage events to listen for add, modify, or delete actions

Method 2: Use cookie+setInterval HTML

7. Briefly describe the classification of CSS elements

Sorted by display element:

  • Inline elements(lnline-element) : The height of the element, the line height, the top and bottom margins are determined by the image or text contained in the element and cannot be changed; The width is determined by the width of the content text or image, and the left and right margins can be set manually.A) span B) strong
  • Block-level elementsBlock-element: always occupies a row, the height of the element, and the margin between the top and bottom can be set manually; The width of the container is 100% by default and can be set manually.Div, P, h1... H6, OL, UL, DL, table, Address, blockQuote, form
  • Empty elementsVoid -element: an HTML element with no content, for example:Br, meta, HR, link, input, img

Elements are classified by whether or not they are replaceable:

  • Replace elements: The browser determines what to display based on the elements and attributes of the tag.

    For example: , this is a text input field, when the browser display is different

(X) THE img, input, Textarea, SELECT, and object elements in HTML are all replacement elements that have no actual content.

  • Non-replaceable elements: (X) Most elements of HTML are non-replaceable elements that tell the content directly to the browser for display. For example, the

    wanmei.com

    browser will display the content directly.

  • Note: Inline substitutable elements have the same attributes as inline block elements. Vertical orientation also works. Almost all substitutable elements are inline elements, such as , , and so on

8. Link@import Imports the CSS

Link introduction form:

<link href="styles.css" type="text/css" />
1
Copy the code

@import reference form:

<style type="text/css">@import url("styles.css"); </style>Copy the code

The difference:

  • Different scope of application

@import can be used in web pages or CSS files to import multiple CSS files into a single CSS file. Link can only introduce CSS files into web pages.

  • Different functional range

Link is an XHTML tag, while @import is a method provided by CSS. In addition to loading CSS, the link tag can also define rel connection attributes, RSS, etc., while @import can only load CSS.

  • Different loading sequence

When the page is loaded, the CSS referenced by link is loaded at the same time, while the CSS referenced by @import is not loaded until the page has been downloaded. So sometimes browsing @import pages loaded with CSS will start with no style (that is, flashing).

  • compatibility

As @import is proposed in css2.1, it is not supported by older browsers. @import can only be recognized in IE5 or higher, but the link tag does not have this problem.

  • Differences in control styles

Link allows users to switch CSS styles. Modern browsers such as Firefox,Opera, and Safari support rel= “alternate Stylesheet” properties, and you can also use Javascript to make Internet Explorer allow users to change styles.

  • Differences when using DOM to control styles

When you use JavaScript to control the DOM to change styles, you can only use the link tag because @import is not DOM controlled

9. Draw triangles

/* Isosceles triangle (arrow up); */ #div1{ width: 0; height: 0; border-bottom: 100px solid cyan; border-left: 50px solid transparent; border-right: 50px solid transparent; }Copy the code

Well, what do you call this thing? I don’t even know how to explain it, width and height is zero, oops, I don’t know. So let’s look at the code. Cyan, turquoise. Transparent means transparent.

What is Block Formatting Context (BFC)? Application?

Block level formatting context. It refers to a separate block-level rendering area, with only block-level boxes participating, that has a set of rendering rules to constrain the layout of block-level boxes, independent of the outside of the area.

Let’s start with a phenomenon

A box that does not set height cannot prop itself up when the content child elements float. So we can say that this box doesn’t form a BFC

See BFC understanding and Application (CSS)

Two: JavaScript basic interview questions

1. What is the difference between stack and heap?

Heap and stack

The stack will automatically allocate memory space, will automatically release. The memory allocated dynamically by the heap is of an arbitrary size and is not automatically released.

Base and reference types

Basic type: A simple data segment, stored in stack memory, occupying a fixed amount of space.

Reference types: Objects that may consist of multiple values and are stored in heap memory. Variables containing reference types actually hold more than the variable itself. Twenty Pointers to the object.

Basic data types include Undefined, String, Boolean, Null, Number

Value and address passing

Copying a value of a reference type from one variable to another is actually copying a pointer, so both variables end up pointing to the same object. That is, addresses in the stack are copied, not objects in the heap.

Copying a value of a primitive type from one variable to another creates a copy of that value.

2. How many ways can Javascript implement inheritance?

1. Prototype chain inheritance

Basic idea: Use stereotypes to make one reference type inherit the properties and methods of another.

The relationship between constructors, stereotypes, and instances: Each constructor has a stereotype object, which contains a pointer to the constructor, and each instance contains an internal pointer to the stereotype object.

Constructor inheritance

Basic idea: The superclass constructor is called inside the subtype constructor, and the constructor can be executed on the newly created object by using the call() and apply() methods.

3. Combinatorial inheritance

Basic idea: an inheritance pattern that combines a chain of archetypes with the techniques of borrowing constructors, thereby exploiting the best of both.

4. Original type inheritance

Basic idea: Prototypes allow you to create new objects based on existing objects, and you don’t have to create custom types as a result.

Parasitic inheritance

The basic idea: Create a function that just encapsulates the inheritance process, enhances the object internally in some way, and then returns the object as if it really did all the work

Parasitic combinatorial inheritance

Basic idea: inherit properties by borrowing functions and inherit methods by mixing forms of prototype chains

How does JavaScript implement inheritance in six ways

3. How many ways can Javascript create objects?

The 1-new operator + Object creates an Object

2- Creates objects literally

The factory pattern was developed to solve the problem of creating a lot of duplicate code when using the same interface to create multiple objects.

3- Factory mode

The factory pattern solves the problem of repeatedly instantiating multiple objects, but it does not solve the problem of Object recognition. (However, the factory pattern does not recognize the type of objects because they are all Objects, unlike Date, Array, etc., the factory pattern gets all O objects, which are of type Object, hence the constructor pattern.)

4- Constructor pattern

  • The comparison factory model has the following differences:

    1. No object is explicitly created

    2. Assign attributes and methods directly to this

    3. No return statement

  • Call the constructor step with this method:

    Create a new object

    2. Assign the scope of the constructor to the new object.

    3. Execute constructor code (add attributes for this new object)

    4, Return new object (pointer to variable person??)

As you can see, the constructor knows where it comes from (as you can see from instanceof that it is both an instanceof Object and a Person)

Constructors also have their drawbacks. Each instance contains a different instance of Function. (Methods inside constructors do the same thing, but when instantiated, produce different objects, methods are functions and functions are objects.)

5- Prototype mode

The benefit of the stereotype pattern is that all object instances share its properties and methods (called common properties), and you can also set the instance’s own properties (methods) (called private properties) as shown in line 16 and 17 of the code, overwriting properties (methods) of the same name on the prototype object.

6- Hybrid mode (constructor mode + prototype mode)

The constructor pattern is used to define instance properties and the stereotype pattern is used to define method and shared properties

See 6 ways to create objects in JS

4.Javascript scope chain domain

This problem is not easy, I checked the data, combined with their own written, try to describe it

scope

Scope is the accessible range of variables and functions. In JavaScript, variables are scoped globally and locally.

Global scope

Objects that can be accessed anywhere in the code have global scope. In general, objects in the following cases are in global scope:

  • Outermost functions and variables defined outside the outermost function have global scope
Function fn3(){var a = 2 return fn3} var a = 2 return fn3} function fn2(){ console.log(a) } var fn = fn1() fn()Copy the code
  • All variables that do not define a direct assignment are automatically declared to have a global scope
Function bar() {fn1 = "undefined "; Var fn2 =" inner variable "; } bar(); // The function console.log(fn1) is executed; // The direct copy variable console.lof(fn2) is not defined; //fn2 is not definedCopy the code
  • All properties of window objects have global scope

The built-in properties of window objects have global scopes, such as window.name, window.location, window.top, and so on. A local scope is also called a Function scope. All variables and functions can only be used within the scope. Both var a = 4 and fn2 have local scopes.

The scope chain

A scoped chain works like a prototype chain: if the variable is not in its scope, it will look for the parent all the way to the top. The execution process is as follows:

  • The scope of any execution context moment is implemented by the scope chain (described below).

  • When a function is defined, the scope chain at which it is defined is linked to the function object’s [[scope]] property.

  • When a function object is called, an active object (that is, an object) is created, and for each function parameter, The active object is named as the named attribute of the active object, and the active object is used as the front end of the scope chain, and the function object’s [[scope]] is added to the scope chain.

Let’s look at an example

var a = 1 function fn1(){ function fn2(){ console.log(a) } function fn3(){ var a = 4 fn2() } var a = 2 return fn3 } var Fn = fn1() fn() // Output how muchCopy the code

The scope is as follows:

The output value is “2” based on the scope overlay,

  1. First, find the value of fn, fn = fn1(), is the value of fn1

  2. Function fn2() = console.log(a);

  3. Function fn3() has function fn2(), and the next step up fn() goes down to declare a to be 2, and outputs 2

5. What is a closure and why do you use it?

A closure is a function that has the right to access variables in the scope of another function. The most common way to create a closure is to create another function within a function and access local variables of this function through another function. Closures can be used to break through the scope domain and pass variables and methods inside the function to the outside.

Closure features:

1. Nested functions within functions 2. Inner functions can reference outer parameters and variables 3. Parameters and variables are not collected by the garbage collection mechanism

6. “use strict” in javascript code; What does that mean? What’s the difference in using it?

Use Strict is a (strict) runtime mode added to ECMAscript 5 that makes Javascript run under stricter conditions and makes JS encoding more formal.

  • Eliminate some unreasonable and inaccurate Javascript syntax, reduce some weird behavior;
  • Eliminate some unsafe code operation, to ensure the safety of code operation;
  • Improve the efficiency of the compiler, increase the running speed;
  • Set the stage for future versions of Javascript.

The difference between:

1. Do not use the with statement.

2. Disable this keyword from pointing to global objects.

3. The object cannot have attributes with the same name.

7. Deep and shallow copies

Shallow copy: Creates a new object with an exact copy of the original object’s property values. If the property is of a primitive type, the value of the primitive type is copied. If the property is a reference type, the memory address is copied, and if one object changes the address, the other object will be affected

Deep copy: Copy an object completely out of memory and put it into a new area of memory. Modification of the new object does not affect the original object

See deep copy and shallow copy

8. What are the ways of JS lazy loading?

1. The defer attribute

– 2. Async attributes

Async, like defer, does not block other resource downloads, so it does not affect page loading.

Disadvantages: can’t control the loading order

– 3. Create a DOM dynamically

– 4. Use jQuery’s getScript() method

5. UsesetTimeoutDelay method

– 6. Let JS load last

To speed up the page load, place the file imported from outside js at the bottom of the page so that JS is imported last

How to load JS lazily?

9. What are cross-domain problems and how to solve them?

1. Cross-domain Resource Sharing (CORS)

2. Cross domains through JSONP

3. Cross subdomains by modifying document.domain

4. Use window.name to cross domains

5. Use HTML5’s window.postmessage method to cross domains

6. Cross-domain communication through WebSocket

7. Image ping (one-way)

8. Use fragment identifiers to cross domains

Refer to the summary of cross-domain problems and solutions in JS

10. How to do modular development?

This modular, to tell the truth, I did not understand too deep, so find a few good reviews for everyone to learn together.

JAVAScript: Front-end modular development

JS front-end modular principle and implementation method details

11. DOM manipulation

The question puzzled me and I had no idea what it was asking. I checked a lot of articles, tried to write some.

My first guess is DOM events

Mouse events

  • Onclick event – when the user clicks

  • Onload event – the user enters

  • Onunload Event — User exits

  • Onmouseover event – mouseover

  • Onmouseout event – Mouse out

  • Onmousedown event – Mouse down

  • Onmouseup event – Mouse up

Keyboard events

Onkeyup, onkeydown, onkeypress…

Form events

Onsubmit, onblur, onfoucs, onchange..

Page events

Onload, onunload, onReload…

Second guess acquisition?

  • Get (getElementById) by ID
  • Through the name attribute (getElementsByName)
  • By tag name (getElementsByTagName)
  • By class name (getElementsByClassName)
  • Get an element from a selector
  • Get a list of elements from a selector (querySelectorAll)
  • How to get HTML (document.documentElement)
  • Document.documentelement is used specifically to get the HTML tag
  • How to get body (document.body)
  • Document. body is specifically used to get the body tag.
Traditional event binding methods
Window.onload =function(){alert(" page loaded "); } document.getelementById (" BTN ").onclick=function(){alert(" button clicked "); } document.onmousemove=function(){console.log(" mouse is moving "); }Copy the code
Event listeners
document.getElementById("myBtn").addEventListener("click", displayDate);
Copy the code

I don’t really know what I’m asking DOM, so THAT’s it.

12. What is Cookie isolation?

Or: Request resources without cookies

If static files are placed under the master domain name, data with cookies will be submitted to the server when static files are requested, which wastes traffic. Therefore, it is better to separate them. Cookie is limited by domain, so requests cannot be submitted across domains. Therefore, when a non-primary domain name is used, cookie data will not be contained in the request header, which can reduce the size of the request header and the request time, so as to reduce the overall request delay. In addition, this method does not transmit cookies to the Web Server, reduces the processing and analysis of cookies by the Web Server, and improves the speed of HTTP request parsing by the Webserver.Copy the code

What is Cookie isolation?

13. Respond to events

1. Button trigger

This kind of event response is very common, and it’s something we’ve been exposed to since the beginning. The core of this class of methods is to add the onclick+ function name to the button tag to trigger the function implementation.

2. The mouse or Enter is triggered.

The disadvantages of the first method are obvious. For example, if I want to process a batch of data and have a lot of input boxes, do I have to add a confirm button after each box? This is very unreasonable to the user’s input, so when filling in forms or multiple input boxes, the effect of using the mouse or enter button to trigger will be much more efficient.

The core is: in the input box with onchange call function, after filling in the mouse click anywhere or press Enter function will be called, according to different processing effect.

3. Trigger at any time

This usage is still better, life examples can try the online conversion of the web page, that is, you do not need to press enter and you do not need to press enter, you can enter it at any time at any time conversion. Even the calculator on the phone calculates the input in real time. At the heart of the usage method is the oneKeyUp+ method name. In addition to this there are keywords onkeypress, oneKeyDown and so on. I personally think oneKeyUp is more practical.

14. How do Flash and JS interact through what classes?

Flash provides the ExternalInterface interface to communicate with JavaScript. ExternalInterface has two methods: Call and addCallback. Call is used to get Flash to call js methods, and addCallback is used to register Flash functions for JS to call.

Flash has stopped, so maybe this one is getting cold

JS garbage collection mechanism

1. Memory reclamation in JS

In JS, the garbage collector periodically finds data that is no longer used and frees up the memory space it occupies.

In the case of global and local variables, local variables in a function are no longer needed at the end of the function execution, so the garbage collector recognizes and releases them. With global variables, the garbage collector has a hard time determining when they are not needed, so use them sparingly.

2. Two modes of garbage collection

1. Reference count

The principle of reference counting is simply to see if a piece of data has any references to it. If there are no references to it, the garbage collector will collect it, for example

Var o = {name: 'the wind is the wind ', handsome: true}; // name is null, but o still has a reference to the name attribute. Name = null; var s = o; O = null; o = null; o = null; // The variable s is no longer referenced, and the object is soon released by the garbage collector.Copy the code

A big problem with reference counting is circular references between objects, such as objects o1 and O2 in the following code, which cannot be freed by reference counting even after the function has finished executing.

function f() { var o1 = {}; var o2 = {}; o1.a = o2; // o1 references o2 o2.a = o1; // o2 references o1 return; }; f();Copy the code

Mark clear

The concept of mark clearing is easy to understand, starting from the root to see if an object can be achieved, if it can be achieved, the object is still needed, if not, then release it, this process is roughly divided into three steps:

A. The garbage collector creates a list of roots. Roots are usually global variables that retain references in code. In JS, we generally consider the global object Window as root, which is called root.

B. Check all roots from the root. All children will also be recursively checked, and those who can reach from root will be marked as active.

C. Data not marked as active is determined to be no longer needed and the garbage collector begins to release it.

When an object has zero references, we cannot reach it from the root; On the other hand, things that cannot be reached from the root are not necessarily strictly zero references, such as circular references, so mark clearing is better than reference counting.

Since 2012, all modern browsers have used the tag sweep garbage collection algorithm, except older versions of Internet Explorer 6.

Three: Vue framework interview questions

1. Understanding of MVVM

MVVM is divided into Model, View and ViewModel.

  • Model: Represents the data Model, in which data and business logic are defined;
  • View: represents the UI View, responsible for the display of data;
  • ViewModel: Is the Model corresponding to the view. Because the database structure is often not directly corresponding to the interface control one to one, so you need to define a data object specifically corresponding to the view control. The ViewModel’s job is to encapsulate the Model object as an interface data object that can display and accept input.

Simply put, ViewModel is the connector of View and Model, View and Model through ViewModel bidirectional binding.

Vue bidirectional binding principle and implementation

2.Vue lifecycle

Vue each component is independent, and each component has a life cycle that belongs to it, from a componentCreate, initialize, mount, update, destroyThis is the so-called life cycle of a component.

3. Parameter transfer between Vue components

1. Transfer values between parent components and child components

  • 1. Parent component –> Child component: The parent component passes values to the child component using the Props property
  • 2. Child component –> Parent component: Child component passes value to parent component using Emit event.
2. Data transfer between non-parent and child components (value transfer between sibling components)
  • 1. EventBus (the main practical approach is to introduce a new vUE instance in each of the sibling components to communicate with each other, and then implement communication and parameter passing by calling the event trigger and listener of this instance respectively.) \
  • 2. Vuex can be used to manage complex components that need to transfer a lot of data.
Parameter synchronization problem

What if the parameters passed between the parent and child need to be bidirectionally bound in real time?

If you change the value in props, the content in the parent component does not change. Vue does not recommend modifying the props value directly in child components.

If you need to modify the values in props, you can create a copy of Data or computed in the child component

Use the @input event for bi-directional binding

Sub-component code:

1. Declare props in the child component, which is passed by the parent component.

2. Create a copy of props

3, use the value of the props copy bound to the V-model

4. Listen for @input of the control, modify the parameter value when the value changes, and bounce the value back to the parent component

4.Vue realizes the principle of two-way data binding

Vue. js uses data hijacking combined with publiser-subscriber mode. It hijacks the setter and getter of each attribute through Object.defineProperty(), releases messages to subscribers when data changes, and triggers corresponding listening callback.

5.Vue routing implementation: Hash mode and history mode

The difference between:

Hash mode URL with hash sign, history mode without hash sign

Hash mode:

In the browser, the symbol “#”, # and the characters after # are called hashes, which are read with window.location.hash;

Features:

Hash mode: The hash is present in the URL but not included in the HTTP request. Hash is used to instruct browser actions. It is useless for server security and does not reload pages.

In hash mode, only the content before the hash symbol is included in the request, such as www.xxx.com. Therefore, the back end will not return a 404 error even if the route is not fully covered.

The history mode:

History uses new HTML5 features; Two new methods are provided: pushState (), replaceState () to modify the browser history stack, and popState events to listen for state changes.

In history mode, the URL of the front end must be the same as the URL of the back end, for example, www.xxx.com/items/id. The back end will return a 404 error if there is no routing for /items/ ID. Vue-router’s official website states: “However, this mode needs to be configured in the background to play well… So, you add a candidate resource on the server that covers all cases: if the URL doesn’t match any static resource, it should return the same index.html page that your app depends on.”

6. Vue-router hook function

Vue-router is a routing system of the VUE. It is used to locate resources and switch page contents without refreshing the page. Similar to the A tag, in fact, on the page display is also the A tag, is the anchor point.

Global guard

1. BeforeEach (function (to, from, next) {} : Triggered when a route jumps to another route (not yet arrived)

2. AfterEach (function (to, from) {} : Triggered after a route has jumped to another route

3. Parameters:

Where are you going

Where are you from

Next what are you going to do next

  1. Next parameter details

Next (function) must call this method to resolve the hook function. The execution depends on the call parameters of the next method

Next () do nothing and continue until the route is called

Next (false) Interrupts current navigation there is no jump and no response

The next(“/”) argument is the path to the path

Next (error) If the next argument is an error instance, the navigation terminates the error, which is passed to the callback registered with router.onerror ()

7. What’s the difference between V-if and V-show?

v-if:

  • When an element is hidden, it is removed from the DOM node
  • V-if keeps destroying and creating
  • V-if is more suitable for operations with permissions and determines permission data during rendering;

v-show

  • When an element is hidden, the ELEMENT’s CSS property is set to display: None in the DOM node, and the element remains in the DOM node
  • V-show is compiled only once
  • V-show is more suitable for everyday use and can reduce rendering of data and unnecessary operations.

8. Understanding that Vue is a set of progressive frameworks

The solution is divided into two parts

What are the two cores of vue.js

1. Data-driven, also known as two-way data binding.

In terms of technical implementation, Vue. Js data observation principle uses ES5Object.defineProperty and storage attributes: getter and setter (so only compatible with IE9 and above), which can be called the observation mechanism based on dependency collection. The core is the VM, or ViewModel, which ensures consistency between data and views.

2. Component system.

Core options for the.vue component:

Template: A template declares a mapping between the data and the DOM that is ultimately presented to the user. Initial data: the initial data state of a component. For reusable components, this is usually a private state. 3. Accepted external parameters (props) : Parameters are used to transfer and share data between components. 4. Methods: Changes to data are generally performed in the component’s methods. Lifecycle hooks: A component fires multiple lifecycle hook functions. The latest version 2.0 has significantly changed the names of lifecycle hooks. 6. Private Resources (assets) : In vue. js, user-defined instructions, filters, components, etc., are collectively referred to as resources. A component can declare its own private resources. A private resource can be invoked only by this component and its children. And so on.

Question 2: Understanding that Vue is an incremental framework for building user interfaces

Incremental means not doing more than you’re supposed to.

Vue.js provides only the most core component systems and two-way data binding in the VUe-CLI ecosystem.

Vuex and Vue-Router are among the libraries developed around vue.js.

For example, to use Angular, you must accept the following:

  • You must use its module mechanism
  • Must use its dependency injection –
  • A component must be defined in its special form (this is something every view framework has and cannot avoid)

So Angular is highly exclusive, and if your application is not starting from scratch, but is constantly figuring out whether to integrate with something else, these propositions can be confusing.

Vue differs from React and Angular in that it is incremental:

  • You can implement a component or two on top of a larger system as jQuery;
  • You can also use it for whole family development, when Angular uses it;
  • You can also use its view with an entire lower layer of your own design.
  • Where you can use OO and design patterns in the underlying data logic,
  • It can be functional, it can be either way, it’s just a lightweight view, it just does the core stuff.

9. What are the ways of communication between Vue components?

1. Parent and child components

props

emit/emit/emit/on

parent/parent /parent/children

ref

attrs/attrs / attrs/listeners

2. Sibling components

$parent eventbus vuex

3. Cross-hierarchy relationships

provide/inject

$root

eventbus

vuex

10. The vUE subcomponent calls the parent component’s method

The first is a method that calls the parent component through this.$parent

$emit() ¶ This.$emit() is used to emit a custom event on the sub tag of the parent component

Third, the parent component defines a custom attribute, and passes the method to the child component. The child component receives the attribute through props, and then invokes it

If you want to save trouble, use the first method

The second method is the most widely used and the data flow is relatively clear. And the father and son components by value of enclosing the observer. The observer. The observer. Emit () this. The observer. The observer. The observer. On () USES similar (enclosing emit () can pass multiple values, This.emit () can emit multiple values, this.emit() can emit multiple values, this.observer.$emit() can emit only one value)

The third method is to define a custom property, which is usually used to pass properties, but is not used to pass methods, which is not easy to understand (custom events are usually used to pass functions, custom properties are usually used to pass properties).

11. How to define a vue-router dynamic route? How do I get the passed value?

What is dynamic routing?

Application scenario: For example, the page structure is the same but the product ID is different when writing the product details page. Therefore, dynamic routing can be used.

You can set multiple “path parameters” in a route, and the corresponding values are set to $route.params. Such as:

Look not to understand? A little confused? It doesn’t matter. Let’s give it a try. The proof is in the pudding.

  • First let’s try out the implementation of the first schema in the table above. Let’s create a new folder called View and create test.vue under that folder

test.vue

  • toRouter folder 》Index. Js fileOpen and enter

③ Enter the test.vue component and press:

$route.params.testId to retrieve the parameters of the current route

Localhost :8080/#/test/

So this is the first pattern of dynamic routing. 3. Vue-router: What is a dynamic route

12. Please introduce your understanding of VUe-Router.

With the business functions of front-end applications becoming more and more complex and users’ requirements for user experience becoming higher and higher, single page application (SPA) has become the mainstream form of front-end applications. One of the most notable features of large single-page applications is the use of a front-end routing system that updates the page view by changing the URL without re-requesting the page.

“Updating the view without rerequesting the page” is one of the core principles of front-end routing. At present, there are two main ways to realize this function in the browser environment:

  • Use the hash (” # “) in the URL
  • Take advantage of the History Interface new method in HTML5

Vue-router is a routing plug-in of vue. js framework. Below, we start from its source code and look at the code while looking at the principle. From shallow to deep, we observe how vue-Router realizes front-end routing through these two ways.

See vue-Router for two implementations of front-end routing

13. What kind of guards does vue-router have?

1. Global guard: router.beforeeach

Router. BeforeResolve

3, global afterhook: router.aftereach

4. Exclusive guard for routing: beforeEnter

5. Guard inside component: beforeRouteEnter, beforeRouteUpdate (2.2 new), beforeRouteLeave

Navigation indicates that the route is being changed. Vue-router provides a navigation guard to guard the navigation by jumping or canceling the route. There are several opportunities for embedding route navigation: global, single route proprietary, or component level.

Note: Changes to parameters or queries do not trigger entry/exit navigational guards. You can respond to these changes by observing the $Route object, or by using the beforeRouteUpdate component internal guard.

14. What are the attributes of vuex?

1. State: The basic data of VUEX, used to store variables (the last four attributes are used to manipulate variables stored in state).

2. Getters: filters variables in state.

The method used to submit updated data must be synchronous (action is used if asynchronous is required).

Action: and mutation have similar functions, except that:

4-1.Action commits mutation, not direct change status. That is, the action is used to modify and commit mutation by changing state

4-2.Action can contain any asynchronous operation. (Generally complex data is operated in action)

4-3. The action will perform the asynchronous operation first and then call mutation, followed by the new state

5. Modules: When the project is particularly complex, each module can have its own state, mutation, action and getters, which makes the structure very clear and easy to manage.

Dispatch is different from Commit

Dispatch: used with action, containing asynchronous operations, such as submitting data to the background. This.$store.dispatch(‘mutation method name ‘, fetch value)

This. codestore.mit (‘mutation method name ‘, obtain value)

Refer to the five attributes of VueX

15. What is the State feature of VUex?

  • State provides the only common data source, and all shared data is stored in the state property in the Store

  • If I want to use only one data in state directly through $store.state. XXX if I want to use a lot of data in a component, map all properties to computed properties at once through mapState

16. Vue-cli How to add custom commands?

1. Create local directives

Var app = new Vue({el: '#app', data: {}, // Create directive (multiple) directives: {// Dir1: {inserted(el) {// The first argument in the instruction is the DOM console.log(el) that is currently being used for the instruction; console.log(arguments); El.style. width = '200px'; el.style.height = '200px'; el.style.background = '#000'; }}}})Copy the code

2. Global instructions

Vue.directive('dir2', { inserted(el) { console.log(el); }})Copy the code

3. Use of instructions

<div id="app">
<div v-dir1></div>
<div v-dir2></div>
</div>
Copy the code

17. Single-page applications such as Vue and their advantages and disadvantages

A single page application (SPA), in layman’s terms, is an application with only one home page. The browser starts by loading all the necessary HTML, JS, and CSS. All page content is contained in this so-called home page.

Multiple pages (MPA) refers to multiple pages in an application. When switching to a page, the whole page is refreshed.

Advantages and disadvantages of single pages:

Advantages:

  • User experience is good, fast, content changes do not need to reload the entire page, less pressure on the server.

  • The front and back ends are separated, as in the VUE project

  • Complete front-end componentization, front-end development is no longer based on the page as a unit, more use of componentization idea, code structure and organization more standardized, easy to modify and adjust;

Disadvantages:

  • Loading a page for the first time requires a lot of static resources, which can take a long time.

  • Not conducive to SEO optimization, single page page, data rendering in the front end, which means no SEO.

  • Page navigation is not available, if you must navigate, you need to implement their own forward and backward. (Since it is a single page and cannot use the browser’s forward and backward functions, you need to build your own stack management)

Four: browser interview questions

1. Communicate across tabs

2. Browser architecture

3. Event Loop in browser

4. The process from entering url to presentation

5. Redraw and reflow

6. Storage

7.Web Worker

V8 garbage collection mechanism

9. Memory leaks

Five: Server and network

1. The HTTP/HTTPS protocol

2. Common status codes

3.get/ post

4.Websocket

5.TCP three-way handshake

6.TCP wave four times

7.Node Event Loop: 6 stages

8. Cross domain

9. The security

Six: Webpack related

1. Principle brief

2.Loader

3.Plugin

4. Compilation optimization

Seven: algorithm

1. Five algorithms

2. Basic sorting algorithm

Advanced sorting algorithm

4. Recursive application (Fibonacci sequence) : stair climbing problem

5. Data tree

6. Scale for defective items

Eight: Advanced knowledge

The React framework

1.Fiber

2. Life cycle

3.setState

4.HOC(High-level component)

5.Redux

6.React Hooks

7.SSR server rendering

8. Functional programming

Things to know during an interview:

One: STAR rule

Describe your work or personal experience both in your resume and during the interview. Good interviewers use the STAR rule to establish personal events that allow interviewers to better judge your abilities and potential based on your past experience.

Four elements of STAR rule:

-Blair: What kind of Situation is it?

-Blair: What was the Task at the time?

Action: What Action did I take

Result: what kind of Result was achieved.

Often most students at the beginning of the direct introduction of what to do and the realization of the process, is relatively clear, the content is quite technical content. But a lot of students tend to miss the Situation and the Result part which is the background and the Result. Or panic when the interviewer asks for more details. These reasons are often due to their own experience before the interview will not be clear about the context and summary is not comprehensive and in-depth.

For example, some students mentioned that a Webpack plug-in XXX was implemented in the XXX project. The function of this plug-in is XXXX and it is open source on Github. The whole implementation process and ideas were clear, and the interviewer listened with great interest. He even remembered working late at night on the Webpack plug-in when he was young.

However, the interviewer will also want to know the background of the project, what led you to do Webpack instead of some other tool, and what value the plug-in added to the project (build performance or something else?). . Background and results are very important to the interviewer, and you have to present enough reason and value to convince the interviewer, otherwise you put enough effort into the project will not end up in the evaluation of your interview, which is a shame.

At this time, some students will also think: my project is just a personal/school training project, and I have no idea that the project results are very eye-catching. Say what you learned in the project, as in the Webpack example:

Compiler and Compilation and the difference between them;

How Webpack implements the relationship between plug-ins and ensures their order;

The next step in plug-in development depends on whether the current configuration uses another plug-in, how to determine which plug-ins Webpack is currently using;

In the process of developing plug-ins, I used the ideas of other plug-ins, and my understanding of the source code of this plug-in;

And so on and so on.

Most of the above will be encountered during the actual development of the Webpack plug-in, and these problems can also be as a Result if you have records and summaries.

Two: interview scenario questions

For example, to see if a candidate is smart, the STAR rule asks:

1. In your previous project, you mentioned that the company was short of staff due to the rapid development of business. How did you deal with it?

2. What problems did you solve in your project

3. How do you log in to your project

4. How to optimize the front-end project and the mobile terminal?

5. What do I do if the image fails to load

6. If you were asked to lead a small team on a project, what would you do?

7. Project homology processing and cross-domain correlation

8. If you were to do this project again, in what areas would you improve?

If the interviewer asks you to describe a project you were proud of, always follow the STAR rule. For example, in order to integrate XXX business (S), I assumed the role of XXX and was specifically responsible for XXX (T). Do XXX thing (A), finally produce XXX result

Then do the same when describing the highlights of the project, for example

Due to the reason of project XXX (S), I need to improve XXX (T), and then conduct XXX processing (A). Finally, THE XXX result is produced, and the data comparison is XXX.

Overall, it will appear that you are thoughtful, and have action, can create value for the enterprise, which is also one of the most critical indicators for the interviewer to assess candidates.

Three: Summarize the interviewer’s routine

There are basically two kinds of interview questions: concrete questions and open questions.

Concrete problems will be basically carried out according to STAR rules based on work experience, mainly to understand basic literacy, technical depth and potential.

Open-ended questions are basically to investigate the ability of divergent thinking and the depth and breadth of a certain field. They are basically asked in combination with technical questions or work content.

For example: n ways to implement a technology? How does a technology work?

I've read all of them. Please give me a thumbs up to encourage me to die on the keyboard. This is important **