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
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
② 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
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.
3. How to encapsulate
4. Usage of each folder and file in the src directory in the vue.cli project?
4. What is mvvm? The principle of two-way binding?
1,MVVM
2. Understanding Binding
V. Virtual DOM
Definition
Why use virtual dom
Diff algorithm in Vue
SPA