• Here are the actual questions asked by all the companies I interviewed with in March
  • There are a lot of answers not written in the back of the summary, wrote the answer, if the answer is not good, please give more advice.
  • I have landed, I hope you come on!

Company Personal Issues

  • To introduce myself
  • Company team size
  • The company’s business
  • Your main job
  • Front-end technology Back-end technology
  • How to convince your boss to refactor your project
  • Tell me about a project you think you did well
  • Project development process
  • How to deploy the project
  • Performance monitoring, data analysis
    • Monitoring is done primarily through the Navigator Timing API
    • The introduction of yueying monitoring platform for monitoring
  • Code management and review between teams

Css

Flip CARDS

CSS box model

The box model contains the contents of the elements, Standard box model size = Width (content) + border + padding + margin weird box size = width(content+border+padding) + margin

The left and right layout of the CSS

BFC

  • What is landing? How to apply it?
    • Block format Context, Block level formatting. context
    • A separate rendering area where the rendering of internal elements does not affect elements outside the boundary
  • Common conditions for BFC formation
    • Float is not none
    • Position is absolute or fixed
    • Overflow is not visible
    • The display is the flex inline – block
  • Common applications of BFC
    • Remove the floating

Js based

Determine the data type

1. typeof

  • All judgment value type (undefined, string, number, Boolean, symbol)
  • Check whether it is a function // function
  • Object (null, [1,2,3],{a: 2})

2. instanceof

  • An instance used to determine whether A is B, such as an instanceof B
  • Instance can only be used to determine whether two objects belong to the instance relationship, but not the specific type of an object instance
  • [] instanceof Array [] instanceof Array

3. Object.prototype.toString.call()

Developer.mozilla.org/zh-CN/docs/…

  • ToString () is an Object prototype method that, by default, returns the [Class] of the current Object, an internal property of the form [Object Xxx], where Xxx is the type of the Object
  • For Object objects, toString() directly returns [Object Object]. For other objects, call/apply is required to return the correct type information
let obj = new Object()
obj.toString()  // [object Object]

Object.prototype.toString.call(' ');// [object String]
Object.prototype.toString.call(1);// [object Number]
Object.prototype.toString.call(true);// [object Boolean]
Object.prototype.toString.call(Symbol()); //[object Symbol]
Object.prototype.toString.call(undefined);// [object Undefined]
Object.prototype.toString.call(null);// [object Null]
Object.prototype.toString.call(new Function());// [object Function]
Object.prototype.toString.call(new Date());// [object Date]
Object.prototype.toString.call([]) ; // [object Array]
Object.prototype.toString.call(new RegExp());// [object RegExp]
Object.prototype.toString.call(new Error());// [object Error]
Object.prototype.toString.call(document);// [object HTMLDocument]
Object.prototype.toString.call(window);//[object global] window is a reference to global
Copy the code

4. constructor

Constructor is a property of prototype. When a function is defined, the JS engine adds prototype to the function, and the constructor property in that function points to the function reference. So overwriting prototype loses the original constructor. 1: null and undefined undefined constructor In addition, if the developer overwrites prototype, the original constructor will be lost. Therefore, in order to standardize development, it is generally necessary to re-assign constructor when rewriting object prototypes to ensure that the type of the object instance is not tampered with.

What is a closure

  • The only scope within an inner function that can access an outer function is a closure

The difference between an arrow function and a normal function

www.jianshu.com/p/231a6f58e…

  1. Arrow functions are anonymous and cannot be used as constructors. New cannot be used
  2. Arrow functions can’t bind arguments, use rest arguments instead… To solve
  3. The arrow function’s this always points to its context’s this, without changing its pointing, whereas the normal function’s this points to the object calling it
  4. The arrow function does not bind this and captures the this value of its context as its own this value

Just a quick word about this pointing to the problem

1. The ordinary function call this points to Windows; 2. The object function calls this to refer to this object. 3. The constructor call this refers to the current instance itself (the newly created object); 4, Call and apply, bind what is passed to what, the parameters passed; 5. The arrow function calls this to the value of the parent scope (current function context).

Js array

Array to find the specified element

Juejin. Cn/post / 687784…

1. includes

Developer.mozilla.org/en-US/docs/… The includes() method is used to determine whether an array contains a specified value and returns true if it does, false otherwise.

var a = [1.2.3.4.5.6]

a.includes(2)  // true
a.includes(2.3)  // false
a.includes(5, -2)  // true
a.includes(5, -1)  // false
Copy the code

2. indexOf

Developer.mozilla.org/en-US/docs/… The indexOf() method returns the first indexOf the specified element in the array, or -1 if none exists.

var array = [2.5.9];

array.indexOf(2);     / / 0
array.indexOf(7);     // -1
array.indexOf(9.2);  / / 2
array.indexOf(2, -1); // -1
array.indexOf(2, -3); / / 0
Copy the code

3. lastIndexOf

Developer.mozilla.org/en-US/docs/… The lastIndexOf() method returns the index of the last element in the array, or -1 if none exists. Look forward from the back of the array, starting at fromIndex.

var array = [2.5.9.2];

array.lastIndexOf(2);      / / 3
array.lastIndexOf(7);      // -1
array.lastIndexOf(2.3);   / / 3
array.lastIndexOf(2.2);   / / 0
array.lastIndexOf(2, -2);  / / 0
array.lastIndexOf(2, -1);  / / 3

Copy the code

4. some

Developer.mozilla.org/zh-CN/docs/… The some() method tests that at least one element in the array passes the provided function test. It returns a Boolean value.

function isBiggerThan10(element, index, array) {
  return element > 10;
}

[2.5.8.1.4].some(isBiggerThan10);  // false
[12.5.8.1.4].some(isBiggerThan10); // true
Copy the code

5. every

Developer.mozilla.org/zh-CN/docs/… The every() method tests whether all elements in an array pass the test of a given function. It returns a Boolean value.

function isBigEnough(element, index, array) {
  return element >= 10;
}
[12.5.8.130.44].every(isBigEnough);   // false
[12.54.18.130.44].every(isBigEnough); // true
Copy the code

6. filter

Developer.mozilla.org/zh-CN/docs/… The filter() method creates a new array containing all the elements of the test implemented through the provided function.

function isBigEnough(element) {
  return element >= 10;
}

var filtered = [12.5.8.130.35].filter(isBigEnough);
// filtered is [12, 130, 35] 
Copy the code

7.find

Developer.mozilla.org/zh-CN/docs/… The find() method returns the value of the first element in the array that satisfies the provided test function. Otherwise return undefined.

var inventory = [
    {name: 'apples'.quantity: 2},
    {name: 'bananas'.quantity: 0},
    {name: 'orange'.quantity: 5}];function findOranges(fruit) { 
    return fruit.name === 'orange';
}

console.log(inventory.find(findOrange));
// { name: 'orange', quantity: 5 }

Copy the code

8. findIndex

Developer.mozilla.org/zh-CN/docs/… The findIndex() method returns the index of the first element in the array that satisfies the provided test function. Returns -1 if no corresponding element is found.

var inventory = [
    {name: 'apple'.quantity: 2},
    {name: 'banana'.quantity: 0},
    {name: 'orange'.quantity: 5}];function findOrange(fruit) { 
    return fruit.name === 'orange';
}

console.log(inventory.findIndex(findOrange));

Copy the code

Array object sort

Sort the following data

var person = [{name:"Rom".age:12}, {name:"Bob".age:22}, {name:"Ma".age:5}, {name:"Tony".age:25}]
 

Copy the code

sort

Developer.mozilla.org/zh-CN/docs/…

  • Ascending sorting is the ordering of data from smallest to largest (1, 2, 3, 4, 5)
  • Descending sorting is sorting data from largest to smallest (5, 4, 3, 2, 1)
person.sort((a,b) = >{ return a.age-b.age})/ / ascending
 
person.sort((a,b) = >{ return b.age-a.age})/ / descending
Copy the code

1. If compareFunction is not specified, the element is sorted by the Unicode loci of the characters in the converted string. 2. If compareFunction is specified, the array is sorted by the value returned from calling the function. That is, a and B are the two elements to be compared:

A. If compareFunction(a, b) is less than 0, a will be placed before B; B. If compareFunction(a, b) = 0, the relative positions of a and B remain the same. (The ECMAScript standard does not guarantee this behavior, and not all browsers comply, such as Mozilla’s pre-2003 version); C. If compareFunction(a, b) is greater than 0, b will be placed before A. D. compareFunction(a, b) must always return the same comparison on the same input, otherwise the sorting result will be indeterminate. (Using this feature, random sorting can be achieved)

The difference between for-of and for-in

For-in is an ES5 standard that iterates over keys (keys that can be iterated over objects, arrays, or strings). For-of is an ES6 standard that iterates over values (values that can be iterated over objects, arrays, or strings)

for-in

var arr = [1.2.4.5.7];
for (var index inarr) {console.log(myArray[index]);
}
Copy the code

The for – in abuses

1. Index The index is a string number (note that it is not a number) and cannot be directly used for geometric operations. 2. The traversal order may not be in the internal order of the actual array (possibly in random order). 3. Using for-in iterates through all enumerable properties of a set, including stereotypes. For example, both the method and name properties of the prototype method are iterated, and you usually need to use the hasOwnProperty() method to determine whether a property is an instance property of the object to remove the prototype object from the loop.

  • So for-in is better for traversing objects, and it is generally recommended not to use for-in to traverse groups of numbers.
for (var key inmyObject) {if(myObject. HasOwnProperty (key)) {console.log(key); }}Copy the code

for-of

For-of simply and correctly iterates over groups of numbers (without iterating through the archetypes Method and name). Therefore, the recommendation is to use for-of to iterate over the array, because for-of only iterates through the elements of the array, not including the array’s prototype property Method and index name.

var myArray = [1.2.4.5.6.7];
myArray.name = "Array";
myArray.getName = function() { return this.name; }
for (var value of myArray) {
    console.log(value);
}
Copy the code

The difference between summary

  • For in iterates over the array index (that is, the key name), while for of iterates over the array element value.
  • For-in always gets the key of an object or the index of an array or string.
  • For-of always gets the value of an object or the value of an array or string, and can also be used to traverse maps and sets.

Array to heavy

Segmentfault.com/a/119000001…

1. ES6 Set Deduplication

function unique (arr) {
  return Array.from(new Set(arr))
}
var arr = [1.1.'true'.'true'.true.true.15.15.false.false.undefined.undefined.null.null.NaN.NaN.'NaN'.0.0.'a'.'a', {}, {}];console.log(unique(arr))
 //[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {}, {}]

/ / to simplify
[...new Set(arr)]
Copy the code

2. For nested with for, then splice deduplicated

{} and NaN cannot be de-duplicated

function unique(arr) {
	for (let i = 0; i < arr.length; i++) {
		for (let j = i + 1; j < arr.length; j++) {
			if (arr[i] === arr[j]) {
				arr.splice(j, 1)
				j-- // Delete a data, index relation is changed, need to reduce 1 to find the unjudged data}}}return arr
}

var arr = [1.1.'true'.'true'.true.true.15.15.false.false.undefined.undefined.null.null.NaN.NaN.'NaN'.0.0.'a'.'a', {}, {}]
console.log(unique(arr))  //NaN and {} are not de-weighted
Copy the code

3. The indexOf to heavy

function unique(arr) {
	if (!Array.isArray(arr)) {
		console.log('is not array')
		return
	}
	let array = []
	for (let i = 0; i < arr.length; i++) {
		if (array.indexOf(arr[i]) === -1) {
			array.push(arr[i])
		}
	}
	return array
}

var arr = [1.1.'true'.'true'.true.true.15.15.false.false.undefined.undefined.null.null.NaN.NaN.'NaN'.0.0.'a'.'a', {}, {}]
console.log(unique(arr))  / / (1, "true", true, 15, false, undefined, null, NaN, NaN, "NaN," 0, "a", {...}, {...}] / / NaN, {} not to heavy
Copy the code

4. Includes to heavy

function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log('type error! ')
        return
    }
    var array =[];
    for(var i = 0; i < arr.length; i++) {
            if( !array.includes( arr[i]) ) {//includes checks whether the array has a valuearray.push(arr[i]); }}return array
}
var arr = [1.1.'true'.'true'.true.true.15.15.false.false.undefined.undefined.null.null.NaN.NaN.'NaN'.0.0.'a'.'a', {}, {}];console.log(unique(arr))
    / / (1, "true", true, 15, false, undefined, null, NaN, "NaN," 0, "a", {...}, {...}] / / {} not to heavy
Copy the code

5. Filter + hasOwnProperty de-weight (can de-weight all)

function unique(arr) {
	let obj = {}
	return arr.filter((item, index, arr) = > {
		console.log(typeof item + item)
		return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)})}var arr = [1.1.'true'.'true'.true.true.15.15.false.false.undefined.undefined.null.null.NaN.NaN.'NaN'.0.0.'a'.'a', {}, {}]
console.log(unique(arr))
/ / (1, "true", true, 15, false, undefined, null, NaN, "NaN," 0, "a", {...}] / / all the go

// if (obj.hasOwnProperty(typeof item + item)) {
// return false
// } else {
// obj[typeof item + item] = true
// return obj[typeof item + item]
// }

// if (! obj.hasOwnProperty(typeof item + item)) {
// obj[typeof item + item] = true
// return obj[typeof item + item]
// }
Copy the code

6. filter + indexOf

function unique(arr) {
	return arr.filter((item, index, arr) = > {
    // Current element, the first index in the original array == current index value, otherwise return current element
		return arr.indexOf(item,0) === index
	})
}

var arr = [1.1.'true'.'true'.true.true.15.15.false.false.undefined.undefined.null.null.NaN.NaN.'NaN'.0.0.'a'.'a', {}, {}]
console.log(unique(arr))
/ / (1, "true", true, 15, false, undefined, null, "NaN," 0, "a", {...}, {...}]
Copy the code

Js advanced

The difference between deep copy and shallow copy

Copy the object

const obj1 = {
	age: 20.name: 'xxx'.address: {
		city: 'beijing'
	},
	arr: ['a'.'b'.'c']}Copy the code

Shallow copy:

  • Only the properties of the first layer object are copied
  • Is a copy of the address of the object, not a new stack
  • The result of replication is that both objects point to the same address. Modifying the properties of one object changes the properties of the other

for… In implementation

function simpleCopy(obj) {
	// Determine whether the result is an object or an array
	let result = Array.isArray(obj) ? [] : {}
	for (let i in obj) {
		// for... In traverses key
		// console.log(i)
		result[i] = obj[i]
	}
	return result
}
let obj2 = simpleCopy(obj1)
console.log(obj2)
Copy the code

Object. The assign implementation

let obj2 = Object.assign(obj1)
console.log(obj2)

obj2.address.city = 'shanghai'
obj2.arr[0] = 'a1'
console.log(obj1.address.city)
console.log(obj1.arr[0])
Copy the code

Direct assignment

Deep copy:

  • Recursively copy all levels of properties,
  • Is to open a new stack
  • Two objects correspond to two different addresses. Modifying the properties of one object does not change the properties of the other

The recursive implementation

function deepClone(obj) {
	// Check if it is an object, not an object, return result (return value type)
  // obj == null
	if (typeofobj ! = ='object' || obj == null) {
		return obj
	}
	// Initialize the result data, if array assignment is [], otherwise {}
	let result = Array.isArray(obj) ? [] : {}

	for (let key in obj) {
		// Determine if it is your own property method, not the stereotype property method
		// If it is a recursive copy
		if (obj.hasOwnProperty(key)) {
			result[key] = deepClone(obj[key])
		}
	}
	return result
}

let obj2 = deepClone(obj1)
console.log(obj2)
obj2.address.city = 'shanghai'
obj2.arr[0] = 'a1'
console.log(obj1.address.city)
console.log(obj1.arr[0])
Copy the code
function deepClone(obj){
    let objClone = Array.isArray(obj)? [] : {};if(obj && typeof obj==="object") {for(key in obj){
            if(obj.hasOwnProperty(key)){
                // Determine whether the oJB child is an object, if so, recursively copy
                if(obj[key]&&typeof obj[key] ==="object"){
                    objClone[key] = deepClone(obj[key]);
                }else{
                    // If not, simply copyobjClone[key] = obj[key]; }}}}return objClone;
}    
let a=[1.2.3.4],
    b=deepClone(a);
a[0] =2;
console.log(a,b);
Copy the code

Reflect method

function isObject(obj) {
	if (typeofobj ! = ='object' || obj == null) {
		return false
	}
	return true
}

function deepClone(obj) {
	// An error is reported if the first argument to the reflect.ownkeys () method is not an object.
	if(! isObject(obj)) {throw new Error('Obj is not an object')}let result = Array.isArray(obj) ? [...obj] : { ... obj }Reflect.ownKeys(result).forEach(key= > {
		console.log(key)
		// The object is recursively traversed, not directly assigned
		result[key] = isObject(obj[key]) ? deepClone(obj[key]) : obj[key]
	})
	return result
}

let obj2 = deepClone(obj1)
console.log(obj2)
Copy the code

JSON implementation

Disadvantages: Cannot implement a deep copy of the method in the object, will be shown as undefined

function deepClone2(obj) {
  var _obj = JSON.stringify(obj),
    objClone = JSON.parse(_obj);
  return objClone;
}
Copy the code

The Lodash library implements deep copy

let result = _.cloneDeep(test)
Copy the code

What are the generic JS functions encapsulated

Nullity, formatting date, anti-shake throttling, local storage, AXIOS secondary encapsulation, obtaining URL parameters, generating random numbers, await processing promise return parameters, judging browser environment, mobile phone system information, verification function

A brief introduction to js garbage collection mechanism

www.cnblogs.com/fundebug/p/…

introduce

In general, objects that are not referenced are garbage and should be removed, with the exception that if several object references form a ring that refers to each other, but the root can’t access them, those objects are also garbage and should be removed. The basic garbage collection algorithm is called ** “mark-sweep” ** and periodically performs the following “garbage collection” steps:

  • The garbage collector takes the roots and ** “marks” **(remember) them.
  • It then accesses and “flags” all references from them.
  • It then accesses the tagged objects and marks their references. All objects accessed are remembered so that the same object is never accessed twice in the future.
  • And so on, until there are unaccessed references that can be accessed from the root.
  • All objects except those marked are deleted.

Js garbage collector performance

Because the JS garbage collector performs garbage collection every other cycle. If the amount of memory allocated for variables is small, then the garbage collector does not do much collecting. However, when the workload of the garbage collector becomes too heavy, it is likely that the situation will stall.

Js memory mechanism

Event loop (Event loop/Event polling)

What is an Event loop

  • Js runs in a single thread
  • Asynchrony is based on callbacks
  • Event Loop is the principle behind asynchronous implementation

The event loop process

The whole process involves

  • Call stack,
  • WebApis(browser apis),
  • Callback Queue,
  • Event loop(Event polling)

Process 1

  • Step by step, the synchronized code is placed on the Call Stack
  • In the case of asynchrony, log first and wait for an opportunity (perhaps when the synchronous code has finished executing)
  • When the time is right, move to the callback Queue

Process 2

  • If the synchronization code is finished, the Event loop starts working
  • Search the callback queue and move it to the Call Stack if any exists
  • And then we continue our search

Vue basis

1. Vue component communication

2. Vue loads components on demand

  • Asynchronous components
  • The import function
  • Load on demand, load large components asynchronously
<! -- Asynchronous components --><FormDemo v-if="showFormDemo"/>
<button @click="showFormDemo = true">show form demo</button>

components: {
    FormDemo: () = > import('.. /BaseUse/FormDemo'),},data() {
  return {
      showFormDemo: false,}}Copy the code
  • Load routing components on demand
{
  path: '/home'.name: 'Home'.component: () = > import(/* webpackChunkName: "tabbar" */ '@/views/tabBar/home/index.vue'),
  meta: { title: 'home'.keepAlive: false.showTab: true } as IRouterMeta
},
Copy the code

3. What are the common components encapsulated

4. How does the component implement the V-Model

  • Custom v – model
  • Mainly model properties on components (prop, Event)
  • Prop is the data to bind
  • Event Indicates the event to be bound
Custom V-model --> <! --<p>{{name}}</p>
<CustomVModel v-model="name"/>
  
  
<template>
    <! -- For example: vue color selection -->
    <input type="text"
        :value="text1"
        @input="$emit('change1', $event.target.value)"
    >
    <! -- 1. Input uses :value instead of v-model 2. Change1 and model.event1 correspond to each other. Text1 correspond to each other -->
</template>

<script>
export default {
    model: {
        prop: 'text1'.// Corresponding to props text1
        event: 'change1'
    },
    props: {
        text1: String.default() {
            return ' '}}}</script>
Copy the code

5. The difference between computed and Watch

Computed attribute computed

  1. Support caching, only the dependent data changes, will be recalculated
  2. Asynchronism is not supported. It does not work when there is asynchronous operation in computed, and data changes cannot be monitored

Property values are cached by default. Calculated properties are cached based on their responsive dependencies, that is, calculated values based on the data declared in data or the props passed by the parent component. If a property is computed by something else, and it depends on something else, it’s a many-to-one or one-to-one, usually using computed 5. If the computed attribute value is a function, the default is to use the GET method; The return value of the function is the property value of the property; In computed, attributes have a GET and a set method, which are called when data changes.

Listening property Watch

  1. Does not support cache, data change, will directly trigger the corresponding operation;

2. Watch supports asynchrony; 3. The listening function accepts two arguments, the first of which is the latest value; The second argument is the value before input; 4. When an attribute changes, perform the corresponding operation. A couple more; The listening data must be in the props declared in data or passed by the parent component. When the data changes, other operations are triggered. The function has two parameters: immediate: the component is loaded immediately and the callback function is executed. Deep listening is used to detect changes in the value of a complex type of data, such as changes in the contents of an array. Note that it is not necessary to listen for changes in the array. Note: Deep cannot listen for array changes or object additions, as in vUE array mutations, only when triggered in a responsive manner. 6. This approach is most useful when asynchronous or expensive operations need to be performed when data changes

Usage scenarios

Computed When an attribute is affected by multiple attributes, it needs to use computed data. The most typical example is watch in shopping cart settlement. When one data affects multiple data, it needs to use Watch to search data

What is the life cycle, and which pages are first loaded and executed

First render

  • beforeCreate
  • created
  • beforeMount
  • mounted

update

  • beforeUpdate
  • updated

The destruction

  • beforeDestroy
  • destroyed

keep-live

  • Activated Component
  • The deactivated component is disabled

When do asynchronous requests occur

  • mounted
  • Dispatch an action

What are the vUE modifiers

  • Form modifier
    • Lazy lazy loading
    • . Trim Removes leading and trailing Spaces
    • . Number converts to number
  • Event modifier
    • .stop prevents bubbling
    • .prevent Prevents default behavior
    • .self triggers its own element
    • . Once Triggers only once
    • .capture Indicates the event capture phase
    • . Passive Triggers the event
    • **. Native ** converts a VUE component into a plain HTML tag that fires an event
  • Mouse button modifier
    • . Left Click
    • Right click
    • . Middle Middle click
  • Key value modifier
    • **. KeyCode ** corresponds to ASCII code
  • V-bind modifier (I don’t know what it’s called)
    • **.sync ** bidirectional binding to props

Why is data a function

  • The.vue component is actually a Class when compiled
  • Each use of this component is equivalent to an instantiation of the component
  • Execute data at instantiation time
  • If data is not a function, then every component instance has the same data and the data is shared
  • When the data of one component is modified, the data of other components is also modified

Difference between V-show and V-if

  • V-show Controls the display and hiding using the CSS display
  • V-if components really render and destroy, not show and hide
    • The template is compiled into render, with syntax, and converted into a ternary operation
  • To frequently switch the display status, use v-show; otherwise, use V-if

Why v-for key

www.jianshu.com/p/4bd5e745c…

  • Must use key, and cannot be index or random.
  • Diff algorithm uses tag and key to determine whether it is a sameNode
  • Reduce rendering times and improve rendering performance

What happens if the key is repeated

  • If the key is duplicated, the relationship between the index and array data will be distorted during the operation of adding and deleting
  • The diff algorithm will assume that all nodes after the current node have been updated, resulting in multiple repeated renderings

Does defineProperty overwrite array methods affect normal use of array methods

  • Don’t
  • Create () creates a new Object with the prototype pointing to the array prototype
  • The extended array method executes by calling the methods on the array prototype and updating the view

Keep-live properties and lifecycle

  • include– String or regular expression. Only components with matching names are cached.
  • exclude– String or regular expression. Any component with a matching name will not be cached.
  • max– digital. Maximum number of component instances can be cached.

1. Activated: A created-> Mounted ->activated hook is triggered when a page is displayed for the first time. 2. Deactivated: A deactivated hook is triggered when a page is displayed after it exits

What does the name of components do, scene

Blog.csdn.net/weixin_3901…

  1. When using a component recursive invocation, the component being recursively called must define the name attribute because instead of calling itself from a component registered in components, it uses the name attribute to find the component
  2. When keep-alive wraps a dynamic component, inactive component instances are cached, and include and exclude attributes are displayed to include or exclude the named component
  3. When encapsulating a common component, you can obtain the name attribute of the component instance and define it as a component name for easy management
  4. Vue-tools plug-in debugging without the name attribute will report an error or warning

How do I implement user authentication and design dynamic routes

Juejin. Cn/post / 684490… The pit of addrouter blog.csdn.net/weixin_3417…

Vue principle

$nextTICK internal implementation

The internal implementation of computed and Watch

Router Routing modes and implementation principles

  • hash – window.onhashchange
  • H5 history-history. pushState and window. onpopState
  • H5 History requires back-end support

Event-bus implementation principle, design a
o n . on, emit

Performance optimization

1. What are the performance optimizations

General performance optimizations:

  • Make loading faster:
    • Reduced resource volume: code compression
    • Reduce access times: merge code, SSR server rendering, cache (HTTP cache, local cache)
    • Use a faster network: CDN
  • Make rendering faster
    • CSS goes in the head and JS goes at the bottom of the body
    • Execute JS as early as possible and trigger with DOMContentLoaded
    • Lazy loading (images lazy loading, slide up loading more, pagination)
    • Cache DOM queries
    • Frequent DOM operations, merged together to insert DOM structures
    • Anti-shock debounce and throttle throttle

Vue performance optimization

  • Use v-show and V-if wisely
  • Use computed and Watch wisely
  • A unique key is added for v-for to avoid simultaneous use with v-if
  • Custom events and DOM events are destroyed in time
  • Use asynchronous components wisely
  • Use keep-live wisely
  • The data level should not be too deep
  • Use vue-loader to compile templates in the development environment
  • Using SSR

WebPack performance optimization

www.yuque.com/docs/share/… Webpack and Babel Interview Questions

2. The difference between anti-shake and throttling

www.jianshu.com/p/c8b86b09d… Zhuanlan.zhihu.com/p/72923073 segmentfault.com/a/119000001…

Stabilization debounce

For events that are triggered consecutiely over a short period of time (such as a rolling event), the implication is that the event handler is executed only once for a certain time period (1000 ms above). The so-called shaking prevention means that the function can only be executed once within n seconds after the event is triggered. If the event is triggered again within N seconds, the function execution time will be recalculated

  • Continuous trigger non-execution
  • Do not trigger for a period of time before executing
<input type="text" id="input1">

const input1 = document.getElementById('input1')
// Arrow functions cannot be used
input1.addEventListener('keyup', debounce(function (e) {
    console.log(e.target)
    console.log(input1.value)
}, 600))


/ / image stabilization
function debounce(fn, delay = 500) {
    // Timer is in the closure
    let timer = null

    return function () {
        if (timer) {
            clearTimeout(timer)
        }
        timer = setTimeout(() = > {
            fn.apply(this.arguments)
            timer = null
        }, delay)
    }
}
Copy the code

Throttling throttle

If a large number of the same events occur in a short period of time, after a function is executed once, the function stops working for a specified period of time and does not restart until that time has passed. The idea of throttling is to allow a function to execute sparingly, rather than arbitrarily once triggered. What does abstinence mean? Just do it once in a period of time.

  • Continuous triggering does not occur many times
  • Do it at a certain time
<div id="div1" draggable="true"> you can drag <div>const div1 = document.getElementById('div1')

div1.addEventListener('drag', throttle(function (e) {
    console.log(e.offsetX, e.offsetY)
}))

/ / throttling
function throttle(fn, delay = 100) {
    let timer = null

    return function () {
        if (timer) {
            return
        }
        timer = setTimeout(() = > {
            fn.apply(this.arguments)
            timer = null
        }, delay)
    }
}
Copy the code

Examples of application

Resize, Scroll, Mousemove, and input boxes will be continuously entered to remotely verify the input content and trigger click events for several times

engineering

Git rebase is a git merge

www.jianshu.com/p/4079284dd…

Write a topic

Uppercase to lowercase lowercase to uppercase

Array.prototype.map.call(str,a= >a.toUpperCase(a)==a? a.toLowerCase():a.toUpperCase()).join(' ');
Copy the code
function upLower(str) {
	return str.split(' ').map(item= > {
		console.log(item)
		return item.toUpperCase() === item ? item.toLowerCase() : item.toUpperCase()
	})
}

console.log(upLower('ABc'))
Copy the code

Algorithm problem

1. Find the number of occurrences in the array

// Find the number of occurrences in the array
const arr = [1.2.3.4.5.2.1]
function fn(arr) {
	let map = new Map(a)let maxIndex = 0
	for (let i = 0; i < arr.length; i++) {
		if(! map.get(arr[i])) { map.set(arr[i],1)}else {
			map.set(arr[i], map.get(arr[i]) + 1)
		}
		maxIndex = Math.max(maxIndex, map.get(arr[i]))
	}
	let result = []
	for (let [key, value] of map) {
		if (value === maxIndex) {
			result.push(key)
		}
	}
	return result
}

console.log(fn(arr))
Copy the code
  • The way the front end crosses domains
  • cors
  • The data was hijacked
  • Diff algorithm, virtual DOM real DOM,
  • Html5, CSS3 new features
  • Es6 new features
  • Webpack common loader
  • Prototype chain
  • Es5 implementation inheritance, ES6 implementation, inheritance,
  • 2 handwritten codes:
    • Deep copy
    • URL strings are converted into objects
  • Principle: Vue framework of things ask more
  • Assign component communication
  • Component definition hook identification, how to perform
  • Principle of promise
  • What is vuex
  • Applets page communication
  • Performance optimization of applets (how to do when pages load too slowly)
  • Data storage of applets
  • Applet live
  • Bidirectional binding of applets is different from bidirectional binding of Vue
  • Small program user authentication (how to determine whether a user logs in)
  • Token: Indicates the token resolution and encryption mode
  • Can you use uniapp
  • Cookie and storage
  • What is set for
  • The Generator function
  • What problem does the difference between promise and await solve
  • What API is Ajax implemented through
  • Reflect
  • What are the methods of arrays? The difference between some and every
  • What if there is no data after vuex refresh
  • Cross-domain if you do not look at the console, how to determine
  • Company team size
  • The company’s business
  • Front-end technology Back-end technology
  • How to convince your boss to refactor your project
  • Tell me about a project you think you did well
  • Project development process
  • Your main job
  • How to deploy the project
  • Performance monitoring, data analysis
  • Code management and review between teams
  • Git uses merge or base
  • 20000s without API conversion to hours, minutes and seconds mod mod
  • What kind of work have you done
  • The specification used by Eslint
  • Will V-for report an error if there is no key added
  • What components have you developed
  • How do you ensure flexibility with components wrapped in third-party libraries, such as rich text
  • If a search component, I need two or more input boxes if flexibility is guaranteed
  • Pass in options, iterate over options and render, will there be some pits in there
  • What is the difference between Vue3 and Vue2
  • What is rearrangement and redrawing
  • What properties does Flex have, and what are the three properties of the child element Flex
  • Flex handles list newlines
  • What properties in the CSS can be inherited
  • Es6 common attribute methods
  • Let, const, and var
  • The difference between an arrow function and a normal function
  • This points to the problem
  • How to handle errors with asyn/await
  • The difference between macro and micro tasks
  • What are the common life cycles
  • The difference between addEventListenter and traditional event listening
  • What does v-for key do? Index
  • What is the virtual DOM