This article is a summary of Vue related interview questions and their answers during the job hunting process. If you do not understand, you can cooperate with other bloggers to see the article, I only interview questions and answers, not all aspects of the explanation, after all, every point of knowledge can write an article. This is the last part of the Vue tutorial, and the next part is an interview, which should cover the network knowledge you must master in the front-end domain. I hope readers can still read, in my job hunting front-end network is basically every company will ask, especially the big factory, such as Tencent, byte, Meituan.

Why can’t V-if and V-for operate on the same element

When Vue processes instructions, V-for takes precedence over V-if, rendering all elements of V-for directly, resulting in a waste of resources. The best performance was achieved in combination with V-FOR and COMPUTED.

Why is V-for using key

When the list data is modified, Vue determines whether an element is modified based on the key value. If it is modified, Vue will re-render the element, otherwise reuse the previous element.

Can index be used as the key of v-for? Why is that? Refer to the next question for the answer.

Why not use index as the key for v-for

When an array is added or deleted, the index changes, causing the element with the changed index to be re-rendered. Therefore, it is recommended to use an immutable value for the key.

What are the main event modifiers

  1. Stop Prevents events from bubbling
  2. Native binding native events
  3. The once event is executed only once
  4. Prevent Prevents default events
  5. Caption is used for event capture
  6. Self binds events to itself, preventing them from bubbling

Scope implementation principle

At compile time, Vue will add a data-V-hash property to each HTML tag of the current component and the value of the property is a hash value. Then in the style, Vue will use the property selector to select the corresponding hash value to achieve component style localization.

Talk about your understanding of nextTick

NextTick means that a deferred callback is executed after the next DOM update loop ends. Using this method immediately after you modify the data, you can get the updated DOM.

Vue updates the Dom asynchronously, opening a queue and caches all data changes in the same event loop whenever it listens for changes. If the same Watcher is triggered more than once, it will only be pushed in once. Vue then refreshes the queue and performs the actual work in the next event loop. NextTick internally attempts to use native Promise.then, MutationObserver, and setImmediate for asynchronous queues, and setTimeout(fn, 0) is used instead if the execution environment does not support it.

Talk about your understanding of the Diff algorithm

The traditional diff algorithm compares two tree structures through recursive traversal and calculates the minimum conversion mode after finding the differences. Time order n ^ 3.

The time complexity of Vue’s diff algorithm is O(n). I’m going to skip this if I don’t understand it, but I’ve been asked twice in dozens of interviews. It is implemented internally in this way. The diff algorithm is written in the patch function, which is used to compare two virtual DOM and perform corresponding DOM operations.

1. Check whether the new and old nodes are the same. If they are different, replace the old node with the new one.

2. If they are the same, invoke patchVnode.

(1) If both old and new nodes have children and they are inconsistent, the updateChildren function will be called.

(2) If the old node has no children and the new node has children, it is necessary to clear the text content of the old node and then add children to it

(3) If the old node has child nodes but the new node has no child nodes, the child nodes of the old node need to be deleted

(4) If both the old and new nodes have no child nodes, compare the text nodes; if they are not equal, replace the text of the old node with the text of the new node

3. Next comes the updateChildren function, the core of the diff algorithm

(1) First create the head pointer and tail pointer of the new and old node array. Then start the loop when the head pointer of the old node array is less than or equal to the tail pointer and the head pointer of the new node array is less than or equal to the tail pointer.

(2) Cycle through the process

A. Compare the nodes to which the new and old Pointers point. If they are the same, repeat step 2 for the children, and move the new and old Pointers to the right

B. Compare the end Pointers of the new and old node arrays. If they are the same, repeat step 2 for the children

C. Compare the node to which the head pointer of the old node array points and the node to which the tail pointer of the new node array points. If they are the same, repeat step 2 for their children. Then move the head pointer to the end of the queue, with the head pointer index +1 for the old node and the tail pointer index -1 for the new node

D. Compare the end of the old node array with the head of the new node array. If they are the same, repeat step 2 for their children. Then move the end node to the top of the queue, with the end pointer index-1 for the old node array and the head pointer index-1 for the new node array.

E. Otherwise, find the node location of the new node array in the old node array. If not, create a new node in the old node array. If found, the current node of the old node array is moved to the end of the queue.

A. When the head pointer of the old node array is larger than the tail pointer, add the remaining nodes in the new array to the old node array. B. If the head pointer of the new node array is greater than the tail pointer, delete the remaining nodes in the old node array.

This piece of diff algorithm content suggested with the source code to see more intuitive, source code I will not post here. Before learning the Diff algorithm, you should first understand what the virtual DOM is.

What is a keep-alive component

Keep-alive is used to cache components. It is executed only once and is not destroyed. The only components wrapped around keep-alive are the activated and deactivated hook functions

Implementation principle of keep-alive

  1. Get the instance object of the first child of keep-Alive to get the name of the component.
  2. The component name matches the include and exclude of keep-alive to determine whether the current component needs caching. If no caching is required, the vNode of the current component is returned directly
  3. If caching is required, check whether the component is in the cache array. If it exists, remove the key from its original position and place the component’s key at the end of the keys array
  4. If not, put the component’s key into the array and determine whether the current keys array is longer than the range set by Max. If so, remove the key value of the longest-used component, the first value of the keys array.
  5. Set this component’s keepAlive to true

The cache policy of keep-alive uses the LRU algorithm, which is also the implementation principle of Keep-alive. What is the application of Keep-Alive?

subsequent

There will be a special article on vuE-router, Vuex, first screen loading, SSR, Vue3, Vite.

Thank you

Thank you for your attention. If you want to know more, you can pay attention to the public account of the new operation. The TWO-DIMENSIONAL code is as follows. If you don’t understand anything, you can add my wechat account: WinfansYang