1. Vue related
1. Advantages of vue?
Answer: Lightweight framework: It only focuses on the view layer, which is a collection of views that builds data, with a size of only tens of kb; Simple and easy to learn: developed by Chinese, Chinese documents, no language barriers, easy to understand and learn; Two-way data binding: It retains the characteristics of Angular and is simpler in data operations; Componentization: It retains the advantages of React, realizes the encapsulation and reuse of HTML, and has unique advantages in building single-page applications; Separation of views, data, and structures: using Data changes are simpler, and there is no need to modify the logic code. You only need to operate the data to complete the relevant operations; Virtual DOM: DOM operations are very performance-consuming. Native DOM operation nodes are no longer used, which greatly liberates DOM operations. , but the specific operation is still dom, but it is just another way; faster running speed: compared with react, it also operates virtual dom. In terms of performance, vue has great advantages.
2.Vue parent component passes data to child components?
Answer: Through props
3. Does the child component pass data to the parent component?
Answer: $emit method
4.What are the similarities and differences between v-show and v-if instructions?
Answer: Common points: Both can control the display and hiding of elements; Differences: The implementation methods are different. The essence of v-show is to control the hiding by setting the display in css to none, and it will only be compiled once; v-if is dynamic Add or delete DOM elements to the DOM tree. If the initial value is false, it will not be compiled. Moreover, the constant destruction and creation of v-if 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 don't need to switch a node frequently, use v-if (the initial rendering overhead is small, but the switching overhead is relatively large).
5. How to make CSS only work in the current component?
Answer: Add scoped in front of the style in the component
6. What is the role of keep-alive?
Answer: keep-alive is a built-in component of Vue that allows included components to retain their 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 display and hide; v-on event; v-once: only bind 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. Purpose: js can be written in es6, style can be scss or less, template can be added with jade, etc.
10. Why use key?
Answer: You need to use key to uniquely identify each node, so that the Diff algorithm can correctly identify this node. The main function is to update the virtual DOM efficiently.
11. How to define the dynamic routing of vue-router and how to obtain the passed dynamic parameters?
Answer: In the index.js file in the router directory, add /:id to the path attribute.
Use the params.id of the router object.
12.Use of v-modal.
Answer: v-model is used for two-way binding of form data. In fact, it is a syntactic sugar. It does two operations behind it: v-bind binds a value attribute; v-on instruction binds an input event to the current element. .
13. Please tell me the usage of each folder and file in the src directory in the vue.cli project?
Answer: The 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: When an attribute is affected by multiple attributes, computed needs to be used.
The most typical example: When checking out items in the shopping cart
watch: When one piece of data affects multiple pieces of data, you need to use watch
Example: Search data
15.Can v-on listen to multiple methods?
Answer: Yes
16. How to use $nextTick
: When you modify the value of data and then immediately get the value of the dom element, you cannot get the updated value. You need to use the $nextTick callback to let the modified data value be rendered and updated to The DOM element must be obtained later to succeed.
17.Why does data in the vue component have to be a function?
Answer: Due to the characteristics of JavaScript, in component, data must exist in the form of a function and cannot be an object. The data in the component is written as a function, and the data is defined in the form of function return value, so that every time the component is reused, a new data will be returned, which is equivalent to each component instance having its own private data space. They only Responsible for maintaining their own data without causing confusion. If simply written in object form, all component instances share the same data, so changing one of them will change all of them.
18. Understanding of the progressive framework
Answer: The least advocated; different levels can be selected according to different needs;
19.How is two-way data binding implemented in Vue?
Answer: Vue two-way data binding is achieved through data hijacking combined with the publish-subscribe model. That is to say, the data and the view are synchronized, the data changes, the view changes accordingly, and the view changes, the data also changes; Core: About VUE two-way data binding, the core of which is the Object.defineProperty() method.
20. The differences, advantages and disadvantages between single-page applications and multi-page applications.
Answer: Single-page application (SPA), in layman’s terms, refers to an application with only one main page. The browser must load all necessary html, js, and css at the beginning. All page content is contained in this so-called main page. But when writing, they will still be written separately (page fragments), and then dynamically loaded by the routing program during interaction. Single-page page jumps only refresh local resources. Mostly used on PC. Multi-page (MPA) means that there are multiple pages in an application. When the page jumps, the whole page is refreshed. The advantages of a single page are: the user experience is good and fast, and the content changes do not need to reload the entire page. Based on this, spa There is less pressure on the server; the front and back ends are separated; the page effects will be cooler (such as special animations when switching page content). Disadvantages of single page: Not conducive to SEO; navigation is not available. If you must navigate, you need to realize forward and backward by yourself. (Because it is a single page and you cannot use the browser's forward and backward functions, you need to build your own stack management); it takes a lot of time to load for the first time; the page complexity increases a lot.
21.Priority of v-if and v-for
Answer: When v-if is used together with v-for, v-for has a higher priority than v-if, which means v-if will be run repeatedly respectively in each v-for loop. Therefore, it is not recommended to use v-if and v-for at the same time. If v-if and v-for are used together, Vue will automatically prompt that v-if should be placed in the outer layer.
22. The difference between assets and static
Answer: Similarity: assets and static both store static resource files. The resource file images, font icons, style files, etc. required in the project can be placed under these two files. These are the similarities and differences: the static resource files stored in assets are packaged when the project is packaged, that is, running npm run When building, the static resource files placed in assets will be packaged and uploaded. The so-called simplicity of packaging can be understood as compression volume and code formatting. The compressed static resource files will eventually be placed in the static file and uploaded to the server along with index.html. Static resource files placed in static will not go through processes such as packaging, compression and formatting. Instead, they will go directly to the packaged directory and be uploaded directly to the server. Because compression is avoided and uploaded directly, a certain degree of efficiency will be improved during packaging. However, since the resource files in static are not compressed, the file size is larger than the files packaged in assets. It will take up more space in the server. Suggestion: Place the style files, js files, etc. required by the template in the project in assets and go through the packaging process. Reduce volume. The third-party resource files introduced in the project, such as iconfoont.css and other files, can be placed in static. Because these imported third-party files have been processed, we no longer need to process them and upload them directly.
23. Commonly used modifiers in vue
Answer: .stop: Equivalent to event.stopPropagation() in JavaScript, which prevents events from bubbling; .prevent: Equivalent to event.preventDefault() in JavaScript, which prevents the execution of preset behaviors (if If the event can be canceled, the event will be canceled without stopping the further propagation of the event); .capture: opposite to the direction of event bubbling, event capture is from outside to inside; .self: will only trigger events within its own scope, not included Child elements; .once: will only be triggered once.
24. Two core points of vue
Answer: Data-driven, component system data-driven: ViewModel, ensuring the consistency of data and views. Component system: Application UI can be seen as entirely composed of component trees.
25. The difference between vue and jQuery
Answer: jQuery uses selector () to select DOM objects and perform operations such as assignment, value acquisition, event binding, etc. In fact, the only difference from native HTML is that it can be more convenient to select and operate. DOM objects, and data and interface are together. For example, you need to get the content of the label label: ) Select a DOM object and perform operations such as assignment, value acquisition, and event binding. In fact, the only difference from native HTML is that you can more conveniently select and operate DOM objects, and the data and interface are together. For example, you need to get the content of the label label:) Select a DOM object and perform operations such as assignment, value acquisition, and event binding. In fact, the only difference from native HTML is that you can more conveniently select and operate DOM objects, and the data and interface are together. For example, if you need to get the content of the label label: ("lable").val();, it still depends on the value of the DOM element. Vue completely separates data and View through Vue objects. To operate on data, you no longer need to reference the corresponding DOM object. It can be said that data and View are separated. They are bound to each other through the Vue object, the vm. This is the legendary MVVM.
Steps to introduce components: Introduce the component in the template; use import to introduce the path in the first line of the script; use component to write the component name.
27. The difference between delete and Vue.delete in deleting an array.
Answer: delete only changes the deleted elements to empty/undefined. The key values of other elements remain unchanged. Vue.delete directly deletes the array and changes the key value of the array.
28. How to solve the slow loading of SPA first screen
? Answer: Install the plug-ins required for dynamic lazy loading; use CDN resources.
29. What is the difference between Vue-router jump and location.href
? Answer: Use location.href='/url' to jump, which is simple and convenient, but refresh the page; use history.pushState('/url'), no refresh Page, static jump; introduce router, and then use router.push('/url') to jump. Use diff algorithm to achieve on-demand loading and reduce DOM consumption. In fact, there is no difference between using router to jump and using history.pushState(), because vue-router uses history.pushState(), especially in history mode.
vue slot answer: To put it simply, if the parent component needs to put some DOM in the child component, then the slot distribution is responsible for whether these DOM are displayed, not displayed, where to display, and how to display.
31. Does your vue project package one js file, one css file, or multiple files?
Answer: According to the vue-cli scaffolding specification, one js file and one CSS file.
32. The router-link in Vue works on the computer, but it doesn’t respond on Android. How to solve the problem?
Answer: There is a problem with Vue routing on the Android machine. It is a babel problem. Install the babel polypill plug-in to solve it.
33. Solution to the invalid event registered on router-link in Vue2
Answer: Use @click.native. Reason: router-link will prevent click events, and .native means directly listening to a native event.
34.RouterLink does not work in IE and Firefox (the route does not jump)
Answer: Method 1: Only use a tag, not button tag; Method 2: Use button tag and Router.navigate method
35. Please tell me the usage of each folder and file in the src directory in the vue.cli project?
The assets folder is for static resources;
components are components;
Router defines routing-related configuration;
view view; app.vue is an application main component;
main.js is the entry file
36. How vue monitors array changes
Answer: Object.defineProperty cannot monitor array changes. Redefine the prototype and rewrite push pop and other methods to implement monitoring.
Proxy can natively support monitoring array changes
37. Please describe the principle of responsiveness.
Answer: Monitor data changes, monitor data attribute getters and setters (including arrays). Reference: MVVM Framework - queenya_zhang - Blog Park Point 3
Component rendering and update process:
37.vue optimization
answer:
1. Proper use of v-show and v-if 2. Proper use of computed 3. Add key when v-for, and avoid using v-if at the same time 4. Destroy custom events and DOM events in a timely manner 5. Proper use of asynchronous components 6. Reasonable use of keep-alive 7. The data level should not be too deep (because deep monitoring listens to the end at one time) 8. Use vue-loader to do template compilation (pre-compilation) in the development environment 9. Optimization at the webpack level 10. Universal front-end Performance optimization, if the image is lazy loaded 11. Use SSR
38. Vuex interview questions
1. What are the attributes? There
are 5 types, namely state, getter, mutation, action, and module.
2. What are the store features of vuex
(1) vuex is a warehouse, and many objects are placed in the warehouse. Among them, state is the data source storage location, corresponding to the data in the general vue object.
(2) The data stored in the state is responsive. The vue component reads data from the store. If the data in the store changes, the components that rely on this data will also be updated.
(3) It maps global state and getters to computed properties of the current component through mapState.
3. What are the getter characteristics of vuex
(1) Getter can perform calculation operations on state, which is the calculated attribute of store
(2) Although calculated properties can also be made within components, getters can be reused between multiple components.
(3) If a state is only used within one component, getters are not needed.
4. What is the mutation feature of vuex
? Action is similar to mutation, but the difference is that the action submits a mutation instead of directly changing the state.
action can contain any asynchronous operation
5. Should the ajax request code in Vue be written in the methods of the component or in the action of vuex
? If the requested data is not to be shared by other components and is only used within the requested component, there is no need to put it in the state of vuex.
If it is reused elsewhere, please put the request into the action to facilitate reuse, and package it into a promise to return
6. What problems will arise if vuex is not used?
Maintainability will be reduced. If you want to modify the data, you have to maintain 3 places.
The readability is reduced because you can’t tell where the data in a component comes from.
Increasing coupling and a large number of uploads and dispatches will greatly increase coupling. Originally, Vue used Component to reduce coupling. However, using it this way now is contrary to the original intention of componentization.
3. Webpack extension
1. Why does the front-end code need to be built and packaged
? Answer:
1. Code:
Smaller size (Tree-Shaking, compression, merging), faster loading Compile high-level languages or grammars (TS, ES6+, modularization, scss) Compatibility and error checking (Polyfill, postcss, eslint)
2. R&D process:
Unified and efficient development environment Unified construction process and output standards Integrated company construction specifications (physical testing, online, etc.)
2. What do module, chunk, and bundle mean and what are the differences?
Answer:
module -- each source code file, everything in webpack is a module chunk -- a combination of multiple modules, such as entry import() splitChunk bundle -- the final output file
4. Axios extension
1.axios and installation?
Answer: Module that requests background resources. npm install axios --save is installed, use import in js, and then .get or .post. It is returned in the .then function if it succeeds, and if it fails, it is returned in the .catch function.
2. What are the characteristics of axios?
Answer: Create XMLHttpRequests from the browser; create http requests with node.js; support Promise API; intercept requests and responses; convert request data and response data; cancel requests; automatically change to json. The parameters of the sending field in axios are data and params. The difference between the two is that params is sent together with the request address. Data is sent as a request body. Params is generally suitable for get requests, and data is generally suitable for post put requests. .
Original link: https://blog.csdn.net/a754334599/article/details/125680992