Vue often meet test questions – zhihu

Vue often meet questions

1. Advantages of VUE?

  • Lightweight framework: Focused only on the view layer, is a collection of views that build data, only tens of KB in size;
  • 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?

  • What they have in common: The ability to show and hide 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. <keep-alive></keep-alive>What is the function 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.

  • 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 loader for vue files that converts template/js/style to 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

  • The V-Model is used for bidirectional binding of form data, which is essentially a syntax sugar. There are two operations behind this:
  • V-bind binds a value attribute;
  • 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.

  • 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

  • computed:
    • Computed is used when an attribute is affected by more than one attribute
    • Typical chestnut: shopping cart checkout time
  • watch:
    • When one data affects multiple data sets, watch is needed
    • Chestnut: Search for data

15. Can V-ON listen for multiple methods?

A: yes, chestnut: < input type = “text” v – on = “{input: the onInput, focus: an onFocus, the blur: onBlur,}” >.

16. Use of $nextTick

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 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.
  • Multiple pages (MPA) refers to multiple pages in an application. When switching to a page, the whole page is refreshed
  • Advantages of single pages:
    • Good user experience, fast, content change does not need to reload the whole page, based on this point spa on the server less pressure; Front and rear end separation; The effects of the page will be cool (such as a special animation when switching between pages).
  • Disadvantages of single page:
    • 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. Priority of V-IF and V-for

Answer: 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, it is not recommended to use v-if and V-for together. If v-if and V-for are used together, vUE will automatically indicate that v-if should be placed in the outer layer.

22. The difference between assets and static

  • Similarities: Assets and static both 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
  • Similarities:
    • 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

  • .stop: 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

Data driven, component systems

  • Data-driven: ViewModel to ensure consistency between 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

  • JQuery uses a selector ($) select THE DOM object, to its assignment, value, event binding and other operations, in fact, and native HTML is only the difference is that it can be more convenient to select and operate the DOM object, and the data and interface is together. $(“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 (three steps in total)

  • intemplate 中 The introduction of the component;
  • inscriptThe first line ofimport The introduction of the path;
  • withcomponentWrite in theComponent name.

27. Delete and vue. delete delete the difference between arrays

  • 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

  • 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 slots

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

  • 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

  • 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 the two is that Params is sent with the request address, while Data is sent as a request body
  • Params generally applies to GET requests, and Data generally applies to POST and PUT requests.

36. What is the process of vUE component encapsulation?

  1. To create a template for the component, put the shelf up first, write the style, and consider the basic logic of the component. (OS: Think for an hour, code for 10 minutes, code for a programmer.)
  2. Prepare data entry 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 complete, just call it

37. Difference between Params and Query

  • Usage: Query is introduced with path, params is introduced with name, receive parameters are similar, respectivelythis.$route.query.name 和 this.$route.params.name.
  • Query displays parameters in the browser address bar, while Params does not display parameters in the browser address bar
  • Note: The query refresh does not lose the data in the query; Params refresh will 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: add to CSS

[v-cloak] {
    display: none;
}
Copy the code

If the problem is not completely resolved, add style=”display: none;” to the root element. And: 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

Vue-rounter meet frequently

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?

Three types:

  • BeforeEach (to,from,next) intercepts before jumping.
  • Second: hooks within components
  • Third: separate route exclusive component

6.$route 和 $routerThe difference between

  • $routerIs an instance of VueRouter that wants to navigate to a different URL in the script tag, using$router.pushMethods. Returns the previous history history used$router.to(-1)
  • $routeIs the current Router jump object. You can obtain the name,path,query, and parmas of the current route.

7. Two modes of vue-Router

  • Hash mode: 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)

Three ways:

  • The first type: vUE asynchronous component technology ==== asynchronous loading, VUe-router configures the route, using vUE asynchronous component technology, can achieve on-demand loading. 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?

  • State management in 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?

Answer: There are five types: State, Getter, Mutation, Action, and Module

  • State => Basic data (where data source is stored)
  • Getters => Data derived from base data
  • Mutations => Submit methods for changing data, simultaneous!
  • 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. This is most likely needed if it is reused elsewhere. If it is, put the request into an action for reuse.