1, vue

1. vue bidirectional data binding principle

Vue adopt Object Above the prototype defineProperty method,
For each Vue In the file data Data traversal,
Pass for each variable or attribute defineProperty Data rewriting to achieve two-way binding

2. How to unbind bidirectional data binding

First, define global variables, and then json.stringify Copy to data The data inside
 The second is to use v-once Data changes after the first implementation do not trigger the view
 Third, call yourself defineProperty Go and rewrite it
 adopt json Conversion mode, using JSON,Make a deep copy of the object
 It is limited to objects and arrays, and a single attribute cannot be removed
this.viewModel ={data:11 }
ps:In fact, the interviewer's question is not rigorous enough

3. One way data flow of parent-child components

3.1,Parent to child: prop，slot
prop It's just a value transfer. The sub component is script of prop It can be used directly after being declared in
 be careful:
prop The passed value cannot be modified in the sub component, otherwise the browser will report an error, and it can be modified only by assigning a value to the element declared by the sub component itself;
slot(Slot):And prop Different slots support html Statement insertion and component insertion, as long as the sub components are also written slot Can be successfully displayed;
be careful: slot Value transfer after the parent component transfers a value, it needs to be used in the child component slot-scope Attribute is declared;

3.2,Child to parent: emit
 The parent component needs to write a method to receive the data passed by the child component, and the child component can $emit('Method name'，data)Trigger and transfer values of parent component methods
 Note: a suffix for value transfer has been added.sync，Through this suffix, for simple status modification, the parent component can update directly without writing methods;
<parent :title.sync="title" ></parent>
<children @click="$emit('update:title',New data)"></children>
As shown above: as long as the sub component passes updata: Splice the attribute name, and then follow the new data to successfully update the status
 Note: new suffix.sync Not with v-bind When used together, expressions cannot be spliced; But you can pass an array into

4. Principle of scoped

scoped Let the css Apply to current component
 Principle: vue Through in DOM Structure and css A unique mark is added to the style to ensure uniqueness, so as to achieve the privatization of the style and not pollute the overall situation

5. What are the attributes of vuex? What's the use?

State: Defines the data structure of the application state. You can set the default initial state here.
Getter: Allow components from Store Get data from, mapGetters Auxiliary functions simply store Medium getter Map to local calculated properties.
Mutation: Is the only change store The method of the state in the and must be a synchronization function.
Action: For submission mutation，Instead of changing the state directly, it can include any asynchronous operation.
Module: Allow a single Store Split into multiple store And saved in a single state tree at the same time.

2, js

1. What is the difference between cookies, sessionStorage and localStorage?

localStorage: 
						Storing persistent data;
						The data will not be lost after the browser is closed, unless the data is deleted actively;
						Can only be saved locally;
						Data size 5 M+；
sessionStorage: 
						The data will be automatically deleted after the current browser window is closed;
						Can only be saved locally;
						Data size 5 M+
cookie: 
						Set cookie Valid until the expiration time;
						Even if the window or browser is closed;
						however cookie The data size of cannot exceed 4 k；

2. What are function anti chattering and throttling? What are the similarities and differences between them?

In fact, function anti shake and throttling are a means to optimize the high-frequency execution of a section of js code, because some event operations will always frequently call the callback function bound to the event, which will greatly waste resources. It is necessary to limit the number of such events, so as to improve the performance of the front end

Function anti shake:

The callback is executed n seconds after the event is triggered. If it is triggered again within this n seconds, it will be timed again, and so on.

Function throttling:

The function is executed only once every other period of time. If it is triggered again within these n seconds, it will not be executed again.

Similarities:
1. Both can be realized by using setTimeout
2. The purpose is to reduce the callback frequency and save computing resources.
difference:
Function anti shake:
After a continuous operation, handle the callback, which is realized by clearTimeout and setTimeout;
Events triggered continuously for a certain time are executed only once at the last time;
Function throttling:
In a continuous operation, it is only executed once in each period of time. It is used in events with high frequency to improve performance;
Only once in a period of time;

Application scenario of function anti shake
For continuous events, only one callback needs to be triggered:

Search box search input. The user only needs to input it for the last time, and then send a request for mobile phone number and email verification input detection
Window size Resize. Just calculate the window size after the window adjustment is completed. Prevent duplicate rendering.

Scenarios in which callback is performed at intervals include:

Scroll load, load more or scroll to the bottom
Google search box, search association function
Click Submit frequently, and the form will be submitted repeatedly

3. About heap and stack

In short, heap is the address where reference data is stored (Object, array, function, regular expression), and stack is the address where ordinary data is stored (Number, String, Boolean, Null, Undefined, Symbol (ES6). These types can directly operate the actual values stored in variables.)
However, it should be noted that when we call the reference data, we will first find the memory address in the stack, and then get the corresponding code in the heap through this memory address

Why can basic data be stored on the stack?
Because the data size is determined and the memory space can be allocated, it can be directly stored in the stack by value and accessed by value