Summary of Common Routines and Skills in Vue Development

Attribute emission

export default {
 name: ' Name ',
 components: { //  Component mount a},
 created(){} //  Data acquisition 
 beforeMount() {}, //  Data acquisition 
 data: () => ({}), // Responsive data 
 computed: {} //  Calculate a collection of attributes 
 methods: {} //  Method set 
 ... //  Destroy unwanted resources on the page 
}

Manage request load status

async beforeMount(){
 //  Start loading 
 this.loading = true
 try {
 const data = await getUserInfo()
 } catch (error) {
 console.log(error)
 } finally {
 //  Stop loading 
 this.loading = false
 }
}

Proxy cross-domain

proxy: {
 "/api": {
 target: 'http://.......',
 changeOrigin: true, //  Do you want to change the domain name 
 ws: true, // socket
 pathRewrite: {
 //  Path rewriting 
 "/api": '' //  Rewrite the spliced content 
 }
 },
 ....
}

Configure the packaging of developer and build differently

Most developers like to write config of Vue in one file. It seems that there is no problem, but with the change of environment, project optimization, WebPack plug-in, etc., it will appear a little messy after the targeted configuration comes in. At this time, we can consider doing a separate configuration, and introduce an config to different environments through process. dev. My configuration mode is posted below. I created a new config directory under the root directory of the project, which unpacked the public methods into one public. js, and compiled the others according to the production environment and offline environment.

-- config
--- dev.js
--- build.js
--- public.js
vue.config.js

#  Code  vue.config.js
const devConfig = require('./config/dev')
const buildConfig = require('./config/build')
module.exports = process.env.NODE_ENV === 'development' ? devConfig : buildConfig

Computing attributes is practical

//  Calculate attributes 
computed: {
 filterList: function () {
 return this.showData.filter(function (data) {
 //  Returns the data to be displayed 
 return data.isShow
 })
}
 
// DOM
 
<ul>
 <li v-for="item in filterList" :key="item.id">
 {{ item.name }}
 </li>
</ul>

Ensemble method

 tableFactory(action) {
 switch (action) {
 case 'update':
 ...
 break;
 
 case 'create':
 ...
 break;
 
 case 'delete':
 ...
 break;
 
 default:
 // ... Default get list 
 break;
 }
}

Maintain data validation specifications for Props

props: {
 test: {
  type: String,
  default: ''
 },
 test2: {
  type: [Number, String],
  default: 1
 },
 test3: {
  required: false,
  type: Object
 }
}

Component name uses

Most of the time, the name we define in the component is the name used in the template template, and hump naming is recommended here, because hump naming is well resolved in vue.

// GanMessage.vue Component 
export default {
 name: 'GanMessage'
 .....
}

//  Use after introduction 
components: {
 [GanMessage.name]: GanMessage
}

//  Use in the template 
<template>
 <gan-message/>
</template>

Template engine debugging

Most of the time, writing 1 logic on template is very difficult to debug, and it is directly to see the effect. For 1 value, it becomes uncontrollable. Therefore, in the development environment, I will hang a global console. log method on the prototype for debugging

vue.prototype.$logs = window.console.log;

//  Use 
<template>
 {{$logs('1111')}}
</template>

Get the life cycle of data

For data acquisition 1 straight is controversial, most of the students are in created access, I personally in beforeMount background data request access

async beforeMount(){
 const data = await getUserInfo();
}

Using async and await

Most of the time, when using Promise, it is processed through. then,. catch and. finally. But in fact, I recommend using async asynchronous function to process Pormise. We only need to obtain data. Through try exception capture, we can quickly check and throw errors. Referring to the life cycle of the data obtained above, you can see that

async beforeMount(){
 //  Start loading 
 this.loading = true
 try {
 const data = await getUserInfo()
 } catch (error) {
 console.log(error)
 } finally {
 //  Stop loading 
 this.loading = false
 }
}

0

watch

async beforeMount(){
 //  Start loading 
 this.loading = true
 try {
 const data = await getUserInfo()
 } catch (error) {
 console.log(error)
 } finally {
 //  Stop loading 
 this.loading = false
 }
}

1

In a custom event, this value is the value captured from its child components

async beforeMount(){
 //  Start loading 
 this.loading = true
 try {
 const data = await getUserInfo()
 } catch (error) {
 console.log(error)
 } finally {
 //  Stop loading 
 this.loading = false
 }
}

2

Summarize