【Vue踩坑】今天的我又给vue坑惨了，发现this.$set就能解决

前言：今天在做项目的时候，遇到了一个问题，就是修改数组里面的值，假如数组里面有2-3个值，选择tabActive的时候，渲染没有出现问题，一旦我数组里面的值超过4个时，渲染就出现问题了

排查了很久，发现点击的时候，数组也是正常取值的，为啥会有bug呢？
其实就是Vue的渲染机制：
当vue的data里边声明或者已经赋值过的对象或者数组（数组里边的值是对象）时，向对象中添加新的属性，如果更新此属性的值，是不会更新视图的。

解决方式：

   methods: {
        // 调用方法：Vue.set( target, key, value )

        // target：要更改的数据源(可以是对象或者数组)

        // key：要更改的具体数据

        // value ：重新赋的值
        handle(item,index) {
           
            this.$set(this.list, index, item.value);
        },
    }

引申：什么时候用this.$set?什么时候用this.$nextTick?

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

this.$nextTick:Vue 在更新 DOM 时是异步执行的。
Vue.nextTick()是基于更新后的DOM状态进行操作。dom元素更新后执行，
常用的操作场景是-当项目中你想在改变DOM元素的数据后基于新的dom做点什么，对新DOM一系列的js操作都需要放进Vue.nextTick()的回调函数中；通俗的理解是：更改数据后当你想立即使用js操作新的视图的时候需要使用它

nextTick()，是将回调函数延迟在下一次dom更新数据后调用，简单的理解是：当数据更新了，在dom中渲染后，自动执行该函数，

注意：Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。$nextTick 是在下次
DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM

这位大佬对nextTick的用法简直出神入化，建议大家查看