2021 Golden Nine Silver Ten latest VUE interview questions☀️《❤️Remember to collect ❤️》
2021 Golden Nine Silver Ten latest VUE interview questions☀️《❤️Remember to collect ❤️》
- Table of contents
🏳️🌈 Lecture starts! ! ! ! 🏳️🌈Suzhou Procedures 🏳️🌈
- :capital_abcd:1, talk about MVVM
- :abcd:2, Vue2.x Responsive Data Principle
- :1234:3, Vue3.x responsive data principle
- :symbols:4, how to monitor array changes in vue2.x
- :abc:5, do you know nextTick, what is the realization principle?
- :a:6, the life cycle of Vue
- :ab:7. Which life cycle is the interface request generally placed in?
- :b:8. Talk about Computed and Watch
- :cl:9, the difference between v-if and v-show
- :cool:10. Why is the data in the component a function?
- :free:11. The principle of v-model
- :information_source:12. Let’s talk about the principle of Vue event binding
- :id:13, what is the principle of Vue template compilation
- :m:14, what are the diff algorithms of Vue2.x and Vue3.x renderers respectively
- :new:15. Talk about the role of virtual Dom and key attributes
- :ng:16. Do you understand keep-alive?
- :o2:17. Let’s talk about the calling sequence of component life cycle in Vue
- :ok:18. What are the ways of Vue2.x component communication
- :parking:19. What is SSR?
- :up:20. What Vue performance optimizations have you done?
- :vs:21. Let’s talk about the implementation principle of hash routing and history routing
- 🌟 Author related articles and resource sharing 🌟
- 🏳️🌈 Follow Suzhou Program Dabai and keep updating technology sharing. Thank you all for your support 🏳️🌈
Table of contents
|🏳️🌈 Lecture starts! ! ! ! 🏳️🌈Suzhou Procedures 🏳️🌈|
🔠1. Talk about [MVVM]
Model-View-ViewModelabbreviation , that is, the
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
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
The collection of dependencies:
renderthe process of triggering the getter of the data, and collecting the current watcher object during the getter.
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
Promise MutationObserver setImmediate
If none of the above work, use
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.
🅰️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
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
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
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
v-ifhigher switching consumption; v-show has higher initial rendering consumption
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
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
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
🆔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
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
Diffbe optimized, starting from
O(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.
Virtual DOMborrows from the open source library
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
“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.
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
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 Vuex
- Cross-level component communication
Vuex $attrs、$listeners Provide、inject
🅿️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?
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
Import third-party modules on demand
Scroll long list to viewable area to load dynamically
Image lazy loading
Server-side rendering SSR
Tree Shaking/Scope Hoisting
Load third-party modules using cdn
Multi-threaded packaging happypack
splitChunks extracts public files
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
- 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.
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
About C# practical projects
[👉C#RS232C communication source code👈]
[👉C# Modbus TCP source code👈]
[👉C# warehouse management system source code👈]
✨For C# projects, please check your personal homepage✨
🌟Machine Vision, Deep Learning 🌟
About machine vision, deep learning combat
[👉2021 C#+HALCON visual software 👈]
[👉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👈]
✨For machine vision and deep learning practice, please check your personal homepage✨
🌟Java, database tutorials and projects 🌟
About Java, database project combat
[👉Java classic nostalgic Xiaobawang web game console source code enhanced version👈]
[👉Java property management system + applet source code👈]
[👉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🌟
About Python project combat
[👉9 commonly used python crawler source code in 2021👈]
✨For Python tutorials and projects, you are welcome to check your personal homepage✨
🌟Share interview questions and interview process of major companies🌟
✨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 ❤️