Best practices for using VUE!!

    <div v-for="item in items" :key="item.id"> <! -- Content --> <div/>Copy the code

Element) if the attribute key is added, the virtual DOM will be compared as two identical nodes, so the old element will be removed and a new element will be added in the same place to avoid unintended side effects.

 <div
    v-if="error"
    key="search-status"
  ></div>

  <div
    v-else
    key="search-status"
  ></div> 
    
Copy the code

The route switching component does not change

One of the most common problems encountered in vUE development is that a component’s life hook does not fire when the page switches to an address with the same route but different parameters

Because vue-Router recognizes that the two routes use the same component for reuse and does not recreate the component, the component’s lifecycle hook does not fire.

Scheme 1: Route navigation guard

This can be triggered using the beforeRouteUpdate guard provided by the route, simply by putting the logic that needs to be executed into the guard. Send a request in the guard, update the status, and re-render the page.

Option 2: Observe the $route object

The watch can monitor the changes of routing objects and respond to routing changes

const User = {
    template:'... ',
    watch:{
      $router(to,form){// make a reaction}}}Copy the code

Solution 3: Add a property key to the router-View component

By setting a key for the router-view component, you can make the key different every time the route is switched, which makes the virtual DOM think that the router-view component is a new node and destroys the component

  <router-view  :key="router.fullpath"></router-view>
Copy the code

Avoid using v-if with V-for

V-for takes higher precedence than V-if when processing instructions, so even if we render only a small part of the list, we have to traverse the entire list every time we re-render;

Scheme 1: Filter by computing attributes

<div v-for="item in activeUser" :key="item.id"> <! -- Contents --> <div/> computed:{activeUser:function() {return this.users.filter(user=>{
      return user.isActive
    })
  }
}
Copy the code

Scheme 2: Use V-IF for loop outer layer

<div v-if="status">
    <div v-for="item in items"></div>
</div>
Copy the code

Set the scope for the component style

Set the component style scope through the scoped feature

<style scpoed> // Style code only applies to current component </style>Copy the code

Avoid element selectors in scoped

A large number of element selectors such as (Button [data-V-fsdfae4]) are slower than class and feature combination selectors

How to name a single file group

A good naming convention can improve readability and the development experience in most cases

Scheme 1: the case of a single file component’s file

The filename of a single-file build is always uppercase (PascalCase) or kebab-case (kebab-case)

    components
    => my-components.vue
    => MyComponents.vue
Copy the code

Scheme 2: Basic component name

Components that apply a specific style and convention (presentation classes, non-logical stateless components) should all start with a specific prefix, with the following advantages over Base,App, or V

• When listed in private order, the application’s basic components are all listed together, making them easy to identify
• Because it’s multiple words, you can avoid randomly choosing prefixes when wrapping simple components (e.g., Mybutton,VueButton)

components
=>BaseButton.vue
=>BaseIcon.vue
=>BaseSearch.vue

Copy the code

Scheme 3: Singleton component name

Components that only have a single active instance are named with The prefix “The” to indicate their uniqueness, but this does not mean that The component can only be used on a single page, but only once per page. These components never accept any prop because they are customized for your application, not The context of The application.

components
=>TheHeading.vue
=>TheSidebar.vue
Copy the code

Option 4: Tightly coupled component names

Children that are tightly coupled to their parent should be named prefixed with the parent component

components
=>TodoList.vue
=>TodoListItem.vue
=>TodoLiisItemButton
Copy the code

Option 5: Word order in component names

Component names should start with a higher-level (usually generic description) word and end with a description of the new modifier

compenents
=>SearchButtonClear.vue
=>SearchButtonRun.vue
=>SearchInputQuery.vue
Copy the code

Option 6: Full-word component names

Component names should tend to be full words rather than abbreviations.

components
=>UserProfileOptions.vue
Copy the code

#### Solution 7: The component contains multiple words

Component names should always consist of multiple words, except for the root component App. Doing so avoids conflicts with existing and future HTML.

    Vue.component('todo-item',{
    
    })
Copy the code

Solution 8: Component names in the template are case-sensitive

Component names for single-file components and string templates should always be capitalized but always delimited in DOM templates

<my-component></my-component>
<MyComponent></MyComponent>
Copy the code

Solution 9: Self-closing component

Single-file components, string templates, and components with no content in JSX should be self-closing, but never do so in DOM templates

<! -- In single-file components, string templates,JSX --> <MyComponent /> <! <my-component></my-component>Copy the code

Case of prop name

When declaring a prop, it should always be named in a camel’s back, whereas in JSX it should be named in a horizontal connection

    props:{
        gettingText:String
    }
    
    < MyComponent getting-text="haha"> </MyComponent>
Copy the code

Multiple feature elements

Multiple feature elements should be written in multiple lines, one for each feature. Convenient and easy to read

 < MyComponent
    foo="1"
    bar="2"
    seo="3"> 
 
 </MyComponent>
Copy the code

Simple expressions in templates

Templates should contain only simple expressions, and complex expressions should be refactored to evaluate properties or methods

{{normaliFullName}}

computed:{
  normaliFullName:function() {return this.fullName.map(name=>{
      return name[0].toUpperCase() + name.slice(1)
    }).join(' ')}}Copy the code

Simple calculation properties

Complex computed attributes should be divided into as many simple attributes as possible.

computed:{
  basePrice:function() {return this.manufacureCost / ( 1- this.profitMargin)
  },
  discount:function() {return this.manufacureCost * ( this.discountPercent || 0)
  }
}
Copy the code

Instructions for

Instruction abbreviations (using: for V-bind:, @ for V-on:) remain consistent

  <input type="text" 
    v-bind:value="name"
    v-on:focus="onFocus"
  />

  <input type="text" 
    :value="name"
    @focus="onFocus"
  />
Copy the code

Refer to the article

Vue. Js