Summary of Vue related front-end interview topics

Summary of vue interview topics
Front End Interview High Frequency Topics

1. Routing-related issues

1. Differences between Front End Routing and Back End Routing

Differences between Front End Routing and Back End Routing

2. Two modes of front-end routing: hash mode and history mode

Front End Routing

3,vue-router

What hook functions do vue-router have?

Vue-Router Routing Hook Function (Navigation Guard)

Vue-Router Routing Hook Function (Navigation Guard)

(2) Global Guard

(3) Exclusive guards for routing

(4) Component-level routes

Write in component, access path, triggered when rendering component

{
data,
methods
beforeRouteEnter(){
        this No Point to Instance Component Not Created
        next((vm) =>{
                vm Is an instance
        })
}
beforeRouteUpdate(){}
beforeRouteLeave(){}
}

2. Vue components and function-related

1. What are watch computed and methods? Difference?

(1) Differences in the mechanisms of action between watch computed and methods

(2) Difference between watch and computed

computed

watch

Difference

2. Value transfer between components

Six ways of communication between Vue components

① props,$emit

Example

② vuex

From the vuex section of this article

vuex is used to transfer values between components.

3. Life cycle of vue (hook function)

Create data (created) - Data mounts virtual dom (beforeMounted) - mounts vue instance (mounted)

4. filter

Definition and application scenarios

(2) Specific use of filters

Define vue global filter

    Vue.filter('capitalize', function (value) {
      if (!value) return
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    })
 
    new Vue({
      //...
    })

Use

<!--In double curly brackets-->
{{message| capitalize}}
<!--stay`v-bind` in-->
<div v-bind:id="rawId| formatId"></div>

(3) Combined projects (time conversion, unit conversion)

Used in Project: Settings for Global Time Conversion Filter - Time items added for displaying orders

// Global Time Filter
Vue.filter('dataFormat', function (originVal) {
  const dt = new Date(originVal)

  const y = dt.getFullYear()
  const m = (dt.getMonth() + 1 + '').padStart(2, '0')
  const d = (dt.getDate() + '').padStart(2, '0')

  const hh = (dt.getHours() + '').padStart(2, '0')
  const mm = (dt.getMinutes() + '').padStart(2, '0')
  const ss = (dt.getSeconds() + '').padStart(2, '0')
  // yyyy-mm-dd hh:mm:ss
  return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
})

3. How to manage rights (including possible token issues in the project)

Front End Processing of token Expiration in vue and axios Request Interception Processing
How Axios implements data requests, front-end and back-end communication -- (how the code is implemented)
This is clearly stated

1,Route Navigation Guard - Intercepts each route address change and decides whether or not to let it go based on the page you are on and the page you are going to (login and other pages)
2,axios Interceptor (request interceptor, response interceptor)

1. vue router Routing Intercept Routing Navigation Guard (router.beforeEach)

There is also permission management in vue-router (router.beforeEach), where the user is not logged on (no token), and should jump to the login interface when accessing directly from the URL

2. axios request interceptor

1 Request Interceptor

After requesting the data first, the server returns token, using axios'request interceptor, to save the token in a field in the request header -- so that when the server looks at the request, it sees the token in the request header

(2) Response interceptor

/ 2. Response Interceptors
// Not only is there a response to the success status, different status response codes are different
request.interceptors.response.use((response)=>{
    let {data} = response;
    if(data.code =='3' || data.code =='2'){
        // Response Failure Unified Throw Failure Information
        return Promise.reject(new Error('error'))
    }
    if(data.code =='0'){
        // token invalidation
        console.log('Logon Failure');
    }
    if(data.code == '1'){
        router.push('/index/home');
    }
    return response; //If you don't return, you won't receive anything in the body below
},error=>{
    Message({
        message:'Access Timeout',
        duration:10000,
        type:'error'
    })
    return Promise.reject(new Error(error))
})

3. Packaging of axios

axios request encapsulation

1. Characteristics of axios

(2) Why should axios be encapsulated?

My understanding is that axios functions are defined in a file, and then an api.js file defines these interfaces so that you can use them whenever you need them
If a get request, for example, requires one more parameter when the user is a member. If it is not encapsulated, each get request for the corresponding page will go to the corresponding page to change, but with encapsulation, all the get requests can be updated by simply changing the interface file.