Summary of some practical little magic in Vue practice

How can you forget lazy loading of routes that allows you to load faster the first time?

Routing lazy loading allows our package to not load all pages at once, but only load the routing components of the current page.

For example, if you write it like this, all of them will be loaded when loading.

const router = new VueRouter({
  routes:[
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
})

Therefore, the above writing should be avoided and lazy loading should be used as much as possible.

Lazy loading writing, combined with webpack import

const router = new VueRouter({
  routes:[
    {
      path: '/',
      name: 'Home',
      component: () => import(/* webpackChunkName: "home" */ '../views/Home.vue')
    },
    {
      path: '/about',
      name: 'About',
      component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
    }
  ]
})

Do you remember there was a method called Object.freeze?

All students should know that when vue is initialized, the data in data will be converted into responsive data. However, when we write business logic, some data will never change once initialized, and it does not need to be made into responsive data by Vue at all. Therefore, we should freeze these unchanged data through the Object.freeze method to avoid some useless operations when Vue is initialized.

🌰

export default {
  data:()=>({
    list:Object.freeze([{title:'I never need to change, I don't need responsiveness'}])
  })
}

Asynchronous components are so powerful, have you never used them?

Asynchronous components allow us to load some components only when we need them, rather than loading them at the beginning of initialization. This is the same concept as lazy loading of routes.

🌰

export default {
  components:{
    AsyncComponent:()=>import(/* webpackChunkName: "AsyncComponent" */ './Async')
  }
}

The package loaded for the first time does not contain the modified component code

When a click triggers a certain behavior, the package introduced is like this

There is also a more complete way to write asynchronous components

🌰

export default {
  components:{
    AsyncComponent:()=>({
      component:import(/* webpackChunkName: "AsyncComponent" */ './Async'),
      delay:200, // Delay in milliseconds, default is 200
      timeout:3000, //Timeout after loading for a few millimeters, triggering the error component loading:LoadingComponent, //Show error before the component is loaded back:ErrorComponent //Show when the component times out })
  }
}

Are you still using this in computed?

I guess there are still many students who use this.xxx to get the data in data and the methods in methods in the computed attribute. Maybe they will also use this.$store to get the state and commit of vuex, and even use this.$route to get the data in the route. In fact, we can avoid these ugly this, which may even bring us invisible performance problems. In practice, the data we can access through this can be structured in the first parameter of computed.

🌰

export default {
   haha({$attrs,$route,$store,$listeners,$ref}){
     // You can also construct many attributes, which can be printed by yourself. 
   }
}

How to avoid v-if and v-for together?

Why should we avoid using v-if and v-for on the same element at the same time? Because there is a section of code in the source code of Vue that handles the priority of instructions. This section of code processes v-for first and then v-if. So if we use two instructions together in the same layer, some unnecessary performance problems will occur. For example, if this list has 100 pieces of data, and in some cases, they do not need to be displayed, vue will still loop to display the 100 pieces of data and then judge v-if. Therefore, we should avoid this situation.

Bad 🌰

    <h3 v-if="status" v-for="item in 100" :key="item">{{item}}</h3>

OK 🌰

    <template v-if="status" >
        <h3 v-for="item in 100" :key="item">{{item}}</h3>
    </template>

Why don't you use the powerful .sync modifier?

If you want to control the display and hiding of a child component in the parent component, are you still passing a prop and a custom method? This will be very troublesome. You might as well try the sync modifier.

🌰

 // Parent component template>
  <div>
    <Toggle :show.sync = 'show'></Toggle>
  </div>
</template>

//Toggle component <template>
  <div>
    <div v-if="show">
    Show and hide components</div>
  <button @click="test">Hide component</button>
  </div>
</template>
<script>

export default {
  props:['show'],
  methods: {
    test(){
      this.$emit('update:show',false)
    }
  }
}
</script>

$attr and $listeners let you encapsulate components like a duck to water!

Many students may not use $attr and $listeners much, but in fact, they allow us to re-encapsulate components of some component libraries, which is very useful.

Here is a brief introduction to both of them:

$attr: If a component passes not only the attributes required by prop, but also other attributes besides prop, then these attributes will be collected in $attr.

$listeners: If a component passes a custom event, but the child component is not triggered by emit, then these custom methods will be collected in $listeners.

Here is a simple secondary encapsulation of ElementUI's Tabel component 🌰

<el-table 
   v-bind="$attrs"
   v-on="$listeners">
   <template v-for="item in column">
    <el-table-column v-bind="item" />
   </template>
</el-table>
<script>
export default {
  props:{
      column:{
        type:Array,
        required:true
      }
   }
}
<script>

v-model also has such a nice modifier!

There are three useful modifiers on v-model. I wonder if you have used them. One is lazy, one is number, and one is trim.

lazy: can turn @input events into @blur events

number: Only numeric values ​​can be entered

trim: clear the spaces on both sides

🌰

   //lazy
   <input v-model.lazy="msg" />
   //number
   <input v-model.number="msg" />
   //trim
   <input v-model.trim="msg" />

Did you know that v-model can also customize its properties?

If you want to use v-model on a custom Input component, you need to introduce a value and trigger an input event in the child component. The default syntax sugar of v-model is a combination of these two things.

🌰

// Parent component <template>
  <div>
    <CustomInput v-model='msg' />
  </div>
</template>

//CustomInput

<template>
  <div>
    <input type="text" :value="value" @input="test">
  </div>
</template>
<script>
export default {
  props:['value'],
  methods: {
    test(e){
      this.$emit('input',e.target.value)
    }
  },
}
</script>

But what if the component is not an input, but a checkbox or a radio? I don’t want to receive a value and input event, I want to receive a more semantic checked and change event, what should I do?

🌰

// Parent component does not need to be changed...
//CustomInput
<template>
  <div>
    <input type="checkbox" :checked="checked" @change="test">
  </div>
</template>
<script>
 props:['checked'],
 model:{
    props:'checked',
    event:'change'
  },
  methods: {
    test(e){
      this.$emit('change',e.target.checked)
    }
  }
}
</script>

Are you still using the browser's scrollTop to scroll your page?

Sometimes when we operate the scrolling behavior of the page, the first thing we think of is scrollTop. In fact, we have a second option, which is the scrollBehavior hook provided by VueRouter.

🌰

const router = new VueRouter({
  routes:[...] ,
  scrollBehavior(to,from,position){
      // The position parameter can be printed by itself. Clicking the left and right arrows of the browser will trigger return{
          // Many parameters can be returned here, a few are listed below, please check the official website for details x:100,
          y:100,
          selector:#app,
          offset:200,
          //etc}
  }
})

The native events you defined on the child components do not take effect?

Sometimes we want to listen to some events on a child component, such as click, but no matter how you click, it doesn't respond. Why?

🌰

<template>
    <div>
        <Child @click="test"></Child>
    </div>
</template>
<script>
    methods:{
        test(){}
    }
</script>

Because if you write it this way, Vue will think that you have customized a click event and it needs to be triggered by $emit('click') in the child component. What if I want to trigger it in the parent component? That's where the native modifier comes in.

🌰

<template>
    <div>
        <Child @click.native="test"></Child>
    </div>
</template>
<script>
    methods:{
        test(){}
    }
</script>

Use keep-alive to cache your page status!

Keep-alive can help us keep the previous component from being destroyed when switching components. It is commonly used in management background systems.

🌰

<keep-alive>
    <router-view></router-view>
</keep-alive>

Summarize

This is the end of this article about some practical little magic in Vue practice. For more relevant Vue practical skills, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!