数组去重、深拷贝，过滤器、hook钩子函数

1.数组去重

arr.reduce((res, item) => {

    let ele = res.find(o => o[key] === item[key]);

    if(!ele) {

        res.push(item);

    }
    return res;

}, [])

2.只允许输入0-1(包含0,1)之间的两位小数

<el-input ref="input" v-model="discrimination" placeholder="请填写0至1之间的数值" @hook:mounted="hookMounted">

</el-input>

hookMounted() {

  let input =this.$refs.input.$refs.input;

  input.onkeypress = function(e) {

  let reg = /^(0\.\d{0,2}|0|1)$/;

  if(!reg.test(e.target.value + e.key)) {`

     return false;
   }
   
 };
 
},

3.过滤器

1>用法

只要使用管道符号就可以了。这里和命令行里的“管道”或者后端说的“中间件”的道理是一样的，一个输入一个输出。

<span>{{ 数据 | 过滤器}}</span>

2>自定义过滤器

filters: {
    percent(value) {
        if(Number.isFinite(value)) {
            return parseInt(value *100) +'%';
        }
    }
},

3>过滤器的参数

第一个参数是原始数据，第二个参数对应传入的第一个参数，然后以此类推。

<div id="root">

    {{date | formatDate(66,99)}}

</div>

filters: {

    formatDate(value, arg1, arg2) {`
        console.log(value)// date
        console.log(arg1)// 66
        console.log(arg2)// 99
        ...
    }

}

4> vue监听子组件的生命周期钩子

<template>
    <Child @hook:mounted="listenToChild"></Child>
</template>

<script>

methods:{

    listenToChild(){
        //do something
    }
}
</script>

5>深拷贝

const deepClone = (data) => {
    if(data instanceof Object) {
        let newData = new data.constructor();
        for (let i in data) {
            if (data.hasOwnProperty(i)) {
                newData[i] = deepClone(data[i]);
            }
        }
        return newData;
    } else {
        return data;
    }
};