switch开关的async和await初体验

开发组件库时，遇到了一个坑，先看代码

methods:{
        handleClick(){
        this.$emit('input',!this.value)
            this.setColor()
       
    },

我在点击switch组件时，拿到value是true还是false，通过对value的值来给switch开关颜色，比如我给switch   false时是红色，true时为绿色。但是出现了一个问题，就是第一次点击时，颜色都是红色，当第二轮点击时才切换颜色，并且正好与我设置的颜色相反  false为绿色，true为红色了。

这是因为当我们点击的时候会让value发生改变，但是我们还没有接收到value值就调用setColor方法了，所以我们需要处理异步，先拿到value的值再调用getColor方法

解决方法一

       handleClick(){
        this.$emit('input',!this.value)
        setTimeout(()=>{
            this.setColor()
        })   
    },

解决方法二

 async handleClick(){
        this.$emit('input',!this.value)
       await this.$nextTick()
            this.setColor()   
    },

这样写的意思是数据修改后等待dom更新，再修改按钮的颜色，如果不用 this.$nextTick()的话我们就把希望的颜色反过来。