前端開發隨記

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