5 Vue tips to greatly improve our build experience

Author: Nwose Lotanna Victor
Translator: Frontend Xiaozhi
Source: medium

If you have dreams and dry goods, search on [The Great Move to the World] Follow the brushing wisdom who is still doing the dishes in the early morning.

This article GitHub https://github.com/qq449245884/xiaozhi has been included, the first-line interview complete test site, information and my series of articles.

Today, I mainly share 5 tips of Vue to improve the speed of project construction.

Use readable naming conventions

You may have heard of this, readability is really important, especially for multi-person collaborative projects. Here are some suggestions that are considered best practices.

Use hump when naming components

• NewComponent.vue ✅
• newcomponent.vue 🛑
• Newcomponent.vue 🛑

**If there are sub-components, they can be named like this

• FooterSection.vue
• FooterSectionHeading.vue
• FooterSectionIcons.vue
• FooterSectionButton.vue

If there is no sub-component, you can try to add the prefix the to name

• TheNavbar.vue

Verify the data type of Props

Prop is an important method of data communication between parent and child components. However, it is important that when creating Prop, clearly specifying the data type and verifying the incoming data can help avoid bugs caused by inconsistent types during the development phase.

Our novices may often write props like this from time to time:

props: ['title', 'likes', 'isPublished', 'commentIds', 'author']

However, usually you want each prop to have a specified value type. At this time, you can list props in the form of objects. The names and values of these properties are their respective names and types:

props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object,
  callback: Function,
  contactsPromise: Promise // or any other constructor
}

This not only provides documentation for your components, but also prompts the user from the browser's JavaScript console when they encounter the wrong type.

Don't directly manipulate the DOM

Some students who have used JQ in the early days still like to directly manipulate the DOM when using Vue. This is not a bad thing, but Vue uses virtual DOM, which is an abstract version of DOM, which makes the compilation more effective and avoids every time Re-render the entire DOM when it changes. This greatly improves efficiency and resource management, because the DOM API is called less frequently. This means that we don't really need to do such a thing in the component.

<input type="checkbox" @change="logStatus" />

If we want to checkbox status, we might do this:

methods: {
  logStatus() {
    const isOn = document.getElementById('thecheckbox').checked;
    if( isOn ) {
      console.log('Light is on');
    } else {
      console.log('Light is off');
    }
  }
}

getElement is the DOM API. If you use the following method instead, the efficiency will be improved.

data() {
  return {
    isOn = false
  }
},
methods: {
  logStatus() {
    if(this.isOn) {
      console.log('Light is on');
    } else {
      console.log('Light is off');
    }
    this.isOn = !this.isOn;
  }
}

No need to use DOM API, this can also achieve the same effect. No matter what you can do with pure JS, it is possible to find a more effective method in the virtual DOM. If you can't find it, please use Vue Refs .

Embrace computational properties

Calculating attributes is a good way to reduce complex logic. For example, when our conditional expressions are very long, we can use calculated attributes, which can be simplified into a variable, which can greatly improve readability and avoid maintenance. People stay in the pit.

<div v-for=’car in cars’ v-if=’car.country =="Germany"' >

We can use v-for to cycle through the list, and some people will use v-if for conditions or filtering as above. This looks good, but the Vue compiler prioritizes v-for instead of v-if , so the final result may not be what we want. The list (imagine it has 100 million) will be looped every time, which is not efficient at all. We can use computational properties to improve this problem.

<div v-for='car in countryFilter'>
//....
computed: {
  countryFilter: () => {
    return this.cars.filter(function (car) {
      return car.country =="Germany"
    })
  }
}

This kind of loop is more efficient, and the calculated attribute is only executed once, and only when the dependent variable changes. Finally, it separates the logic from the template part so that our code is cleaner and readable.

Treasure Treasure---Official Document

Vue's documentation is very detailed. After all, it is written by our people. It is more in line with our way of thinking. There are many tips and resources in the documentation. There is a style guide, which you must read.

Address: https://cn.vuejs.org/v2/style-guide/index.html

---

possible bugs that may exist after 1615f9115329bb code is deployed cannot be known in real time. In order to solve these bugs afterwards, a lot of time was spent on log debugging. By the way, I would like to recommend a useful BUG monitoring tool Fundebug .

Original: https://blog.openreplay.com/5-useful-vuejs-tips-to-improve-your-building-experience

comminicate

Are dreaming, dry, micro-channel search [World] big move concerned about this in the morning still in the dishwashing dishwashing wisdom.

This article GitHub https://github.com/qq449245884/xiaozhi has been included, the first-line interview complete test site, information and my series of articles.