一些快捷点记录--持续更新

1.js格式化插件 

安装beautiful插件，然后再setting.json里加如下

 "editor.formatOnSave": true, // 保存后自动格式化
    "beautify.language": {
        "js": {
            "type": [
                "javascript",
                "json"
            ],
            "filename": [ // 可以在项目中单独添加配置文件
                ".jshintrc",
                ".jsbeautify"
            ]
        },
        "html": [
            "html",
            "vue"
        ]
    }

2.关于代码书写与合并

一般是这样的，一个项目，你拉取下来之后，基本都是切一个分支，在分支上开发，然后每天提交

等到开发完了，pull 拉取一下master的最新代码合并一下，然后提交分支，最后在平台上提交pull request，然后合并

最后本地切到master上，拉一下最新的master代码

3.关于git秘钥

其实git秘钥的作用和拉代码没有太大关系

git秘钥的作用是让你的gitlab账号或者是gittee账号或者是github账号与你这台电脑之间有个关联，这是ssh建立联系，本地git与你的账号建立秘钥联系

当然还有一种是https的方式，就是你clone代码的时候再让你输入gitlab账号密码或者是gittee账号密码或者是github账号密码，一般只用输一次，本地git登录你的账号

然后就是本地git配置远程仓库，也就是你要拉取代码和提交代码的地方，一般这个仓库就是你自己账号里的仓库，不过比如在公司，那一般就是公司有个公共账号里，有很多项目仓库

而公司会给你一个gitlab账号密码或者是gittee账号密码或者是github账号，或者是你用自己的，一般是给你一个新的，然后会把你这个账号拉到相应的项目仓库里作为成员，这个

时候你才有权限去拉取代码

所以明白了吗，git秘钥的作用是吧你的账号和你的电脑联系起来，而拉取代码是，你这个账号要有权限去拉取你本地git关联的仓库的代码

 

4.前端代码性能耗时测试网站

https://jsbench.me/

 

5.关于判断，判断比较影响性能，少写

然后一般先判断否，因为否的情况比较少，

尽量写

if(非){

非情况代码

return

}

好情况代码

少写

if(){非情况代码}else{好情况代码}

 

6.crx结尾的插件拖不进谷歌扩展程序，解决方法，首先，开发者模式打开，然后把crx后缀改为rar等压缩类的，然后右键解压缩提取文件，会得到一个文件夹，然后就能把文件夹拖进去了，就会有插件了

 

7.效果如图

是setting.json里的这个代码在起作用  "emmet.triggerExpansionOnTab": true,

 

8.js的map方法还可以这样调用

Array.apply(null, { length: 20 }).map(() => {
  console.log('fuck')
})

这样就会执行打印20次,第一次见这种用法

 

9.封装全局弹框

看看这篇博客 虽然没看 https://www.cnblogs.com/fqh123/p/10124306.html

10.vue传布尔值的一种方便的方式

如果不写,默认就是false,如果这样传过去就是tue

其实在我看来,本来就是传键值对,而对象中的键值如果相同,是可以省略,只写一个的,这里应该同理,所以才可以这样

11.vue中给组件加name属性的作用

1.keep-alive可以include加组件,缓存

2.可以让组件递归调用自身

3.浏览器开发者工具vuetool里可以清晰的看到每个组件的名字

 

12.一般渲染element表格的时候，需要处理的话，或者需要动态改变的话，都可以放在computed的里面处理，很方便

https://blog.csdn.net/aaron9185/article/details/85172460 js里一个数组对象根据自己的某个字段排序，

tableDataBySort() {
            this.tableData.sort((a, b) => {
                return a.sort - b.sort
            })
            return this.tableData
        }

13.关于 Array.apply(null, { length： 20 }).map() 的思考

https://blog.csdn.net/qq_20794095/article/details/103244977

14.如果你要二次封装elemnt  el-dialog弹框name会遇到一个问题

因为你是在父组件中控制弹框的显示和隐藏，也就是说父组件传值下去给子组件，子组件又传给el-dialog来显示隐藏

显示的时候还好，但是当打开弹框，你再点别处的时候，会触发弹框的消失，这是el-dialog内部的，其实它就是默认点非弹框部分，吧弹框身上的

传的显示隐藏值改为false，隐藏，然后，由于这个值是父组件传的，那么此时你会报错，因为你在子组件内改了父组件的值，avoid mutate。。。。啥的

也就是vue不太支持子组件改父组件传的值，

不过如果你传对象，其实还是可以改属性的，传布尔，你一改整个都改了，比如你传flag:false，子组件改成flag:true，true整体替代了false，相当于flag整个被替换了

vue就觉得你这个子组件改了父组件传的值，不太好，就报错

但是你这样  obj:{flag:false}    子组件改成 obj:{flag:true}, 就不会报错，为何呢，因为子组件只是改了obj的flag属性，并没有替换掉整个flag啊，

当然了，如果你在子组件不是改obj.flag = true，而是让obj = {flag:true}，那我估计会报错，和上面布尔的理由一样

 

15.子传父的语法糖

这里其实可以得到两点

1.sync是子传父的语法糖

2.二次封装的时候,比如父组件是一个form,里面一个input的值,来自于一个子组件,那么可以用sync绑定,比如 form.age,传给子组件就,:sync.age="form.age",子组件的值一改form.age也相应直接改变,非常便捷,这种场景很常见

如果不用sync,那么就得通过子传父,..一样的效果,但比较麻烦一点

16.vue中data如果用普通函数和箭头函数区别,this指向区别

17.webpack-dev-server不是内部命令

这个错误一般是nodemouduel包没下好,或者没下,或者一些其他的奇怪原因,比如vue或者node没安装好,

 

18.vue单个组件引入store,与全局引入store

单个

全局

19.关于sync的几个小问题验证

1.sync能够传多个吗    答:可以

2.如果 obj={flag:true}  :obj.sync = "obj"  传到子组件,那么子组件可以通过 this.$emit('''updata:obj.flag',false)来改变obj的flag吗,答案是报错

要注意一点,本来,sync就是字传父的语法糖了,所以其实你就算整个改变obj,也是相当于触发父组件方法,在父组件中改的,所以不要觉得子组件中改了父组件的值,毕竟用了sync,不用sync就要用函数改

20.一种奇怪的+用法

21.click事件与blur事件冲突，使得click事件不执行，如何解决

https://blog.csdn.net/weixin_43398732/article/details/107103612

https://blog.csdn.net/Object_prototype/article/details/112967664

总的来说就是click换成mousedown

或者blur的事件加个settimout包起来执行

 

22.如何让输入框只能输入数字

οninput="value=value.replace(/[^\d]/g,'')"

看看这篇文章 https://blog.csdn.net/weixin_30436101/article/details/101647940

 

23.父元素overflow hidden 子元素如何不受影响，

子绝父相，只要子元素设置absolute，然后父元素外面的元素设置relative，不设置就默认body， 那么以absolute以最近的设置了absolute或者relative的元素定位，就不会受影响了

这个的应用场景是，element表格中，每列单元格都是溢出隐藏的，但是我又需要能不隐藏，就这样做

.data_table {
                    max-width: 1100px;
                    width: 100%;
                    ::v-deep th {
                        background-color: #f2eded;
                    }
                    ::v-deep td {
                        /*transition: background-color .25s ease;*/
                        position: relative!important;
                    }
}

穿透改一下td 未relative就ok了

24.怎么吧svg图转成png，

在ie浏览器里另存为，里面有选项，哈哈，只有ie有，真牛逼

https://www.jianshu.com/p/4417e4b6b36f?utm_campaign

25.关于pointer-event点击穿透的一些应用

可以看看这篇博客 https://blog.csdn.net/hsany330/article/details/52870804

26.图片在div中下面有间隙，吧图片的display设置未block就可以了

 

27.

类似这种效果，就是一行数据输入时，新增一行空白数据，但是之后再怎么输入，也不会再增加，而后面一条数据第一次输入时

又会增加一条空白数据，之后也是再怎么输入也不会增加

方法，利用computed与watch

// 最后一行的属性名称
        private get lastLineDataName() {
            const self = this as any;
            const tableData: object[] = self.stepForm4.codeCoverageDTO;
            let len: number = tableData.length;
            if (len < 1) return '';
            const lastLine: object = tableData[len - 1];

            return lastLine['appName'];
        }
        // 首先数组长度0，只会返回''
        // 数组长度1，进入执行，返回第一行的数据
        // 此时对于watch的监听来说，它是一个全新的值
        // 然后就会加一行，接着lastLineDataName，监听的就变成了第二行。。
        // 也就是说，你改变第一行也没用了，它只会返回最后一行
        // 也就是说，逻辑是这样的
        // 监听最后一行，最后一行如果值改变了，立马执行一次watch，
        // 加一行数据，接着监听由变成了这行新的数据，那么你对上一行操作
        // 就不再触发computed，自然也就不再触发watch了
        
        // 为什么，不把这个操作就放在computed里面做呢
        // 因为职责原因
        // computed是别的值影响它的值得变化
        // 此处tableData[len - 1]; lastLine['appName'];表格最后一行影响着这个值
        // 而watch用于监听某一值变化了，改变其他值
        // 所以监听computed变化了，改变tabledata

        //  computed不会执行，然后
        // len有一个值，computed就执行了
        // 返回的是最后一个行的数

        // 监听 最后一行的属性名称
        @Watch('lastLineDataName')
        getLastLineDataName(newVal: string, oldVal: string) {
            const self = this as any;
            if (newVal && newVal != '') {
                let newRow: object[] = [_.extend({}, self.rowdata, {
                    id: 'new_' + (++self.newCount)
                })];
                self.stepForm4.codeCoverageDTO = self.stepForm4.codeCoverageDTO.concat(newRow)
            }
        }

真的很巧妙

但是却有一个非常大的问题，无法解决，那就是再次操作数组的时候，这个数组你无论怎么删除，视图都无法刷新。。。。各种方法都试过了，包括数组地址改变等等

遇到过好几次了，总的来说

watch，computed的确实功能强大，很好用，但是同时也很难用，很恶心

像上次我做的那个参数构造器，发现computed里面没法异步逻辑

这次这个发现watch监听之后，在watch里面push一个对象到数组，在外面没法改这个数组，有bug删不掉了，怎么都弄不好

也可能是我太菜了，哪里搞错了。。。。才出现这样的问题，唉。确实是我的问题啊

同样的功能，同事这样实现了，但是我用一样的方法，却出现这样的问题，试了试同事那一块的，她的可以正常删除。。。我的问题，，，算了

所以我没用他们实现了

handleInput(index) {
            // 那么只好在这里实现computed和watch实现的功能
            // 如何做呢
            // 输入事件，我只检测当前这个输入事件是否是最后一个框的输入事件
            const self = this as any;
            const tableData: object[] = self.stepForm4.codeCoverageDTO;
            let len: number = tableData.length;
            if (len < 1) {
                return
            }
            if (index != len - 1) {
                return
            }
            self.stepForm4.codeCoverageDTO.push({
                appName: "",
                appType: "java",
                exploreAddress: "",
                sourceCodeAddress: ""
            })


        }

很简单，思想最重要

其实像computed啥的只是手段，手段无穷无尽，不一定都有用都合适，但只要有思路，就能从众多手段中很快找到能解决问题的手段

28. a = {a:'',b:""}

b={a:1,b:2,c:3}

想要a b对象合并得到 a={a:1,b:2}

https://blog.csdn.net/qq_39402205/article/details/101779986 看这篇，很简单

 

29.父组件传值进子组件，别的地方改了这个父组件的值，也就是那个传进子组件的值，子组件里就自动触发相应操作更新了，url改了，里面自动重新发请求

后来发现是watch了，所以数据变化，子组件相应操作也会自动刷新

父

  // 树节点点击回调
        nodeClick({ data, node, tree }) {
            const self = this as any;
            // 如果点击的是回收站，
            if (data.directoryPath == "/recycleBin") {
                self.isRecycleBin = true
            } else {
                self.isRecycleBin = false
            }
            console.log('data.directoryName',data.directoryName)
            self.currentDirectoryName = data.directoryName
            self.$set(self.tableConfig.request.params, 'directoryPath', data.directoryPath);
        }

子

  @Prop({ type: Object, default: ()=>{ return {}; } }) configInfo;
@Watch('configInfo', {deep: true})
    getConfigInfo(newVal: string, oldVal: string){
        this.initData();
        this.getTableData();
    }

30.vscode中alt+上下箭头可以移动一行