vue/js部分使用小技巧（持续更新）

• 赋值解构

const obj = {a:1,b:2,c:3}
const {a,c} = obj;//a=1,c=3;按对象key值
const obj = [{a:1},{b:2},{c:3}]
const [a,c] = obj;//a=1,c=2;按数组顺序

• vue使用事件第一事件可以传默认值$event第二事件再传主要需要的值。如以下父组件接收子组件参数params：

@sonParams="sonParams($event,params)"

• 字符串换行，比较简单的方式

const string = '字符串字符串\
                字符串\
                字符串'

用``符号可以直接换行

const string = `字符串字符串
                字符串
                字符串`

• 详情页展示富文本等位置，图片大小不是满屏100%，解决可替换字符串

  通常用v-html解析富文本，但是图片是按照原大小渲染的，可以处理一下添加图片内行样式；

this.content = res.content.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ');

• 父子组件双向更新

//father
<div :showPay.sync="showPay"></div>
//son
this.$emit("update:showPay", false);

• 父子元素事件污染/事件冒泡、传递等

阻止子元素向父元素事件冒泡

@click.stop="onClick"

阻止父元素向子元素事件传递

@click.self="onClick"

• 遇到的bug

  • 组件内第一个节点不允许v-for循环。
  • 重复声明components，发生各种问题
  • 注意各api/函数方法调用准确性，比如data(){return {}} 一定要return

• if的简写

  逻辑运算符说明：

  || 或的关系，如果前面的值等于false就会自动执行第二个值

  && 且的关系，如果前面的值等于true就会自动执行第二个值

if(bool){
 a=fn()
}
//简写
bool && (a=fn())
----------------------------
if(!bool) {
 a=fn()
}
//简写
bool || (a=fn())
----------------------------
if(bool){
 a=fn()
}else{
 a=fn2()
}
//简写
bool?(a=fn()):(a=fn2())

• 数组去重，es6

let objArr = Array.from(new Set(["a", "b", "b", "c"]));  //["a","b","c"]

Array.from()可以把new Set(arr)结构转为数组。可以用...扩展运算符简写成

let objArr = [...new Set(["a", "b", "b", "c"])]; //["a","b","c"]

• 手机号校验

/^1(3|4|5|6|7|8)\d{9}$/.test(phoneNum)

• 字符串长度。 中文返回2，英文返回1

 for (let i=0; i<this.str.length; i++) {    
         const c = this.str.charCodeAt(i);   
        //单字节加1   
        if ((c >= 0x0001 && c <= 0x007e) || (0xff60<=c && c<=0xff9f)) {   
          len++;   
        }   
        else {   
          len+=2;   
        }   
     }

• css深度选择器

有scoped父组件的样式将不会渗透到子组件中。一般情况是用>>>进行深度选择；比如：

.a >>> .b{/* */}

但是用scss选择器要改成/deep/，最新的穿透写法已经改成了::v-deep{}

.a /deep/ .b{/* */}
//new
.a{
	::v-deep{
    	.b{/* */}
    }
}

• css动态计算长度值

width: calc(100% - 100px);
height: calc(100vh - 20px);

• Array遍历，跳出循环，map、forEach、filter区别，是否可返回

Array的几个遍历的方法各有千秋：

• map：item为深拷贝，可直接更改item值；不允许break（跳出当前循环，继续循环数组）。
• forEach：item为浅拷贝，返回的item并不能更改原数组；
• filter：是过滤值的，
• 如果要跳出循坏，还是用for。