Introduction to vue interview questions (with answers)

This article brings you an introduction to Vue interview questions (with answers). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Vue is becoming more and more popular. Looking at domestic and foreign countries, Vue has a wide range of applications, whether it is large companies such as BAT or start-up companies. During the interview, Vue-related technical principles must also be tested. It can be said that for any front-end engineer, mastering Vue may not be an option, but more like a "required course".

Many people working on Vue projects directly use element ui and other UI frameworks. Although these frameworks help us a lot in terms of efficiency, they actually do not improve our technology at all. You will definitely not be able to answer the Vue core technology asked by the interviewer.

For a developer, if you only know how to use a technical framework and never understand the implementation principles and design ideas behind the core technology in this framework, I You will definitely not go far on the road of technology. As a developer, I have a very deep experience. Here I would like to give you a heart-warming recommendation. The author of the UI framework ant Design vue launched a UI framework in Geek Time. The course is called Vue Development Practical (there is a purchase link at the bottom of the article). I also purchased this course myself, and I think the lectures are good. It will help you master the technical principles and applications of Vue, and you will also have an understanding of its underlying principles. Through practical projects, you will be able to independently take charge of Vue front-end projects. The ability will be very helpful for your job hopping, interviews and getting started with Vue. Many buyers, including myself, also feel that it is full of useful information. Recommended to everyone in need.

Okay, let’s get to the point. Today I will bring you some advanced interview questions about Vue.

1. What is MVVM?
Answer: MVVM is the abbreviation of Model-View-ViewModel. Model represents the data model and defines the business logic of data operations. View represents the view layer and is responsible for rendering the data model to the page. ViewModel is bound through two-way binding. A design idea that allows View and Model to interact synchronously without manually manipulating the DOM.

2. How to define dynamic routing of vue-router? How to get the passed dynamic parameters?
Answer: In the index.js file in the router directory, add /:id to the path attribute. Using the params.id of the router object

3. What kind of navigation hooks does vue-router have?
Answer: Three types. One is the global navigation hook: router.beforeEach(to,from,next). Its function is to judge and intercept before jumping. The second type: hooks within components; the third type: independent routing of exclusive components

4. What is vuex? how to use? Which functional scenario uses it?
Answer: State management in the vue framework. Introduce store into main.js and inject it. A new directory store is created,...export. Scenarios include: status between components in a single-page application. Music playback, login status, adding to shopping cart

5. What is the difference between MVVM and MVC? How is it different from other frameworks (jquery)? Which scenarios apply?
Answer: MVVM and MVC are both design ideas. The main thing is that the Controller in MVC evolves into a ViewModel. MVVM mainly displays the view layer through data instead of operating nodes, which solves a large number of DOM operations in MVC. The page rendering performance is reduced, the loading speed is slow, and the user experience is affected. Mainly used in scenarios with a lot of data operations.
Scenario: Scenarios with a lot of data operations, more convenient

6. What is the principle of two-way data binding of Vue company?
Answer: vue.js uses data hijacking combined with the publisher-subscriber model. It uses Object.defineProperty() to hijack the setters and getters of each property, and publishes messages to subscribers when the data changes. Trigger the corresponding listening callback.

7. Please tell me the process of encapsulating vue components?
Answer: First of all, components can improve the development efficiency of the entire project. They can abstract the page into multiple relatively independent modules, solving the problems of our traditional project development: low efficiency, difficult maintenance, reusability and other problems.

Then, use the Vue.extend method to create a component, and then use the Vue.component method to register the component. Child components require data, which can be defined in props. After the child component modifies the data, it wants to pass the data to the parent component. You can use the launch method

8. Talk about your understanding of template compilation of Vue.js
Answer: In short, it is converted into an AST tree first, and then obtained The rendering function returns VNODE (Vue company's virtual DOM node)
Detailed steps:

First, compile the template into an AST syntax tree (abstract syntax tree is the tree of the abstract syntax structure of the source code) through the compiler representation), compilation is the return value of createCompiler, which is used to create a compiler. Responsible for merging options.

Then, the AST will be generated (the process of converting the AST syntax tree into a rendering function string) to obtain the rendering function. The return value of the rendering is VNode. VNode is the virtual DOM node of Vue, which contains (label name , child nodes, text, etc.)

9. What is the function of and how to use it?
Answer: When wrapping dynamic components, inactive component instances will be cached, mainly to retain component status or avoid re-rendering;
Usage: Simple page
Cache:
Do not cache:

10. The difference between vue and react
Answer: Similar points: both encourage componentization, have the concept of 'props', and have their own construction tools. Reat and Vue only have the skeleton of the framework, and other functions such as routing , state management, etc. are components separated by the framework.

Differences: React: one-way data flow, syntax - JSX, in React you need to use the setState() method to update the state. Vue: Two-way binding of data, syntax - HTML, state object is not required, data is managed in Vue object by data attribute. Suitable for small applications, but not suitable for large applications.

11. What are the similarities and differences between the v-show and v-if instructions?
The v-show instruction makes it display or hide by modifying the displayCSS attribute of the element. The
v-if instruction directly destroys and rebuilds the DOM to display and hide elements.

12. The difference between $route and $router
Answer: $route is a "routing information object", including path, params, hash, query, fullPath, matched, name, etc. Routing information parameters. And $router is a "routing instance" object that includes routing jump methods, hook functions, etc.

13. The role of key values ​​in vue
Answer: When using Vue.js When v-for is updating a list of rendered elements, it defaults to an "in-place reuse" strategy. If the order of the data items is changed, Vue will not move the DOM elements to match the order of the data items, but will simply reuse each element there and make sure it displays each element that has been rendered at a specific index. The main function of key is to efficiently update the virtual DOM

This article has ended here. For more other exciting content, you can pay attention to the JavaScript Tutorial Video column of the PHP Chinese website!

Related recommendations:

《vue interview questions》、《 Front-end interview questions》

The above is the detailed content of Introduction to vue interview questions (with answers). For more information, please follow other related articles on the PHP Chinese website!