2021 Golden Nine Silver Ten latest VUE interview questions☀️《❤️Remember to collect ❤️》

Hits: 0

2021 Golden Nine Silver Ten latest VUE interview questions☀️《❤️Remember to collect ❤️》

Table of contents

🏳️‍🌈 Lecture starts! ! ! ! 🏳️‍🌈Suzhou Procedures 🏳️‍🌈


🔠1. Talk about [MVVM]

MVVMis an Model-View-ViewModelabbreviation , that is, the MVCin the Controllerevolved into ViewModel. ModelLayers represent data models, Views represent UI components,

ViewModel is a bridge between the layer Viewand the Model layer. The data will be bound to the viewModellayer and automatically render the data to the page. When the view changes, the viewModellayer update the data.

🔡2, Vue2.x responsive data principle

VueWhen initializing data Object.defineProperty, dataall properties in redefine will be used. When the page uses the corresponding properties, it will first perform dependency collection (collect the watcher of the current component)

Mainly do a few things: data hijacking, collecting dependencies, and distributing updates

  1. The collection of dependencies: renderthe process of triggering the getter of the data, and collecting the current watcher object during the getter.

  2. Distribute update: setterWhen traversing the dependent object (watcher object) of this data, update it.

🔢3, Vue3.x responsive data principle

Vue3.x uses Proxy instead of Object.defineProperty. Because Proxy can directly monitor changes in objects and [arrays] , and there are as many as 13 interception methods.

And as a new standard, browser manufacturers will focus on continuous performance optimization.

" Proxy will only proxy the first layer of the object, so how does Vue3 deal with this problem?"

Interrupt whether the current return value of Reflect.get is Object, and if so, use the reactive method as a proxy, thus realizing deep observation.

"When monitoring an array, get / set may be triggered multiple times , so how to prevent multiple triggers?"

We can judge whether the key is the own attribute of the current proxied object target, or whether the old value is equal to the new value. Only when one of the above two conditions is met, it is possible to execute trigger.

🔣4. How to monitor array changes in vue2.x

Using the method of function hijacking, the method of the array is rewritten, and Vue rewrites the prototype chain of the array in data to point to the prototype method of the array defined by itself.

In this way, when the array [api] is called , the dependency update can be notified. If the array contains reference types, the reference types in the array will be recursively traversed again to monitor. In this way, the monitoring of array changes is realized.

🔤5. Do you know nextTick, what is the implementation principle?

Executes the deferred callback after the next DOM update loop ends. nextTick mainly uses macro tasks and micro tasks. According to the execution environment, try to adopt




If none of the above work, usesetTimeout

An asynchronous method is defined, and calling nextTick multiple times will store the method in the queue, and clear the current queue through this asynchronous method.

[See this article] on macro tasks and micro tasks and event loops

🅰️6. The [life cycle of Vue]

beforeMountOccurs before mounting, before the templatetemplate has been imported into the render function compilation. At the current stage, the virtual Dom has been created and is about to start rendering.

Changes can also be made to the data at this point, without triggering an update.

beforeUpdateOccurs before the update, that is, the responsive data is updated, and it is triggered before the virtual dom is re-rendered. You can change the data in the current stage without causing a re-render.

updatedOccurs after the update is complete, the current phase component Dom has completed the update. The caveat is to avoid changing data during this time, as this could result in an infinite loop of updates.

beforeDestroyOccurs before the instance is destroyed, and the instance can be used at the current stage, and we can do the finishing touches at this time, such as clearing the timer.

destroyedOccurs after the instance is destroyed, and only the dom shell is left at this time. Components have been dismantled, data bindings have been dismantled, listeners have been removed, and child instances have all been destroyed.

🆎7. Which life cycle is the interface request generally placed in?

  • The interface request is generally placed in mounted, but it should be noted that the server does not support mounted when rendering, and needs to be placed in created.

  • The created stage can also do some simple requests (without manipulating the DOM)

  • Note: If it is server-side rendering, it needs to be placed in created. Because only two hooks beforeCreat and created are supported.

🅱️8. Talk about Computed and Watch

Computed is essentially a watcher with a cache, and the view is updated when the dependent properties change. It is suitable for computing scenarios where computing is relatively expensive.

When the expression is too complex, putting too much logic in the template will make the template difficult to maintain, and the complex logic can be handled in the computed property.

Watch has no cacheability, and is more of an observation, which can monitor certain data to execute callbacks. When we need to deeply monitor the properties in the object, we can turn on the deep: true option,

This will monitor each item in the object. This will bring performance problems. If you optimize, you can use the string form to monitor. If you don’t write it into the component, don’t forget to use unWatch to log out manually.

🆑9, the difference between v-if and v-show

  • Means: v-ifIt is to dynamically add or delete DOM elements to the DOM tree; v-showit is to control the display and hide by setting the display style attribute of the DOM element

  • Compilation process: v-ifThere is a partial compilation/unloading process for switching, and the internal event listeners and sub-components are appropriately destroyed and rebuilt during the switching process; v-showit is just a simple css-based switching

  • Compilation condition: v-ifIt is lazy, if the initial condition is false, do nothing; only start local compilation when the condition becomes true for the first time (compile is cached? After the compilation is cached, and then perform local compilation when switching unload); v-show is compiled on any condition (whether the first condition is true), then cached, and the DOM element remains

  • Performance consumption: v-ifhigher switching consumption; v-show has higher initial rendering consumption

  • Usage scenario: v-ifsuitable for operating conditions unlikely to change; v-show suitable for frequent switching

  • In the same v-showway , the display and hiding of dom elements can be dynamically controlled

  • The difference: v-ifthe show-hide of v-show is to add or delete the entire DOM element, the show-hide of v-show is to add css style to the DOM element display, set none or block, the DOM element still exists

  • When rendering multiple elements, you can use an element as a packaging element and use v-ifto make a conditional judgment. The final rendering will not include this element, v-showbecause the syntax is not supported

🆒10. Why is the data in the component a function?

If a component is reused multiple times, multiple instances will be created. Essentially, these instances use the same constructor. If datais an object, the object is a reference type and affects all instances.

So in order to ensure that the data does not conflict between different instances of the component, datait must be a function.

🆓11. The principle of v-model

Native v-model, will generate different events and attributes according to the different tags

ℹ️12. Let’s talk about the principle of Vue event binding

Native event binding is addEventListenerbound to real elements through , and component event binding is implemented through Vue custom $on.

🆔13. What is the principle of Vue template compilation

Simply put, the compilation process of Vue is the process of converting the template into a render function. It will go through the following stages:

Generate AST tree



The template is first parsed to generate an AST syntax tree (a form of JavaScript object describing the entire template). Templates are parsed using a large number of regular expressions,

When encountering labels and texts, the corresponding hooks will be executed for related processing.

Vue’s data is responsive, but not all data in the template is responsive. Some data will not change after the first rendering, and the corresponding DOM will not change.

Then the optimization process is to traverse the AST tree deeply and mark the tree nodes according to the relevant conditions. For these marked nodes (static nodes), we can skip their comparison, which greatly optimizes the runtime template.

The final step of compilation is to convert the optimized AST tree into executable code.

Ⓜ️14, what are the diff algorithms of Vue2.x and Vue3.x renderers respectively

In simple terms, the diffalgorithm has the following process

Compare at the same level, and then compare the child nodes

First judge the situation that one side has child nodes and the other has no child nodes (if the new children has no child nodes, remove the old child nodes)

Recursively compare child nodes

The time complexity of normal Diff two trees is O(n^3), but in practice we rarely move DOM across levels, so it Vuewill Diffbe optimized, starting fromO(n^3) -> O(n),

Only when both old and new childrenare multiple child nodes, it is necessary to use the core Diff algorithm to compare at the same level.

The core Diff algorithm of Vue2 adopts the double-end comparison algorithm. At the same time children, ends, finds the reusable node with the help of the key value, and then performs related operations.

Compared with React’s Diff algorithm, in the same case, it can reduce the number of moving nodes, reduce unnecessary performance loss, and be more elegant.

Vue3.x draws on the ivi algorithm and the inferno algorithm

When creating a VNode, determine its type, mount/patchand use bit operations to determine VNodethe type of a in the process of , and then cooperate with the core Diff algorithm on this basis.

Makes the performance Vue2.xmore improved. (The actual implementation can be seen in combination with the Vue3.x source code.)

The algorithm also uses the idea of ​​dynamic programming to solve the longest recursive subsequence.

🆕15. Talk about the role of virtual Dom and key attributes

Because manipulating the DOM in the browser is expensive. Frequent manipulation of the DOM will cause certain performance problems. This is why the virtual Dom comes into being.

Vue2The implementation Virtual DOMborrows from the open source library snabbdom.

Virtual DOMThe essence is to describe a DOM node with a native JS object. It is a layer of abstraction over the real DOM. (That is, the VNode class in the source code, which is defined src/core/vdom/vnode.jsin .)

“The role of the key is to reuse DOM elements as much as possible.”

childrenWhen only the order of the nodes in the old and new is different, the best operation should be to achieve the purpose of updating by moving the position of the element.

It is necessary to save the mapping relationship between childrenthe nodes so childrenthat reusable nodes can be found in the old nodes. keyThat is children, the unique identifier of the node in .

🆖16. Do you understand keep-alive?

keep-aliveComponent caching can be implemented, and the current component will not be unloaded when the component is switched.

Two commonly used properties, i nclude/exclude, allow components to conditionally be cached.

Two life cycles activated/deactivatedto know whether the current component is active.

🅾️17. Let’s talk about the calling sequence of component life cycle in Vue

The calling order of components is parent first, then child, and the order of rendering is child first, then parent.

The destruction operation of the component is the parent first, then the child, and the order of destruction is the first child and then the parent.

Load rendering process

father beforeCreate-> father created-> father beforeMount-> child beforeCreate-> child created-> child beforeMount- > child mounted-> father mounted

Subcomponent update process:

father beforeUpdate-> child beforeUpdate-> child updated-> father updated

Parent component update process:

father beforeUpdate -> father updated

Destruction process:

father beforeDestroy-> child beforeDestroy-> child destroyed-> father destroyed

🆗18. What are the ways of Vue2.x component communication

  • Parent-child component communication

father -> child props, child -> father $on , $emit

Get parent-child component instance $parent , $children

The way Ref gets the instance to call the property or method of the component

Provide and inject are officially not recommended, but they are commonly used when writing component libraries

  • Sibling component communication

Event Bus implements cross-component communication Vue.prototype. $bus = new Vue


  • Cross-level component communication




🅿️19. What is SSR

SSR is server-side rendering, that is, the work of Vue rendering tags into HTML on the client side is completed on the server side, and then the HTML is directly returned to the client side.

SSR has the advantages of better SEO and faster loading above the fold. However, it also has some disadvantages, such as our development conditions will be limited.

Server-side rendering only supports two hooks beforeCreate and created, and special handling is required when we need some external extension libraries.

Server-rendered applications also need to be in the Node.js runtime environment. In addition, the server will have a larger load demand.

🆙20. What Vue performance optimizations have you done?

encoding phase

Try to reduce the data in the data, the data in the data will increase the getter and the setter, and the corresponding watcher will be collected

v-if and v-for cannot be used together

If you need to use v-for to bind events to each element, use event delegates

SPA pages use the keep-alive cache component

In more cases, use v-if instead of v-show

The key is guaranteed to be unique

Lazy loading, asynchronous components using routing

Anti-shake, throttling

Import third-party modules on demand

Scroll long list to viewable area to load dynamically

Image lazy loading

SEO optimization


Server-side rendering SSR

Packaging optimization

compressed code

Tree Shaking/Scope Hoisting

Load third-party modules using cdn

Multi-threaded packaging happypack

splitChunks extracts public files

sourceMap optimization

user experience

Skeleton screen


You can also use cache (client-side cache, server-side cache) optimization, and enable gzip compression on the server side.

🆚21. Let’s talk about the implementation principle of hash routing and history routing

hash mode


  • The hash value after the # in the url corresponds to the hash value. The principle is to monitor the change of the hash value through the hashChange() event, and to load the corresponding component according to the hash value corresponding to the routing table.


  • Only the front-end needs to configure the routing table, and the back-end does not need to be involved.

  • Compatibility is good, and browsers can support it.

  • The hash value change will not send a request to the backend, and it belongs to the frontend route entirely.


  • The hash value needs to be prefixed with #, which does not conform to the url specification and is not beautiful.

history mode:


  • Using History_API to switch routes, the history stack is mentioned on mdn.

  • Explain that its storage situation is a stack structure.


  • It conforms to the url address specification, no # is required, and it is more beautiful to use.


  • When the user manually enters the address or refreshes the page, a url request will be initiated. The backend needs to configure the index.html page if the user cannot match the static resources, otherwise a 404 error will occur.

  • The compatibility is relatively poor. It uses the new pushState() and replaceState() methods in the HTML5 History object, which requires the support of specific browsers.


  • In general, both routing modes can be used, and specific usage scenarios can be selected based on the advantages and disadvantages of the above two modes.

🌟 Author related articles and resource sharing 🌟

🌟Let the world have no skills that cannot be learned🌟

Learning C# is no longer difficult

🌳《C# Beginner to Advanced Tutorial》🌳

About C# practical projects

[👉C#RS232C communication source code👈]

👉C# delegated data transfer 👈

[👉C# Modbus TCP source code👈]

[👉C# warehouse management system source code👈]

👉C# Omron Communication Demo👈

👉C# Omron Communication Demo👈

👉2021C# and Halcon visual common framework 👈

✨For C# projects, please check your personal homepage✨

🌟Machine Vision, Deep Learning 🌟

🌌《Halcon Beginner to Master》🌌

🌌《Deep Learning Materials and Tutorials》🌌

About machine vision, deep learning combat

[👉2021 C#+HALCON visual software 👈]

👉In 2021, C#+HALCON will implement template matching 👈

[👉C# integrates Halcon’s deep learning software 👈]

[👉C# integrates Halcon’s deep learning software with [MNIST example] dataset 👈]

[👉C# halcon WPF open source form control that supports proportional scaling and dragging👈]

👉Labview and HALCON in 2021👈

👉2021 Labview and Visionpro 👈

👉Based on Halcon and VS brake pad thickness automatic recognition module for EMUs👈

✨For machine vision and deep learning practice, please check your personal homepage✨

🌟Java, database tutorials and projects 🌟

🍏《Introduction to JAVA to Advanced Tutorial》🍏

🍏《Database Introduction to Advanced Tutorial》🍏

About Java, database project combat

[👉Java classic nostalgic Xiaobawang web game console source code enhanced version👈]

[👉Java property management system + applet source code👈]

👉Design and implementation of JAVA hotel room reservation management system SQLserver👈

[👉JAVA book management system research and development MYSQL👈]

✨For Java, database tutorials and project combat, you are welcome to check your personal homepage✨

🌟Share Python knowledge to explain and share🌟

🥝《Python knowledge and project column》🥝

🥝《Python Detecting Whether Douyin Follows Account Is Banned》🥝

🥝《Teach you how to install and use Python+Qt5》🥝

🥝 “Take 10,000 words to give Xiaobai a comprehensive explanation of the basics of python programming ” 🥝

🥝《Python draws Android CPU and memory growth curve》🥝

About Python project combat

👉Python based on Django book management system 👈

👉Python management system👈

[👉9 commonly used python crawler source code in 2021👈]

👉python QR code generator 👈

✨For Python tutorials and projects, you are welcome to check your personal homepage✨

🌟Share interview questions and interview process of major companies🌟

🍏《2021 Golden Nine Silver Ten Newest VUE Interview Questions☀️》❤️Remember to Collect ❤️》🍏

🍏” As long as you read 10,000 words carefully☀️Basic knowledge of Linux operating system☀️You will beat the interviewer every minute “❤️Remember to bookmark ❤️” “🍏

🍏《 ❤️Use 10,000 words to give Xiaobai a comprehensive explanation of the basics of python programming ❤️《😀Remember to save it or you will disappear after watching it😀》》🍏

✨For the interview questions and interview process of major companies, please check your personal homepage✨

🏳️‍🌈 Follow Suzhou Program Dabai and keep updating technology sharing. Thank you all for your support 🏳️‍🌈

❤️Follow Suzhou program Dabai public account ❤️

👇 👇👇

Leave a Reply

Your email address will not be published.