Analysis of 15 common Vue interview questions

1. Advantages of vue?

Answer:

• Lightweight framework: only focuses on the view layer, which is a collection of views that builds data, with a size of only a few dozen <span style="font-size: 14px;">kb</span>#;

• Easy to learn: developed by Chinese, Chinese documents, no language barriers, Easy to understand and learn;

• Two-way data binding: retains <span style="font-size: 14px;">angular</span> Features, simpler in data operations;

• Componentization: retained <span style="font-size: 14px;">react</span># The advantages of ## realize the encapsulation and reuse of html<span style="font-size: 14px;"></span>, and have unique advantages in building single-page applications;

• Separation of views, data, and structures: making data changes simpler, without the need to modify the logic code, and only need to operate the data to complete related operations;

• Virtual DOM: dom<span style="font-size: 14px;"></span> The operation is very performance-intensive, and the native one is no longer used dom<span style="font-size: 14px;"></span> Operating nodes greatly liberates dom<span style="font-size: 14px;"></span> operations, but the specific operations are still dom<span style="font-size: 14px;"></span> It’s just another way;

• runs faster: compared to react<span style="font-size: 14px;"></span> In terms of performance, it is also a virtual operation dom<span style="font-size: 14px;"></span> , vue<span style="font-size: 14px;"></span> has great advantages.

#2.Vue parent component passes data to child components?

Answer: Through

props

3. Does the child component pass events like the parent component?

Answer:

$emit Method

4. What are the similarities and differences between the v-show and v-if instructions?

Answer:

Common points: Both can control the display and hiding of elements;

Differences: The essential methods of implementation are different,

v-show The essence is to set the display in the css to none, the control is hidden, and it will only be compiled once; v-if is dynamically moved into the DOM tree Add or delete DOM elements. If the initial value is false, it will not compile. Moreover, v-if, constant destruction and creation consumes performance. Summary: If you want to switch a node frequently, use v-show (the switching overhead is relatively small, but the initial overhead is large). If you do not need to switch a node frequently, use v-if (the initial rendering overhead is small, but the switching overhead is relatively large).
If you know all the above, it means you have passed with 60 points. In addition, now that vue3.0 is out, you will usually be asked when looking for a job, if you haven't learned it yet. You can go to the editor's front-end button skirt 519293536 to communicate and learn. There are many big guys there, and they also share information on new front-end technologies!

5. How to make CSS only work in the current component?

Answer: Add

in front of style in the component scoped

6. What is the function?

Answer:

keep-alive is a built-in component of Vue that can be Contained components retain state, or avoid re-rendering.

7. How to get dom?

Answer:

ref="domName" Usage: this.$refs.domName

8. Name several instructions in vue and their usage?

Answer:

v-model Two-way data binding;

v-for Loop;

v-if v-show Show and hide;

v-on Event; v-once: Bind only once.

9. What is vue-loader? What are the uses for using it?

Answer: A loader for vue files that converts template/js/style into js modules.

Usage: js can be written es6, style style can be scss or less, template You can add jade etc.

10. Why use key?

Answer: You need to use key To make a unique identification for each node, Diff algorithm can correctly identify this node. The main function is to update the virtual DOM efficiently.

11.axios and installation?

Answer: Module that requests background resources. npm install axios —save After installation, use import in js, then .get or .post. The return is in the .then function if successful, and the failure is in the .catch function.

12. The use of v-modal

Answer: v-model is used for two-way binding of form data. In fact, it is a syntax Sugar, there are two operations behind this: v-bind binds a value attribute; v-on instruction binds the current element input event.

13. Please tell me the usage of each folder and file in the src directory in the vue.cli project?

Answer: assets folder is for static resources; components is for components; router is for defining routing-related configurations; app.vue is an application main component; main.js is the entry file.

14. Briefly describe the usage scenarios of computed and watch respectively

Answer:

• ##computed <span style="font-size: 14px;"></span> : When an attribute is affected by multiple attributes, you need to use computed<span style="font-size: 14px;"></span>, the most typical example: shopping When checking out car products

• watch<span style="font-size: 14px;"></span>: You need to use # when one piece of data affects multiple pieces of data. ##watch<span style="font-size: 14px;"></span>#, Lizi: Search data

15.v-on can monitor multiple Method?

Answer: Yes, chestnut:

.
Recommended tutorial: "

JS Tutorial

"

The above is the detailed content of Analysis of 15 common Vue interview questions. For more information, please follow other related articles on the PHP Chinese website!