vue 开发中的技巧

1. Modal框的控制
一个页面种通常会存在很多个不同功能的弹框，若是每一个弹框都设置一个对应的变量来控制其显示，则会导致变量数量比较冗余和命名困难，可以使用一个变量来控制同一页面中的所有Modal弹框的展示，比如某个页面中存在三个Modal弹框

// bad
// 每一个数据控制对应的Modal展示与隐藏
new Vue({
    data() {
        return {
            modal1: false,
            modal2: false,
            modal3: false,
        }
    }
})

// good
// 当modalType为对应的值时 展示其对应的弹框
new Vue({
    data() {
        return {
            modalType: '' // modalType值为 modal1，modal2，modal3
        }
    }
})

2. debounce使用
例如远程搜索时需要通过接口动态的获取数据，若是每次用户输入都接口请求，是浪费带宽和性能的，当一个按钮多次点击时会导致多次触发事件，可以结合场景是否立即执行immediate

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

//js
import {debounce} from 'lodash'
methods：{
    remoteMethod：debounce(function (query) {
        // to do ...
       // this 的指向没有问题
    }, 200),
}

3. 样式穿透
在开发中修改第三方组件样式是很常见，但由于 scoped 属性的样式隔离，可能需要去除 scoped 或是另起一个 style 。这些做法都会带来副作用（组件样式污染、不够优雅），样式穿透在css预处理器中使用才生效。

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

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

// stylus使用 >>>
<style scoped ang="stylus">
外层 >>> .custon-components{
  height: 60px;
}
</style>

4. 双引号
属性选择器中的值必须用双引号包围，不允许使用单引号，也不允许不使用引号，html的属性值也是推荐使用双引号，js中使用单引号

.custom-style{
	font-family: "PingFang SC", "STHeitiSC-Light";
}

5. 属性顺序
同一 规则下的属性在书写时，应按功能进行分组。并以 Formatting Model（布局方式、位置） > Box Model（尺寸） > Typographic（文本相关） > Visual（视觉效果） 的顺序书写，以提高代码的可读性。

解释：
Formatting Model 相关属性包括：position / top / right / bottom / left / float / display / overflow 等
Box Model 相关属性包括：border / margin / padding / width / height 等
Typographic 相关属性包括：font / line-height / text-align / word-wrap 等
Visual 相关属性包括：background / color / transition / list-style 等
另外，为增加可读性，如果包含 content 属性，应放在属性的最前面。