Summary of front-end interview questions
I have summarized the frequently asked framework-level principle problems encountered in the recent interviews, and I still have some gains. Since I have been working on the front-end for several years, I am always committed to solving problems and I have not paid much attention to it. In terms of principle, I still gain something. The so-called I didn't know this. I knew it when I asked more people. I knew it was ambiguous. When I asked too much, I knew it clearly and affirmed it. Hope to make progress with friends like me!
Question 1: Understanding of the principles of VDOM and the role of key values
When operating dom in the traditional development mode, the browser will execute the process of building the DOM tree from beginning to end. If you want to operate 5 dom nodes at a time, the browser will execute the process of building the DOM tree 5 times over and over again. , Which is equivalent to only the last execution is the DOM tree we ultimately want. The first 4 wasted performance may also cause page jams and affect user experience.
VDOM can solve this problem well. VDOM uses js to make a simulated DOM tree. When there are 5 dom nodes that need to be updated in one operation, VDOM will update these 5 update operations to VDOM uniformly, and compare the real DOM tree comparison, so as to target the corresponding node. Modify the real DOM tree at once. Therefore, waste of performance is avoided.
The key value is an auxiliary mark for the dom node, so that the dom node to be operated can be accurately traced when operating the dom, instead of comparing and searching for this node one by one.
Question two, the principle of vue.nextTick
Official documents:
Vue performs DOM updates asynchronously. As long as data changes are observed, Vue will open a queue and buffer all data changes that occur in the same event loop. If the same
watcher is triggered multiple times, it will only be pushed into the queue once. This removal of duplicate data during buffering is
very important to avoid unnecessary calculations and DOM operations. Then, in the next event loop "tick", Vue flushes the queue and performs the actual (de-duplicated) work. Vue
internally tries to use native Promise.then and MessageChannel for asynchronous queues. If the execution environment does not support it, it will use
setTimeout(fn, 0) instead.
When nextTick() is used to delay the callback until after the DOM update cycle, the
DOM data update mechanism will be executed based on this mechanism. The data has changed but the DOM tree has not changed, but we need to get the updated DOM node. In this case, you can use the nextTick() function to get the data on the updated DOM tree node.
And nextTick() has three important variables, callbacks, pending, timerFunc, among which callbacks is used to store all the callback functions that need to be executed, pending is used to mark whether the callback function is being executed, timerFunc is used to trigger the execution of the callback function
Question three, the similarities and differences of methods, computed, and watch
The same point:
methods based on functions are used to define functions. The functions inside are passively called, while computed and watch are based on Vue's dependency tracking mechanism. They are all in a certain data. When a change occurs, it automatically invokes and executes the relevant logic to realize the change of the data.
Computed is a calculated attribute, which is the same type as the data attribute in data. It has a caching mechanism and will be executed only when it changes. It cannot monitor data changes. The data stored in it must be Only when declared in data can
watch belong to the monitoring mechanism. It will be triggered directly when a certain data changes, and caching is not supported.
Question four, use and configuration of keep-alive
Official website explanation: When wrapping dynamic components, inactive component
instances are cached instead of destroying them. And similar, it is an abstract component: it does not render a DOM
element by itself , nor does it appear in the parent component chain. When the component is switched inside, its
two life cycle hook functions , activated and deactivated, will be executed accordingly. In 2.2.0 and later versions, activated and deactivated will be
triggered in all nested components in the tree. Mainly used to preserve component state or avoid re-rendering
keep-alive configuration
app.vue
<div id="app" >
<keep-alive>
<!-- 需要缓存的视图组件 -->
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<!-- 不需要缓存的视图组件 -->
<router-view v-if="!$route.meta.keepAlive"></router-view>
</div>
Set meta.keepAlive to true or false in meta in routing
The life cycle of keep-alive
is included in the components created in keep-alive, there will be two more life cycle hooks: activated (called when the keep-alive component is activated) and deactivated (called when the keep-alive component is deactivated) ). The hook function triggered when the page is entered for the first time is created=>mounted=>activated. The hook function triggered when the page is exited is deactivated. When the page is entered again, only activated is triggered. Using keep-alive will keep the data in the memory. If you want to get the latest data every time you enter the page, you need to get the data in the activated phase and assume the task of getting the data in the original created hook function.
Note : These two life cycle functions will only be called when the component is wrapped by keep-alive. If used as a normal component, they will not be called. After the 2.1.0 version, after using exclude, it will be called. Wrapped in keep-alive, these two hook functions will still not be called! In addition, this hook function will not be called when rendering on the server side.
The attribute value of the keep-alive
include value is a string or the component name that matches the regular expression will be cached.
Exclude-string or regular expression. Any component with a matching name will not be cached
max-number. The maximum number of component instances that can be cached.
Multiple situations
<keep-alive include="Home,Search,Index">
Deepen the details of other knowledge points
- Dynamic routing is implemented based on the addRoutes function
- vue modifier
- v-model.lazy Update data when the cursor leaves the input box
- v-model .trim filter leading and trailing spaces
- v-model.number If you enter a number first, you can only enter a number in the input box
- .stop prevents events from bubbling up
- .prevent Prevent the default time
- .self will only trigger the time when it is clicked (for example, the div has a click event, and the button in the div also has a click event. Clicking the button will also trigger the div event, plus .self can only execute the event when the div element is clicked)
- The .once event is executed only once
- The complete mechanism of the .capture event is capture-target-bubble, event triggering is the target bubbling out and this is bubbling down from the target
- Two-way binding of .sync to prop
- .keyCode monitor key commands
- .passive is equivalent to adding a .lazy modifier when listening to the scroll event of the scroll bar
- .native converts the vue component into a normal html tag (the real html tag will be invalid)
- click.left Left mouse button click.right Right mouse button click.middle Middle mouse button
3. Hook function update Dom execution sequence
Load rendering
parent beforeCreate => parent created => parent beforeMount => child beforeCreate => child created => child beforeMount = >Child mounted => parent mounted
update process,
parent beforeUpdate => child beforeUpdate => child update => parent update
destruction process,
parent beforeDestory => child beforeDestory => child destruction => parent destruction
4. The promise function has three return states pending in progress fulfilled succeeded rejected failed
5. Set object function
//数组去重
var mySet = new Set([1, 2, 3, 4, 4]);
[...mySet]; // [1, 2, 3, 4]
//并集
var a = new Set([1, 2, 3]);
var b = new Set([4, 3, 2]);
var union = new Set([...a, ...b]); // {
1, 2, 3, 4}
//交集
var a = new Set([1, 2, 3]);
var b = new Set([4, 3, 2]);
var intersect = new Set([...a].filter(x => b.has(x))); // {
2, 3}
//差集
var a = new Set([1, 2, 3]);
var b = new Set([4, 3, 2]);
var difference = new Set([...a].filter(x => !b.has(x))); // {
1}
Set returns an object according to which can be converted into an array
6, the method to determine whether the variable is an array
1. instanceof 返回的是布尔值
var a=[];
a instanceof Array //true
2. 根据来源
var a=[];
Object.prototype.toString.call(a).indexOf('Array') //返回为Array出现的角标 如果是数组则>-1
3.构造函数
a.constructor.toString().indexOf("Array") ！== -1
4. isArray
var a=[];
Array.isArray(a) // 返回true 或者false