Interview question Union VUE chapter
1.SPA single page understanding
SPA (Single-Page Application) loads the corresponding HTML, JavaScript, and CSS only when the Web page is initialized. Once the page is loaded, SPA will not reload or jump the page because of the user’s operation. Instead, routing mechanisms are used to transform HTML content, interact with the user and avoid page reloading.
Advantages:
User experience is good, fast, content change does not need to reload the whole page, avoid unnecessary jump and repeated rendering;
Based on the above point, SPA exerts less pressure on the server.
The responsibilities of the front and back end are separated, and the architecture is clear. The front end carries out interactive logic, and the back end is responsible for data processing.
Disadvantages:
Time-consuming initial loading: To achieve single-page Web application functions and display effects, you need to load JavaScript and CSS in a unified manner. Some pages are loaded as required.
Forward and backward routing management: Because a single page application displays all content on a page, it cannot use the browser’s forward and backward function. All page switches need to build their own stack management.
SEO is difficult: because all content is displayed dynamically on a page, SEO has a natural disadvantage.
2. What is the difference between V-show and V-IF?
V-if is true conditional rendering because it ensures that event listeners and subcomponents within the conditional block are properly destroyed and rebuilt during the switch; Also short-circuited: if the condition is false during the initial render, nothing is done — the conditional block does not start rendering until the condition is true for the first time.
V-show is much simpler — elements are always rendered regardless of initial conditions, and simply switch based on the “display” property of CSS.
Therefore, V-IF is suitable for scenarios where conditions are rarely changed at runtime and do not need to be switched frequently; V-show is suitable for scenarios that require very frequent switching of conditions.
What are the differences and application scenarios between 3.com Puted and Watch?
Computed: Computed attributes depend on other attribute values, and computed values are cached. Only when the dependent attribute values change, computed values will be recalculated the next time it obtains computed values.
Use computed when you need to do numerical calculations and rely on other data, because you can take advantage of the caching nature of computed and avoid recalculating each time you get a value.
Watch: It is more of a function of “observation”, similar to the listening callback of some data. Whenever the monitored data changes, the callback will be executed for subsequent operations.
Watch should be used when we need to perform asynchronous or expensive operations when data changes. Using the Watch option allows us to perform asynchronous operations (accessing an API), limits how often we perform that operation, and sets the intermediate state until we get the final result. These are all things you can’t do with computed properties.
4. Why is data a function
The data in the component is written as a function, and the data is defined as the return value of the function. In this way, each time the component is reused, a new data is returned, similar to creating a private data space for each component instance and letting each component instance maintain its own data.
However, simply writing in object form makes all component instances share a copy of data, which will cause a result that all changes will change.
5. What is your understanding of the Vue lifecycle?
A Vue instance has a full life cycle, that is, from the start of creation, initialization of data, compilation of templates, Dom mounting -> render, update -> render, uninstall, etc. We call this the life cycle of a Vue.
Life cycle function:
BeforeCreate: at the beginning of the component instance creation and before the component properties take effect
Created: The component instance is fully created and the properties are bound, but the real DOM has not been generated and $EL is not available
BeforeMount: Called before the mount begins: The related render function is called for the first time
Mounted: This hook is invoked after the vm.$el is mounted to the instance
BeforeUpdate: Called before component data is updated and occurs before the virtual DOM is patched
Update: After component data is updated
Activited: Exclusive to keep-alive, invoked when the component is activated
Deactivated: This parameter is exclusive to keep-alive and is invoked when a component is destroyed
BeforeDestory: Called before component destruction
Destoryed: invoked after component destruction
6. Communication between components
Parent/props/ Event children ref provide/inject
Brother bus vuex
Cross-level Bus VUEX provides inject
7. Principle of bidirectional binding
The core API is to hijack setters/getters for individual properties via Object.defineProperty(). Publishing messages to subscribers when data changes, triggering corresponding listening callbacks, which is why VUe.js 2.x does not support IE8 (IE8 does not support this API and cannot be implemented via Polyfill)
8. Introduce nextTick ()
A deferred callback is performed after the next DOM update loop ends. Immediately after modifying the data, use this callback function to get the updated DOM.
- ounter(line
- ounter(line
- ounter(line
- ounter(line
- ounter(line
- ounter(line
// Modify the dataCopy the codevm.msg = 'Hello'Copy the code// DOM has not been updatedCopy the codeVue.nextTick(function () {Copy the code/ / update the DOMCopy the code})Copy the code
9. In which lifecycle is the asynchronous request invoked?
You can call hook functions created, beforeMount, and Mounted because in these three hook functions, data is already created and can be assigned to the data returned by the server. However, I recommend calling an asynchronous request from a Created hook function, because calling an asynchronous request from a Created hook function has the following advantages:
The server data can be obtained faster, reducing page loading time.
SSR does not support beforeMount and Mounted hook functions, so creating helps consistency.
10. What kinds of navigation hooks does vue-Router have?
Three,
BeforeEach (to,from,next) intercepts before jumping.
Second: hooks within components
Third: separate route exclusive component
11. What is the MVVM framework? Which scenarios fit?
A model+ View +viewModel framework, data model model, viewModel connect two
Difference: VUE is data-driven, showing the view layer through data rather than node operations.
Scenario: A scenario in which many data operations are performed
12. A brief introduction to Vuex
Vuex is a state management mode developed specifically for vue.js applications. At the heart of every Vuex application is the Store. A “store” is basically a container that contains most of the states in your app.
(1) The state storage of Vuex is responsive. When the Vue component reads the state from the Store, if the state in the store changes, the corresponding component is updated efficiently accordingly.
(2) The only way to change the state in a store is to explicitly commit mutation. This allows us to easily track each state change.
It mainly includes the following modules:
State: Data structure that defines the State of the application, where the default initial State can be set.
Getter: Allows the component to get data from the Store. The mapGetters helper function simply maps the getters in the Store to local computed properties.
Mutation: is the only method that changes the state in the store, and must be a synchronization function.
Action: Used to commit mutation rather than directly change the state, and can include any asynchronous operation.
Module: Allows you to split a single Store into multiple stores and Store them simultaneously in a single state tree.
13. How many vue-router routing modes are there?
Vue-router has three routing modes: hash, history, and Abstract. The three routing modes are described as follows:
Hash: Uses the URL hash value for routing. Support for all browsers, including those that don’t support the HTML5 History Api;
History: Relies on the HTML5 History API and server configuration. See the HTML5 History mode;
Support all JavaScript runtime environments, such as node.js server side. If the browser API is not found, routing automatically forces the mode into this mode.
14.Proxy vs. Object.defineProperty (Vue3.0 uses Porxy)
Advantages of Proxy are as follows:
Proxies can listen directly on objects rather than properties;
Proxy can listen for array changes directly;
Proxy has up to 13 interception methods, not limited to apply, ownKeys, deleteProperty, has, etc. Object. DefineProperty does not have;
Proxy returns a new Object. We can only manipulate the new Object to achieve our purpose. Object.defineproperty can only be modified by iterating through Object attributes.
Proxy as the new standard will be subject to browser vendors focus on continuous performance optimization, which is the legendary performance bonus of the new standard;
Object.defineproperty has the following advantages:
It has good compatibility and supports IE9, but Proxy has browser compatibility problems and cannot be smoothed by Polyfill. Therefore, the author of Vue announced that Proxy can be rewritten until the next big version (3.0).
15. How does Vue solve the problem that new object attributes cannot respond?
Vue could not detect the addition or deletion of object attributes. Since Vue performs getter/setter conversions on the property when it initializes the instance, the property must exist on the data object for Vue to convert it to reactive.
$set (Object, propertyName, value)/vm. set (object, propertyName, value) to add responsive properties to an object
16. What can be optimized for the Vue project? (Bonus)
(1) Optimization at the code level
V-if and V-show are used in different scenarios
Computed and Watch distinguish usage scenarios
V-for traversal must add a key to the item and avoid using v-if at the same time
Long list performance optimization
Destruction of events
Lazy loading of image resources
Route lazy loading
The introduction of third-party plug-ins on demand
Optimize infinite list performance
Server render SSR or prerender
(2) Optimization of Webpack level
Webpack compresses images
Reduce redundant code from ES6 to ES5
Extract common code
Template precompilation
Extract the COMPONENT’s CSS
Optimize SourceMap
Build results output analysis
Compilation optimization of Vue project
(3) Optimization of basic Web technology
Enable Gzip compression
Browser cache
The use of CDN
Use Chrome Performance to find Performance bottlenecks