Bidirectional data binding optimization

Data in vue will be bi-directional data bound by default. If a large number of data irrelevant to rendering are directly placed in data, the performance consumed during bi-directional data binding will be wasted. These data irrelevant to rendering will be extracted and matched with object Free for processing

The columns data in table can be extracted separately from an external js file as a configuration file, or in the current A constant is defined in the vue file to define the columns data. Because it is fixed and will not be modified anyway, object should be used Freeze wrapping can not only improve performance, but also separate fixed data. This is also recommended for fixed data in the front of some drop-down boxes

function freeze(obj) {
	return Object.freeze(obj);
}
//blacklist
export const phoneOptions = freeze([
	{ label: 'cell-phone number', value: 1 },
	{ label: 'Landline', value: 0 }
]);
export const blackReasonOptions = freeze([
	{ label: 'Reasons for joining the blacklist', value: 'ADD_BLACK_RESON' },
	{ label: 'Reason for removal from blacklist', value: 'REMOVE_BLACK_RESON' }
]);

Note that object Freeze () freezes the value. At this time, you can still replace the reference of the variable. You can use this syntax only when you ensure that the data will not change. If you want to modify and interact with the data, it is not suitable to use freeze.

Control of Modal box

There are usually many bullets with different functions on a page. If each bullet is set with a corresponding variable to control its display, the number of variables will be redundant and naming will be difficult. One variable can be used to control the display of all Modal bullets on the same page

For example, there are three Modal pop ups in a page

// bad
// Each data control corresponds to the Modal display and hiding
new Vue({
    data() {
        return {
            modal1: false,
            modal2: false,
            modal3: false,
        }
    }
})

// good
// When the modalType is the corresponding value, its corresponding pop-up box is displayed
new Vue({
    data() {
        return {
            modalType:    // The modalType values are modal1, modal2 and modal3
        }
    }
})

picture

In the process of function development, image processing is often easy to be ignored, which will also affect the development efficiency and page performance to a certain extent

For the problem of picture compression, unless the picture must be displayed with high quality, the corresponding compression processing should be carried out

Select the picture format for different business scenarios

• Jpg is suitable for presenting colorful pictures. JPG pictures often appear as large background pictures, rotation pictures or Banner pictures
  Logo, picture or background with simple color and strong contrast, transparency, etc
• Merge the commonly used small pictures with low change frequency into Sprite, and base64 process the pictures with frequent changes and less than 6KB
• According to the number of project pictures and the distribution of user models of the project, webp is considered to be used for image processing

Select optimization

When traversing the drop-down box, it should be noted that the options label remains on the same line. If there is a line break, the value when selected will be left blank

<!-- bad -->
<Select :remote-method="remoteMethod">
    <Option v-for="item in temoteList" :value="item.value" :key="item.id">
        {{item.label}}
    </Option>
</Select>

You need to keep the values of Options and drop-down boxes on the same line

<!-- good -->
<Select :remote-method="remoteMethod">
    <Option v-for="item in temoteList" :value="item.value" :key="item.id">{{item.label}}</Option>
</Select>

data hierarchy

Data has a data hierarchy. Do not flatten it too much or nest it too deeply. If it is too flattened, it will lead to data namespace conflict, parameter transfer and processing. If it is too deeply nested, it will also lead to too deep recursive hierarchy when vue data is hijacked. If the nested hierarchy is crazy, be careful of recursive stack explosion. Moreover, too deep level will lead to inconvenient data operation and processing, and it is cumbersome to obtain data for fault-tolerant processing. Generally, it is best to keep 2-3 layers.

If there is only one layer of data, it is too flat

{
    name:   ,
    age:   ,
    gender:   
}

Cause inconvenient handling

An appropriate hierarchical structure can not only increase the maintenance and readability of the code, but also increase the convenience of operation and processing

{
    person: { // personal information
        name:   ,
        age:   ,
        gender:   
    }
}

Strategy mode

The use of policy mode can avoid too much if else judgment, and can also replace the switch of simple logic

const formatDemandItemType = (value) => {
    switch (value) {
        case 1:
            return  Basics 
        case 2:
            return  senior 
        case 3:
            return  VIP 
    }
}

// Strategy mode
const formatDemandItemType2 = (value) => {
    const obj = {
        1:  Basics ,
        2:  senior ,
        3:  VIP ,
    }
    
    return obj[value]
}

Style penetration

It is common to modify the style of third-party components in development, but due to the style isolation of scoped attributes, it may be necessary to remove scoped or create another style. These practices will bring side effects (component style pollution and lack of elegance), and style penetration will take effect only when it is used in css preprocessor.

• less use / deep/

<style scoped lang="less">
.content /deep/ .el-button {
	 height: 60px;
}
</style>

• scss uses:: v-deep

<style scoped lang="scss">
.content ::v-deep .el-button {
  height: 60px;
}
</style>

• stylus use > > >

<style scoped ang="stylus">
Outer layer >>> .custon-components{
  height: 60px;
}
</style>

Nesting level

When the browser parses css, it recursively matches from right to left. Too deep hierarchical nesting not only affects performance, but also reduces style readability and code maintainability. Generally, the layer frame is controlled within 5 layers

Double quotation mark

The value in the attribute selector must be enclosed in double quotation marks. Neither single quotation marks nor quotation marks are allowed. Double quotation marks are also recommended for attribute values of html, and single quotation marks are used in js