Summary of vUE interview questions

Write in the front: these are some interview questions that are common at the beginning of learning Vue2. Of course, they also cover most of the basic knowledge of Vue and can be said to be the core foundation of Vue.

1. style=scoped

Style =scoped applies data-V-56AB186 attributes to the DOM element and applies them when writing the style.

2. Data in Vue

In components, data can only be functions; in New Vue, data can be objects. When data is a function, each instance (page)(component) can have its own data, independent of each other.

3. The difference between router and route

Router is an instance of VueRouter. It is a global routing object with hop methods, hook functions, etc. Route is a hop route object with path, Query,name,params, etc.

4. Principle of Vue response type

Vue2’s responsivity can only listen on a single attribute. The principle of responsivity is to add getters and setters to all attributes in data through traversal and recursion. Therefore, VUe2 can only realize that data in data has responsivity, and set cannot be triggered by subscript modification or adding a preexistent object attribute Vue3 is a proxy data proxy, which can listen to the entire object, so the data in the object can be monitored. This is equivalent to intercepting every access and modification to a property (similar to request interception).

5. Common life cycles.

2. Mounted (VM.$el is created, data is created) 3. 4. Activated (Lifecycle of the keep-alive tag, activated when it is activatedCopy the code

5. Watch attributes are related

Usage: Directly monitors changes in the content of a variable and changes in non-DOM elements.

Features: It will not be monitored when binding for the first time, and ordinary watch cannot monitor the change of properties in the object, so in-depth monitoring is required.

If the immediate attribute is set to true, the props function needs to be enabled for the first time when the props function is listening on the transmission value of the parent component. Deep listening sets the deep property to true, but listens for all properties in the object. If you want to listen for a single property in an object, use a string.

As follows:

Watch: {" cityname.name ": {handler(newName, oldName) {//... }, deep: true, immediate: true } }Copy the code
Arrays don't need depth listeners, object arrays need depth listeners.Copy the code

6. Component value transfer method.

Vuex plugin 4. $refs, parent gets instance of child component directly 5. V-solt, slot 6. This.$eventbus.$ONCopy the code

7. Route parameters are transmitted

1. Dynamic route parameters are transmitted

1. Route definition: {path: '/admin/:id'} 2. Page parameters: {path: '/admin/${id}'} 3. This.$route.$query.idCopy the code

2. Parmas refs

Route definition: {path: '/admin/',name:home} 2. $route.$push({name: home, params:{id: MSG,}}) 3. This.$route.$params.idCopy the code

3. The query parameter

Route definition: {path: '/admin/',name:home} 2. This.$route.$push({name: home, query:{flog: MSG,}}) 3. This.$route.$params.flogCopy the code

8. Route lazy loading:

components:() => import(‘@/components/home’)

Benefits:

  • The first screen to optimize
  • Improve performance

9. Specific functions for specific purposes:

  • The $nexttick() method is used to get the updated DOM immediately
  • The V-cloak property is used to prepare the screen to blink when the network speed is low.
  • The keep-alive tag is used to hold components with frequent requests for data because the cache can be left behind. Easy to render quickly from cache. You can animate it using the Transition tag.
  • The transition tag overanimates individual elements, and transition-group overanimates the list.
  • Event modifiers:
    • .stop (stop bubbling)
    • .once
    • .native (trigger a native event)
    • .prevent (Prevent default behavior
  • Data bidirectional binding modifiers: -.lazy(data synchronization when out of focus or when enter is pressed) -.trim(first whitespace filtered) -.number(converted to letters)
  • Route navigation guard: This command is executed when the route is changed. The command is earlier than beforecreated and is used for token verification to check whether the access permission is granted and prompt the redirect address.

10. Data Request:

Set the cross-domain carry cookies: axios. Defaults. Widtcredentials = true.

Base address setting: axios.defaults.baseURL = “address URL”

Vue.prototype.$axios = axios

The interceptor:

1. Request interceptor

Axios. Interceptors. Request. Use (function (config) {/ / can be set before sending the request here some request header / / generally add token, username, and so on, According to the needs of the business ` config. Headers. Authorization = token ` return config. }, function (error) { // Do something with request error return Promise.reject(error); });Copy the code

2. Response interceptor

Axios. Interceptors. Response. Use (function (response) {/ / some tips can be set after obtaining the response data As for failure / ` success response. Data. Code = = 200? ` return response; }, function (error) { // Do something with response error return Promise.reject(error); });Copy the code

Encryption mode (Front-end encryption is not effective, but mainly relies on back-end encryption) 1. Md5, SHA1, base64

End