每日Blog：Vue使用上的一些收获

Vue 标签里面:size前面的冒号代表是动态数据

Vue Dom操作时机问题

nextTick

//VUE中nextTick实现原理：
在vue中有nextTick这个API，官方解释，它可以在DOM更新完毕之后执行一个回调。
this.$nextTick(() => {
//    ...
})

indexOf数组元素匹配

for (let i = 0; i < this.multipleSelection.length; i++) {
    let n = this.terminalData.indexOf(this.multipleSelection[i])
    this.terminalData[n].disabled = false;
}

数字数组求和

//数字数组求和
sumArr(arr) {
  return eval(arr.join("+"));
},
//对象中的数字求和 数组arrayData[{setUp:1},{setUp:2}]
let sum = this.arrayData.reduce((sum, e) => sum + Number(e.setUp || 0), 0)

This.$Set的用法和作用

当发现我们给对象加了一个属性，在控制台能打印出来，但是却没有更新到视图上时，也许这个时候就需要用到this.$set（） 这个方法了.

官方解释：向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性， 因为 Vue 无法探测普通的新增属性。

      this.terminalData.forEach((item, index) => {
        this.$set(item, "disabled", true); //当前循环体，KEY，VALUE
      });

• el弹窗关闭后再次点击弹窗能重置数据

destroy-on-close 控制是否在关闭 Drawer 之后将子元素全部销毁

  <el-drawer
    :visible.sync="drawer"
    :direction="direction"
    :size="'60%'"
    id="task-apply"
    :destroy-on-close="true"
  >
  </el-drawer>

javascript 的 concat（）方法

concat（）方法是用于连接两个或多个数组。

var Array= ["hello", "word"];
var ArrayItem= ["java", "C++", "C#"];
var ArrayData= ["name"];
var children = Array.concat(ArrayItem,ArrayData);

输出的结果为：
hello,word,java,C++,C#,name

• vue消息提示this.$message方法

//弹出信息
function alertMessage(th,action,a){
    var msg,type;
    switch(a){
        case '1':
            type='success';
            msg = action+'成功';
            break;
        case '2':
            type='warning';
            msg = action;
            break;
        case '3':
            type='info';
            msg = '取消'+action;
            break;
        case '4':
            type='error';
            msg = action+'失败';
            break;
        default:
            break;
    }
    th.$message({
        message: msg,
        type: type,
    });
}