This is the fourth day of my participation in the August Text Challenge.More challenges in August

JavaScipt

Set to repeat basic usage [..new set ()]

Map key-value pairs. Basic Usage -map.set -map.get – map.hase-map.delete

Promise asynchronous programming, currently used for network requests and loading pictures disadvantages are: 1. Unable to cancel midway 2. Unable to know the progress (must wait for it to complete, because the status is only completed, failed, in progress) 3. The callback function must be set so that errors do not leak

symbol

  const PROP_NAME = Symbol(a)Copy the code

1. The field is unique. 2

let obj = {
   [Symbol('name')]: 'One-pound code'.age: 18.title: 'Engineer'
}

Object.keys(obj)   // ['age', 'title']

for (let p in obj) {
   console.log(p)   // Outputs: 'age' and 'title' respectively
}

Object.getOwnPropertyNames(obj)   // ['age', 'title']
Copy the code

When the Generator keyword yiled executes, only next() is seen; Before the next statement, a pointer like C, is run for example:

function* getData(){
	yield test1();
	yield test2();
	yield test3();
}
var go=getData();
go.next();   // The next statement is executed when the method is seen
Copy the code

Let is only used in block-level scopes. Braces are required otherwise an error is reported

test(){
	let test=5;
	if(true) {let test=10;
	}
	console.log(test);
}
Copy the code

Const, like static, means a static variable and cannot be modified

All functions and objects have the _proto_ attribute. All functions and objects have the _proto_ attribute. The source is null

For example, instanceOf compares the archetype Proto if the left is derived from the righttrue
Copy the code

Once an object is defined, its prototype can be found. Can form a sequence of objects. This is called the prototype chain

A method closure is a function that can read other methods in the scope. It is recommended that you null the closure function after using it, and set the function to NULL. Advantage: Avoids global variable contamination

Shallow copy and deep copy Shallow copy copies only the memory space and is similar to data binding. Change 2 affects 1 Deep copy copies all the properties of the data, which is equivalent to defining a new array

A method to remove the weight of an array

Set to repeat the basic usage [..new]Set() reduce accumulatorlet arr = [1.1.2.3.4.5.5.6]
let arr2 = arr.reduce(function(ar,cur) {
if(! ar.includes(cur)) { ar.push(cur) }returnAr},[]) filter Filterlet arr = [1.1.2.3.4.5.5.6]
let arr2 = arr.filter(function(item,index) {
The indexOf() method returns the first occurrence of a specified string value in a string
return arr.indexOf(item) === index
})

Copy the code

Macro tasks and microtasks Macro tasks: setTimeout setInterval script Microtasks: Promise, Process performs macro tasks first, micro tasks first, but when it comes to output, Event Queue(message Queue) performs micro tasks first, i.e

‘Await’ is in async. ‘Await’ is in async. ‘Await’ is in async, ‘await’ is in async, ‘await’ is in async. Each time, I would wait for the calculation to be completed before I went to the other method

function async getData(){
	var ww=await 5+6;
}
Copy the code

RequestAnimationFrame and setTimeout requestAnimationFrame are allocated by the system and intelligently throttled. After a web page is shrunk, it will pause and continue to run. SetTimeout will continue to run

Common memory leaks 1. timers 2. closures 3. references to dom 4. Global variables are not defined

Performance optimization 1. Image optimization 2. Webpack compression 3. Optimize resource loading 5. Reduce redrawing

VUE

Vue bidirectional binding principle

The setter getter of each attribute is hijacked via Object.defineProperty() in a combination of data hijacking and publisheder-subscriber pattern. When data changes, messages are published to subscribers and corresponding listener callbacks are triggered. The common point is that the Observer listens for the attributes of all objects and establishes setters and getters for them. When a change is detected, it tells the subscriber Compile to scan each element node and replace the data according to the template instructions Watcher's role is to bridge the Observer and compile, subscribe to notifications of each change, and execute update commands to update the corresponding viewCopy the code

Why does Vue need virtual DOM to diff detect the difference? Because the biggest advantage of Vue’s responsive system is Watcher, and the disadvantage is also Watcher, Because you know where to change, but create a Wacther for each attribute, incurring memory and dependency tracking overhead, you need a virtual DOM diff to capture more specific differences

The V-for binding Key is useful for demultiplexing each element as long as the data order remains the same, updating the Dom more efficiently and quickly

Vue communication mode

 1.props/$emit   // Parent component communication
 2.$emit/$on(Subscriber)// Any component communicates, but maintenance is troublesome
 3.$attrs/$listenter(The child component can reference all the attributes of the parent component,class.style// Pass the parent base properties to the child or grandchild component 4.provide/inject(Like dependency injection, parent component provides instance, child component registers use) 5.ref/ / byrefGets an instance of the child componentCopy the code

Vue reset data using object.assign(this.data,this.$options.data());

This.$options.data() contains metadata for all page initializationCopy the code

Function of Vue component with name option 1. When keep-alive, exclude 2 is matched with component name. 3. Dev-tool can see name

Vue first screen load optimization (1) will not often change the libraries are placed to the index. The introduction of HTML and use the CDN way, and then in the build/webpack base. Conf., js to remove 2 operation. Componet =>require() 3 Instead of generating the map file, change to productionSourceMap: false 4. Do not import all components. ElementUi, for example, only introduces 5. Gzip compression is enabled on the front end and gzip is enabled on the back end