Summary of practical skills commonly used in Vue projects

Preface

In Vue project development, it is easy to have some problems, such as code duplication and complexity. In fact, there are many techniques that can be used in Vue project development. This article will list some simple and easy-to-use techniques to help us write beautiful code. The technology stack used is Vue2.0 + TypeScript + vue-property-decorator + ElementUI. The following techniques will be used:

• Use $attrs and $listeners for multi-level data and event delivery
• Realize two-way binding of data to facilitate data maintenance
• Using Mixins
• Use dynamic components to lazy load components
• Use ::v-deep in component-scoped CSS to modify component styles
• Optimizing code using decorators
• Use require.context to get project directory information

1. Use $attrs and $listeners for multi-level data and event delivery

Let's first talk about how to pass Props, which can be divided into static and dynamic Props:

<!-- Static prop -->
<blog-post title="My journey with Vue"></blog-post>
<!-- Dynamic prop -->
<blog-post v-bind:title="post.title"></blog-post>
<!-- Dynamic prop transfer can be shortened to -->
<blog-post :title="post.title"></blog-post>
<!-- When you need to pass multiple props, you can write them together on v-bind-->
<blog-post v-bind="{ editable, title: post.title}"></blog-post>

Now that we know how Props are passed, let's take a look at how the official documentation defines $attrs. In the documentation by You Dada, $attrs is introduced as follows:

$attrs: Contains attribute bindings in the parent scope that are not recognized (and retrieved) as props (except class and style). When a component does not declare any props, all parent scope bindings (except class and style) are included here, and can be passed to the inner component via v-bind="$attrs"

$attrs contains other props that are not declared in props passed into the parent scope, so we can use $attrs to replace props that are not needed in the parent component but are required by the child component, and pass them to the descendants uniformly through v-bind="$attrs". This avoids declaring them one by one and then passing them one by one.

<blog-post v-bind="$attrs"></blog-post>

The above line of code passes other attributes in this scope that are not props to the blog-post component through v-bind="$attrs".

After the parent component is passed to the descendant component through $attrs, what should the descendant component do if it wants to update the parent component state by triggering an event? If we emit events one level at a time, will the code become too cumbersome and complicated? In Vue, this problem can be solved by $listeners. First, take a look at the official documentation about $listeners:

Includes v-on event listeners from the parent scope (without the .native modifier). It can be passed into inner components via v-on="$listeners" - very useful when creating higher level components.

The documentation says that $listeners contains event listeners in the parent scope. This means that $listeners represents the event listener set in the parent component. As long as the event triggers the parent component instead of its own, it can be represented by a v-on="$listeners".

<!-- Parent component (first level component) -->
<componentA @on-change="handleChange" v-bind="{ editable, title: post.title}" />

<!-- Middle layer components -->
<Child v-bind="$attrs" v-on="$listeners"/>

<!-- The target component for data transfer, the component triggered by the event-->
<div @click="handleClick">{{ title }} </div>
<script>
  export default {
    props: {
      title: String
    }
    handleClick() {
      this.$emit('on-change', 'New Title');
    }
  }
</script>

In the above code example, the rest of the Props are passed to the Child component via v-bind="$attrs" in the middle-layer component, and then the event listener in the parent scope is bound via v-on="$listeners". Once emitted, it will be passed to the parent component.

2. Realize two-way binding of data to facilitate data maintenance

There are many such scenarios where the parent component needs to pass data to the child component, and when the child component triggers a data update, it immediately feeds back to the parent component, the parent component data is updated, the one-way data flows to the child component, and finally the child component is updated. Usually, props + $emit is used to update the status, but this approach is a bit clumsy and difficult to maintain, so the maintainability of the code can be improved by implementing "two-way binding" of data. This can be achieved by:

Use .sync to implement "two-way binding" of Prop

Add the .sync modifier when v-bind prop, and use this.$emit('update:propName', newValue) when assigning new values

<!-- .sync is an abbreviation for the v-on:update mode -->
<Child v-on:update:title="title" />
<!-- equivalent to -->
<Child :title.sync="title" />

If you want to update the title value in the above code, you only need to use this.$emit('update:title', 'new title') to complete the data update.

Using the model option

model is a new option added in 2.2.0+. By default, v-model on a component will use a Prop named value and an event named input. The model option can specify the Prop name and event name to implement v-model. The benefit is that while implementing v-model, it also avoids conflicts between Prop and event names.

<!-- Parent component -->
<Model v-model="checked"/>

<!-- Model component -->
<div @click="handleClick">
  <p>v-model of custom components</p>
  checked {{checked}}
</div>
<script lang="ts">
export default {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: Boolean
  },
  methods: {
    handleClick() {
      this.$emit('change', !this.checked);
    }
  }

In the above code, you only need to add prop and event to the model option to implement v-model. In the Vue + TS project, vue-property-decorator provides a Model decorator, which needs to be written like this:

@Model('change', { type: Boolean }) readonly checked!: boolean
handleClick() {
  this.$emit('change', !this.checked);
}

We can achieve "two-way binding" of data only through .sync and model. Writing code in this way can reduce our code to a certain extent and make the code more elegant and maintainable.

3. Using Mixins

Mixins can be used in two scenarios:

1. Use it to extract common code within components to enhance code reuse. Do not reuse it globally. It is best to use it within a component or page.
2. When using it to separate functional points, sometimes you may encounter a situation where there are many business functions, resulting in a large number of lines in the Vue file, making the code difficult to maintain and the functional point code difficult to track. This huge Vue file can be better maintained by extracting functional codes.

First, write a public mixin file and write highly reusable states and functions into it.

export default class CommonMixins extends Vue{
    public paginations = {
        pageSize: 20,
        total: 0,
        currentPage: 1,
    }
    handleChangePageSize (pageSize: number, cb: Function) {
        this.paginations.pageSize = pageSize;
        cb();
    }
    handleChangePageNum (currentPage: number, cb: Function) {
        this.paginations.currentPage = currentPage;
        cb();
    }
}

vue-property-decorator provides a decorator for Mixins. To introduce Mixins into a business page, you only need to pass in Mixins. You can pass multiple Mixins, which means mixing in multiple Mixins.

<script lang="ts">
import { Component, Mixins } from 'vue-property-decorator';
import CommonMixins from "./common-mixin";
import PermissionMixins from "./permission-mixin";
@Component({})
export default class Parent extends Mixins(CommonMixins, PermissionMixins) {
}
</script>

If you only need one, you can also inherit directly

<script lang="ts">
import { Component, Mixins } from 'vue-property-decorator';
import CommonMixins from "./common-mixin";
@Component({})
export default class Parent extends CommonMixins {
}
</script>

When we encounter a page with many functions and a large amount of code, we can use Mixin to extract some functions and manage these functions through files, which will make it easier to manage the code.

4. Use dynamic components to lazy load components

Components are loaded synchronously, but when the page has a lot of content, some components do not need to be loaded at the beginning, such as pop-up components. These can use dynamic components and load them after the user performs certain operations. This can improve the performance of main module loading. In Vue, you can use component dynamic components to decide which component to render based on the value of is.

<template>
  <div>
    Home page<br/>
    <button @click="handleClick1">Click record component 1</button><br/>
    <button @click="handleClick2">Click record component 2</button><br/>
    <component :is="child1"></component>
    <component :is="child2"></component>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
@Component({})
export default class AsyncComponent extends Vue {
  public child1:Component = null;
  public child2:Component = null;
  handleClick1() {
    this.child1 = require('./child1').default;
  }
  handleClick2() {
    this.child2 = require('./child2').default;
  }
}
</script>

In the sample code, the component is loaded only when it is clicked. The component can also be displayed and hidden with v-show, so that the component will only be mounted once to optimize performance.

5. Use ::v-deep in component-scoped CSS to modify component styles

There are many scenarios where you want to change the style of a UI component but are afraid of affecting other people's use, and the change may not take effect after adding scope. You can use the ::v-deep deep selector to modify the CSS style within the component scope. In CSS we can use the >>> operator, but in the preprocessor we have to use /deep/ or ::v-deep.

<style scoped>
>>> .ivu-tabs-tabpane {
        background: #f1f1f1;
    }
</style>
<style lang="scss" scoped>
/deep/ .ivu-tabs-tabpane {
        background: #f1f1f1;
    }
</style>
<style lang="scss" scoped>
::v-deep .ivu-tabs-tabpane {
        background: #f1f1f1;
    }
</style>

::v-deep and /deep/ have the same function, but /deep/ is not recommended. In Vue 3.0, /deep/ will not be supported.

6. Use decorators to optimize code

Decorators increase the readability of the code, clearly express the intent, and provide a convenient means to increase or modify the functionality of a class, such as providing anti-shake functionality to methods in the class.

import debounce from 'lodash.debounce';
export function Debounce(delay: number, config: object = {}) {
  return (target: any, prop: string) => {
    return {
      value: debounce(target[prop], delay, config),
    };
  };
}

The advantage of this is that it is very convenient to use and increases the readability of the code.

@Debounce(300)
onIdChange(val: string) {
  this.$emit('idchange', val);
}

7. Use require.context to get project directory information

Regarding require.context, the webpack documentation describes it this way:

You can pass three arguments to this function: a directory to search, a flag indicating whether to search its subdirectories as well, and a regular expression to match files.
webpack will parse require.context() in your code during the build. This feature is helpful if you want to import all files in a folder, or import all files that match a regular expression.

According to this prompt, we can reference all the files under a folder, and use the obtained file information to perform some operations. For example, when registering components, we originally needed to import and register them one by one, and if we want to add new ones later, we have to write them again. Now we can use require.context to optimize this section of code.

// import WmsTable from './wms-table/table/index';
import Table from './table/index.vue';
import CustomHooks from './custom-hooks/custom-hooks-actions/index';
import SFilter from './s-filter/filter-form';
import WButton from './button/index';
import CreateForm from './createForm/create-form/CreateForm.vue';
import Action from './table/action-table-column.vue';
import DetailItem from './detail-item.vue';


Vue.component('w-filter', SFilter);
Vue.component('w-button', WButton);
Vue.component('custom-hooks', CustomHooks);
Vue.component('create-form', CreateForm);
Vue.component('w-table', Table);
Vue.component('w-table-action', Action);
Vue.component('zonetime-date-picker', ZonetimeDatePicker);
Vue.component('detail', DetailItem);

When registering global components, there is no need to import and register them one by one. Use require.context to automatically import modules. The advantage of this is that when we create a new component, we don’t need to register it manually, but it will be automatically completed for us at the beginning.

const contexts = require.context('./', true, /\.(vue|ts)$/);
export default {
  install (vm) {
    contexts.keys().forEach(component => {
      const componentEntity = contexts(component).default;
      if (componentEntity.name) {
        vm.component(componentEntity.name, componentEntity);
      }
    });
  }
};

Summarize

This article introduces some techniques that are often used in Vue practice. The purpose of these techniques is to improve development efficiency, such as simply implementing two-way data binding and cross-level data transmission. In addition, they can also improve the maintainability and readability of the code, such as very practical decorators and using Mixin to split code and manage function points.

This concludes this article on the summary of practical skills commonly used in Vue projects. For more content on common skills in Vue projects, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

References

• require.context
• Vue official documentation