js vue 的一些实用性方法

vue 1、this.$set(obj, key, value)的用法 ： 向对象或数组中添加一些属性，使其更新在视图中

colNumChange(val) {  // 方法
    this.$set(this.btnStyle, 'height', '30px')
},

2、this.$nextTick({})的用法：将回调延迟到下次DOM更新循环之后执行，提前获取dom的更新 可以做一些判断的使用

<template v-if="listRefresh">
    <div v-for="(item,index) in specialActiveItem.option.imageList" :key="index">
             8888
    </div>
</template>
data(){
   return{ listRefresh:true}
}
methods: {
    addClick(){
          this.listRefresh = true
          this.$nextTick(()=>{
                    ....一些操作
                   this.listRefresh = false
          })
    }
}

3、this.confirmBox小弹框

async deleteTableClick() {
    await this.confirmBox('是否确认关闭？')
    this.dialogVisible = false
},

js es6 class的应用

(function (){
    class VoteBase{
        constructor(selector) {   //属性
         console.log(selector,'00')
            this.initBasicInfo()
        }
        initBasicInfo(){      //方法
            console.log('方法')
        }
    }
    const selector = '.vote-container'
    window.VoteBase = new VoteBase(selector)
})()

   ;(function($){
                const buttonBox = {
                     domName : document.querySelector('.box'),
                     init:function(){
                        this.genterClick()
                     },
                    genterClick:function(){
                       let domBtn = this.domName
                       console.log(domBtn)
                    } 
                } 
                buttonBox.init()
          })(window.$)

2、 reduce()方法 实现对数据的累加操作

  changeHotList：[
     0:{'children':[{'children':[{'img':'','name':'哈哈'}]}]},
     1:{'children':['children':[{'img':'','name':'哈哈'}]]}
  ]
  // 把所有的子项 和并到一个大数组中
 let itemAll = changeHotList[0].children.reduce((num, item) => {
     let arr = [].concat(num, item.children)
     return arr
 }, [])