Big factory interview question sorting
VUE interview questions
1. The vue advantages?
A: Lightweight framework: Focusing only on the view layer, is a collection of views that build data and is only tens of kilobytes in size; Easy to learn: Chinese developed, Chinese documents, there is no language barrier, easy to understand and learn; Two-way data binding: Preserves Angular features and makes data manipulation easier; Componentization: React retains the advantages of encapsulation and reuse of HTML, and has unique advantages in building single-page applications. Separation of view, data and structure: it makes it easier to change the data, without the need to modify the logical code, and only need to operate the data to complete the relevant operations; Virtual DOM: DOM manipulation is very performance consuming. The native DOM manipulation node is no longer used, which greatly liberates DOM manipulation. However, the specific DOM operation is just changed in another way. Faster operation: Compared with React, vUE also operates virtual DOM. In terms of performance, vue has a big advantage.
2. Vue parent component passing data to child component?
A: Through props
3. Does a child component pass events like a parent?
Answer: the $emit method
4. What are the similarities and differences between V-show and V-IF directives?
A: Common: both can control the display and hiding of elements; Difference: The implementation of the essence of the method is different, the essence of v-show is to control the CSS display set to None, control hidden, will only compile once; V-if dynamically adds or removes DOM elements from the DOM tree. If the initial value is false, it will not compile. And v-if’s constant destruction and creation costs performance. Summary: If you want to switch nodes frequently, use v-show(switching costs are low and initial overhead is high). Use V-if if a node does not need to be switched frequently (the initial rendering cost is low, the switching cost is high).
5. How do I make CSS work only in the current component?
Answer: Append style to scoped in the component
6. What is the role of?
A: Keep-alive is a component built into Vue that can preserve the state of contained components or avoid re-rendering.
7. How do I get dom?
This.$refs.domName = ref=”domName
Name how many commands in VUE and how they are used.
A: V-Model two-way data binding; V – for loop; V-if v-show Show and hide; V – on events; V-once: Binding only once.
9. What is vue-loader? What are the uses for it?
A: a loader for vue files that converts template/js/style into JS modules. Use: JS can write ES6, style style can SCSS or less, template can add Jade, etc
10. Why use key?
A: A key is required to give each node a unique identity, and the Diff algorithm can correctly identify the node. The main purpose is to update the virtual DOM efficiently.
11. Axios and installation?
A: A module that requests background resources. NPM install axios –save, import from js, then.get or.post. Returns success in the.then function and failure in the.catch function.
12. Use of V-modal.
A: V-model is used for bidirectional binding of form data. It is a syntax sugar. The V-on directive binds the input event to the current element.
13. Name the use of each folder and file in the SRC directory in vue.cli project.
A: The assets folder contains static resources. Components; Router defines routing configurations. App. vue is an application main component; Main.js is the entry file.
14. Describe the usage scenarios of computed and Watch respectively
A: Computed: When an attribute is affected by multiple attributes, it needs to be used for computed data. The most typical example is in shopping cart settlement. Watch: When one data affects multiple data, it needs to be used for data search
14.1 Difference between computed and Watch?
A: Computed: You must return a value, but watch does not need a return value. Computed attribute results are cached and recalculated unless attributes change, and are used primarily as attributes. Wactch needs to listen for two arguments (newVal,oldVal) in the function when the value of the model variable changes. Watch listens for handler(), the deep property, on objects or arrays
15. Can V-ON listen for multiple methods?
A: Yes, chestnut.
16. $nextTick use
A: When you modify the value of data and immediately retrieve the dom element value, you cannot retrieve the updated value. You need to use the $nextTick callback to render the updated value of data to the DOM element before retrieving it.
17. Why must data be a function in a Vue component?
A: Because of the nature of JavaScript, in Component, data must exist as a function, not an object. The data in the component is written as a function, and the data is defined in the form of the return value of the function. In this way, every time the component is reused, a new data will be returned, which means that each component instance has its own private data space, and they are only responsible for the data they maintain, without causing confusion. In pure object form, all component instances share the same data, so change one all changed.
18. An understanding of progressive frameworks
Answer: advocate least; Different levels can be selected according to different needs;
19. How is bidirectional data binding implemented in Vue?
A: VUE two-way data binding is implemented through data hijacking combined with publish/subscribe mode. That is to say, data and view are synchronized. As data changes, view changes, data changes. Core: For VUE two-way data binding, the core is the Object.defineProperty() method.
20. Differences, advantages and disadvantages between single-page apps and multi-page apps
A: A single page application (SPA), in layman’s terms, is an application with only one home page. The browser starts by loading all the necessary HTML, JS, and CSS. All page content is contained in this so-called home page. However, when writing, it is still written separately (page fragment), and then dynamically loaded by the routing program during interaction, single-page page jump, only refreshing local resources. It is mainly used on PCS. Multi-page (MPA) refers to the advantages of refreshing a single page in an application with multiple pages. The user experience is good and fast, and the change of content does not require reloading the whole page. Based on this point, SPA has less pressure on the server. Front and rear end separation; The effects of the page will be cool (such as a special animation when switching between pages). Single page disadvantages: bad for SEO; Navigation is not available. If you must navigate, you need to implement forward and backward. (because it is a single page and cannot use the browser’s forward and backward function, so you need to build your own stack management); The initial loading is time-consuming; Page complexity has increased considerably.
21. Check whether the priorities of v-if and V-for can be used together
Answer: It can be used together, but not recommended. When v-if is used with V-for, v-for has a higher priority than V-if, which means that v-if will be repeated separately in each V-for loop. Therefore, v-IF and V-for are not recommended to be used together. If v-if and v-for are used together, vUE will automatically indicate that v-if should be placed in the outer layer. Solution: 1. You can use computed. 2
22. The difference between assets and static
A: Similarities: Assets and static are used to store static resource files. Resource files, images, font ICONS, style files, etc. needed in the project can be placed under these two files, which are the same. The static resource files stored in assets are packaged and uploaded when the project is packaged, that is, when the NPM run build is run. The so-called simple packaging point can be understood as compression volume and code formatting. The compressed static resource file is eventually placed in a static file and uploaded to the server along with index.html. Static resource files do not need to go through the packaging, compression and formatting process, but directly into the packaged directory, directly uploaded to the server. However, static resource files are not compressed, so the volume of the file is larger than that of the packaged assets file. It takes up more space on the server. Suggestion: Place style files js files 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, can be placed in static, because these imported third-party files have been processed, we no longer need to process, directly upload.
23. Common modifiers of vue
Answer:.stop: is equivalent to JavaScript event.stopPropagation() to prevent event bubbles; .prevent: Equivalent to event.preventDefault() in JavaScript, to prevent the preset behavior from being performed (if the event is cancelable, cancel the event without stopping further propagation of the event); .capture: In contrast to the direction of event bubbling, events are captured from the outside in; .self: triggers only events within its own scope, no child elements; .once: Triggers only once.
24. The two core points of VUE
A: Data driven, component system data driven: ViewModel, to ensure the consistency of data and view. Component systems: The application UI can be thought of as being entirely composed of component trees.
25. Differences between Vue and jQuery
A: jQuery uses the selector () to select a DOM object and perform operations such as assignment, value, and event binding. The only difference between jQuery and native HTML is that it is easier to select and manipulate DOM objects. The data and interface are integrated. For example, you need to obtain the content of the label label 🙂 select the DOM object, perform the assignment, value, event binding and other operations on it. In fact, the difference between the original HTML and the DOM object is that it is more convenient to select and operate the DOM object, and the data and interface are together. For example, you need to obtain the content of the label label 🙂 select the DOM object, perform the assignment, value, event binding and other operations on it. In fact, the difference between the original HTML and the DOM object is that it is more convenient to select and operate the DOM object, and the data and interface are together. For example, to obtain the contents of the label :(“lable”).val(); Again, it depends on the DOM element value. Vue completely separates the data from the View through Vue objects. Manipulation of data no longer refers to the corresponding DOM object, so data and View are separated, and they are bound to each other through the VM Vue object. This is known as MVVM.
26. Steps for importing components
A: Import components in template; Import the path in the first line of script; Write the component name in Component.
27. Delete and vue. delete delete the difference between arrays
A: Delete simply changes the deleted element to empty/undefined and the other elements’ keys remain the same. Vue.delete directly deletes the array and changes its key value.
28. How to solve the problem of slow loading of SPA first screen
A: Install the plug-in required for dynamic lazy loading; Use CDN resources.
What is the difference between vue-router jump and location.href
A: Use location.href=’/url’ to jump, simple and convenient, but refresh the page; PushState (‘/url’); The router is imported and then jumped to using router.push(‘/ URL ‘), which uses the diff algorithm to load on demand and reduce DOM consumption. There is no difference between using the router to jump and using history.pushstate (), because the vue-router uses history.pushstate (), especially in history mode.
30. vue slot
A: Simply put, if the parent component needs to put some DOM inside the child component, slot distribution is responsible for whether the DOM is displayed, not displayed, where it is displayed and how it is displayed.
31. Does your VUE project pack one JS file, one CSS file, or multiple files?
A: According to vuE-CLI scaffolding specification, one JS file, one CSS file.
32. Router-link in Vue works on PC, but does not work on Android.
A: There is a problem with Vue routing on Android. Install Babel Polypill.
33. The event registered on router-link in Vue2 is invalid
Answer: Use @click.native. Router-link blocks the click event. Native means listening directly for a native event.
34.RouterLink Does not work in Internet Explorer and Firefox
Answer: Method 1: Use only A label, not button label; Method 2: Use the button tag and the router. navigate method
35. What are the features of Axios
A: Create XMLHttpRequests from the browser; Node.js creates HTTP requests; Support the Promise API; Intercepting requests and responses; Transform request data and response data; Cancel the request; Automatically change to JSON. The parameters of the send field in AXIos are data and params. The difference between params and Params is that params is sent together with the request address. Data is sent as a request body.
36. What is the process of vUE component encapsulation?
Answer: 1. Establish the template of the component, put up the shelf first, write the style, consider the basic logic of the component. (OS: Think for an hour, code for 10 minutes, code for a programmer.) 2. Prepare data input for the component. That is, analyze the logic and determine the data and types in props. 3. Prepare the data output of the component. That is, according to the component logic, make the methods to be exposed. 4. The package is completed and can be directly called
37. Difference between Params and Query
A: Usage: Query is introduced with path, Params is introduced with name, receive parameters are similar, Name and this.route.query.name and this.route.query.name and this.route.query.name. Query: query: displays parameters in the browser address bar. Params: displays parameters in the browser address bar. Params: displays parameters in the browser address bar. Query refresh does not lose data in query. Params refresh does lose data in Params.
38. Vue initialization page flash problem
A: In vUE development, before vUE initialization, div is not owned by VUE, so we can write code that is not parsed and see words like {{message}}. Although this is usually very short, it is necessary to solve this problem. First: cloak the CSS with [v-cloak] {display: none; }. If the problem is not completely resolved, add style=”display: none;” to the root element. :style=”{display: ‘block’}”
39. Method to trigger view update when vue updates an array
Answer: push (); Pop (); The shift (); Unshift (); Splice (); Sort (); reverse()
40. Library of UI components commonly used by VUE
A: Mint UI, Element, VUX
41. Vue Modifies static resource paths after packaging
A: For cli2: change the value of assetsPublicPath in config/index.js to ‘./’. build: { … assetsPublicPath: ‘./’, … Module. exports = {publicPath: ”, // relative to HTML page (same directory)}}
Life cycle function interview question
1. What is the VUE lifecycle? What does it do?
A: Each Vue instance goes through a series of initialization procedures when it is created — for example, you need to set up data listeners, compile templates, mount the instance to the DOM and update the DOM when the data changes, and so on. Functions called lifecycle hooks are also run along the way, giving users the opportunity to add their own code at different stages. For example, if you want to use a plugin to manipulate a DOM node, such as a pop-up AD window after the page is rendered, you can do this in Mounted.
2. Which hooks will be triggered the first time the page loads?
Answer: beforeCreate, created, beforeMount, Mounted
3. Describe the specific scenarios for each cycle
A: beforeCreate: After new a vue instance, only some default lifecycle hooks and default events are left uncreated. When the beforeCreate life cycle is executed, the data in data and methods are not initialized. Create: Data and methods are already initialized. If you want to call methods in methods or manipulate data in data, the earliest you can do beforeMount is in this phase: Mounted: When this hook is mounted, the Vue instance is initialized. At this point, the component leaves the creation phase and enters the run phase. If we want to manipulate a DOM node on a page with a plugin, we can do beforeUpdate as early as in and phases: When this hook is executed, the data displayed in the page is old, the data in data is updated, and the page is not yet synchronized with the latest data: The data displayed on the page is already in sync with the data in the data, it is up-to-date. BeforeDestory: The Vue instance moves from the run phase to the destroy phase, at which point all data and methods, instructions, filters… They’re all available. They have not destroyed all data and methods, commands, filters… They are all unavailable. The component has been destroyed.
4. Created and Mounted
A: Created: called before a template is rendered to HTML, which usually initializes some property values and then renders to a view. Mounted: Specifies whether to perform operations on AN HTML DOM node after the template is initialized.
5. Vue gets data in which periodic function
Answer: general created/beforeMount/mounted. For example, if you want to manipulate the DOM, you should only do so when mounted.
6. Can you elaborate on your understanding of the VUE life cycle?
A: There are 8 stages: before/after creation, before/after loading, before/after updating, and before/after destruction. Before and after creation: In the beforeCreated phase, the mount element EL and ∗∗data object ∗data of the VUE instance are both undefined and not initialized. In the created phase, the vue instance’s data object, data, el and **data are undefined and not initialized. In the created stage, the data object data of the VUE instance is available, while EL and ∗∗data object ∗data are undefined and not initialized. In the Created phase, the vUE instance’s data object, Data, is available, but el is not. Before/After loading: In the beforeMount phase, the vue instance’s $EL and data are initialized, but the previously virtual DOM node is still mounted, and data.message has not been replaced. In mounted phase, vue instance is mounted and data.message is successfully rendered. Before/After update: When data changes, the beforeUpdate and updated methods are triggered. Before/after destroy: Changes to data do not trigger periodic functions after destroy, indicating that the vue instance has been unbound from event listening and the DOM structure still exists.
Vue routing interview questions
1. What is the MVVM framework?
A: VUE is an MVVM framework that implements two-way data binding, updating the model layer when the view changes and updating the view layer when the model layer changes. In VUE, bidirectional binding technology is used, that is, the changes of the View can change the Model in real time, and the changes of the Model can be updated to the View in real time.
2. What is vue-router? What components it has
A: Vue is used to write routes to a plug-in. The router – the link, the router – the view
3. Which component is an active-class property?
A: Router-link component of vue-Router module. The children array defines the child routes
4. How to define a vue-router dynamic route? How do I get the passed value?
A: Add /:id to the path attribute in the index.js file in the router directory. Use the params.id of the Router object.
5. What kinds of navigation hooks does vue-Router have?
BeforeEach (to,from,next) intercepts before jumping. Second: hooks within components. Third: separate route exclusive components
6.
The difference between the router
A: Router is an instance of VueRouter, and if you want to navigate to different urls in the script tag, To navigate to different urls in script tags, use the router.push method. To (−1)router.to(-1)router.to(−1) router.to(−1)router.to(−1)router.to(−1)router.to(−1)router.to(−1) Router.to (−1) Router.to (−1) Router.to You can obtain the name,path,query, and parmas of the current route.
7. Two modes of vue-Router
A: Hash mode: that is, the # symbol in the URL of the address bar; History mode: The window.history object is printed to see the method and record length provided in it. Takes advantage of the new pushState() and replaceState() methods in the HTML5 History Interface. (Requires browser specific support).
8. Vue-router implements lazy route loading (dynamic route loading)
A: The first method is: vUE asynchronous component technology ==== Asynchronous loading. Vue-router configures routes and implements on-demand loading using VUE asynchronous component technology. However, in this case a component generates a JS file. The second type: lazy route loading (using import). The third type: Require.ensure () provided by Webpack, vue-router configures routing, using Webpack’s Require.Ensure technology, which can also be loaded on demand. In this case, multiple routes with the same chunkName are combined and packaged into a single JS file.
Vuex often meet test questions
1. What is vuex? How to use it? Which functional scenarios use it?
A: State management in the VUE framework. Import store and inject in main.js. Create a new directory, store.js… . Export. The scenarios are as follows: Status between components in a single-page application. Music play, login status, add shopping cart
2. What are the attributes of VUex?
A: Mutations => Open mutations => open mutations => open mutations => open mutations => open mutations => open mutations Actions => acts like an decorator, wrapping mutations so it can be asynchronous. Modules => Modular Vuex
3. Should ajax request code in vue.js be written in component’s Methods or vuex’s Actions?
A: If the requested data is not to be shared by other components, it does not need to be put into vuEX state if it is only used within the requested component.