前端开发随记

1、 在循环中发送异步请求，想要等所有请求发送完后再进行操作。善用其他常量，但其实可以直接用promise.all

  const bspUpdate = {
  systemVersion: '/40001/0/27003',
  boardName: '/40001/0/27004',
  bspVersion: '/40001/0/27007'
}

getDeviceBspInfo(){
  let i = 0
  let objlength = Object.keys(bspUpdate).length;
  for (let key in bspUpdate) {
    getDeviceStatus(this.selectedAgentId, bspUpdate[key]).then((data) => {
      handleResponse(data, (res) => {
        if (res.status === "CONTENT") {
          this[key] = res.content.value;
          i++;
        } else {
          i++
          swal("", res.errmsg, "error")
        }
        if (i == objlength) {
        //判断所有的异步操作都执行完成，进行操作
          this.getRepoBSP();
        }
      })
    })
  }
},

2、vue主动刷新页面
3、Vue中给data中的对象属性添加一个新的属性时会发生什么，如何解决

<template>
  <div>
    <ul>
      <li v-for="value in obj" :key="value">
        {{value}}
      </li>
    </ul>
    <button @click="addObjB">添加obj.b</button>
  </div>
</template>
<script>
export default {
  data () {
    return {
      obj: {
        a: 'obj.a'
      }
    }
  },
  methods: {
    addObjB () {
      this.obj.b = 'obj.b'
      console.log(this.obj)
    }
  }
}
</script>

点击button会发现，obj.b 已经成功添加，但是视图并未刷新：
原因在于在Vue实例创建时，obj.b并未声明，因此就没有被Vue转换为响应式的属性，自然就不会触发视图的更新，这时就需要使用Vue的全局api $set()：

addObjB () {
      // this.obj.b = 'obj.b'
      this.$set(this.obj, 'b', 'obj.b')
      console.log(this.obj)
    }

$set()方法相当于手动的去把obj.b处理成一个响应式的属性，此时视图也会跟着改变了
4、delete和Vue.delete删除数组的区别
delete只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。
Vue.delete直接删除了数组 改变了数组的键值。

	var a=[1,2,3,4]
    var b=[1,2,3,4]
    delete a[1]
    console.log(a)
    this.$delete(b,1)
    console.log(b)

5、vue使用同步的请求，axios没办法，只能用ajax
https://blog.csdn.net/github_37847992/article/details/78128549

6、css实现强制不换行/自动换行/强制换行
http://www.cnblogs.com/aliyue/p/5703528.html

7、面包屑导航
https://segmentfault.com/q/1010000011795481

8.vue中的父子传值，兄弟传值
https://www.cnblogs.com/hao-1234-1234/p/10157063.html

9.grid布局
http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html

10.vue前端开发性能的可优化点
https://segmentfault.com/a/1190000017085484
11.es6中class类

1. 静态方法 https://www.jianshu.com/p/5585412b4575
2. 理解 https://www.jianshu.com/p/5585412b4575
3. 继承 https://www.jianshu.com/p/0aa8c9c52f38