Shulou(Shulou.com)05/31 Report--

This article mainly introduces "what are the vue front desk interview questions". In the daily operation, I believe many people have doubts about the vue front desk interview questions. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the questions of "what are the vue front desk interview questions?" Next, please follow the editor to study!

Several schemes of 1.vue performance Optimization

1. If you choose the use of v-if and v-show correctly, v-if has higher switching consumption and v-show has higher initial consumption.

two。 Lazy routing loading: when there are many pages and many components, SPA pages become slow when they are first loaded. This is because vue loads components that may not be visible at first when it loads for the first time, so the page needs to be optimized and asynchronous components are needed.

3. Caching: spa pages using keep-alive caching components

4. Lazy loading of pictures: improve the loading speed of the page. Images that are not in the visual area are not loaded first, but only when scrolling to the visual area. It usually relies on external plug-ins such as vue-lazyload. Use as long as you want to npm install vue-lazyload and then the page is introduced.

5.SEO optimization: ssr server rendering

6. Packaging optimization: use cdn to import files for a small number of oversized packages instead of downloading them directly to the local area.

Who has better performance, 2.v-show or v-if?

The essence of v-show is to control the display in css to be set to none, control hiding, and only compile times; v-if is to dynamically add or delete DOM elements into the DOM tree, if the initial value is false, it will not be compiled. "and the constant destruction and creation of v-if consumes more performance. So if you want to switch frequently, then v-show performance is higher, if not frequent switching, v-if performance is higher.

Data transfer between 3.vue

Father to son: props

Child to parent: $emit sets the event itself

Delivery of complex components: through vuex

4. How to make styles take effect only in the current component in a single file component

Precede the style in the component with scoped

Life cycle in 5.vue (hook function)

There are 8 hook functions in total. There are 8 basic hook functions and 2 hook functions in keep-alive.

BeforeCreate (before creation) / created (after creation) / beforeMount (before mount) / mounted (after mount) beforeUpdate (before upgrade) / updated (after upgrade) / beforeDestroy (before destruction) / destroyed (after destruction)

BeforeCreate, created, beforeMount and mounted hooks will be triggered when the page is loaded for the first time.

In addition, in keep-alive, vue added two new hook functions

Activated: because components that use keep-alive are cached, hook functions like created,mounted are only executed once. If our subcomponents need to do something each time they are loaded, they can be triggered with activated hooks.

Deactivated: used when components are removed.

Execution order of the life cycle of 6.vue parent and child components

Load render passes

Father beforeCreate- > father created- > father beforeMount- > son beforeCreate- > son created- > son beforeMount- > son mounted- > father mounted

Subcomponent upgrade process

Parent beforeUpdate- > Child beforeUpdate-> Child updated- > parent updated

Parent component upgrade process

Parent beforeUpdate- > parent updated

Destruction process

Parent beforeDestroy- > Child beforeDestroy-> Child destroyed- > parent destroyed

7. How to get DOM elements in vue

Add a ref attribute to the element and get it through this.$refs.domName

The role of 8.key

Need to use key to make a unique identification for each node, Diff algorithm can correctly identify this node.

The main purpose is to upgrade virtual DOM efficiently.

Usage scenario of 9.$nextTick (role)

Because the data upgrade in vue is asynchronous, when you modify the value of data and immediately get the value of this dom element, you cannot get the upgraded value.

You need to use the callback of $nextTick to get the modified data value rendering after upgrading to the dom element to be successful.

Priority of 10.v-if and v-for

When v-if is used with v-for, v-for has a higher priority than v-if, which means that v-if will be run repeatedly in each v-for loop. Therefore, using v-if and v-for at the same time is not recommended. If you have to use it together, you can put v-if on the outer element, or instead of v-if, pick out the data in the evaluation attribute first, and then in the v-for

The principle of 11.v-model

Vue two-way data binding is realized through data hijacking combined with publish and subscribe mode, that is, data and view are synchronized, the data changes, the view changes, the view changes, and the data changes accordingly.

Core: the core of VUE bidirectional data binding is the Object.defineProperty () method.

twelve。 What is mvvm?

MVVM takes two-way data binding (data-binding) as the core idea. There is no contact between View and Model. They interact through the bridge of ViewModel.

The interaction between Model and ViewModel is bi-directional, so changes in View are automatically synchronized to Model, and changes in Model are immediately reflected in View.

When the customer operation View,ViewModel perceives the change, and then notifies the Model of the corresponding change; on the contrary, when the Model changes, the ViewModel can also perceive the change and make the View upgrade accordingly.

13. How to optimize the slow loading speed of the first screen of SPA applications

The common JS library is introduced outside the script tag to reduce the size of app.bundel, let the browser download resource files in parallel, and improve the download speed.

When routing is configured, pages and components are introduced by lazy loading to further reduce the size of the app.bundel and load the corresponding js file when a component is called

Add a loading picture on the first screen to enhance the customer experience

Two modes of 14.vue routing, the difference between hash and history

Hash-the # symbol in the address bar URL (this hash is not a hash operation in cryptography).

For example, the value of this URL:ABC Home Page-ABC.com is # / hello. Its characteristic is that although hash appears in URL, it is not included in the HTTP request and has no effect on the background at all, so changing hash will not reload the page.

History-takes advantage of the newly added pushState () and replaceState () methods in HTML5 History Interface. (specific browser support is required)

These two methods are applied to the history stack of the browser. On the basis of the existing back, forward and go, they provide the function to modify the history record. It's just that when they make changes, the browser does not immediately send a request to the background, even though the current URL has been changed.

Therefore, it can be said that both hash mode and history mode belong to the browser's own characteristics, and Vue-Router only makes use of these two features (by calling the interface provided by the browser) to achieve foreground routing.

Attention! In history mode, the url of the foreground must be the same as the url that actually initiates the request to the background, such as http://www.abc.com/book/id. If a routing resolution for / book/id is missing in the background, a 404 error will be returned. Refresh will also report 404 because it will actually request data. (it needs to be configured in the background. For details on vue's official website)

15. How to deal with the problem of missing vuex data refresh

Because the data in store is stored in running memory, when the page is refreshed, the page will reload the vue instance, and the data in store will be re-assigned.

How to deal with:

One is that all data in state is changed by triggering action or mutation through request (not recommended, it is not applicable when many items of vuex data are very large)

One is to save a copy of the data in state to local storage (localStorage, sessionStorage, cookie) (recommended)

How to realize Cross-domain access in 16.vue

1. Development environment: configuring vue.config.js proxy agents

two。 Production environment: configuring nginx agents

At this point, the study on "what are the vue front desk interview questions" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.