Vue $set 动态响应数据

• 对data对象或者数组值进行操作，试图数据并不会响应
  使用$set便可以让数据响应，

<template>
    <div class="hello">
        {{ obj }}
    </div>
</template>

<script>
export default {
    mounted() {
        for (let i = 0; i < 3; i++) {
            this.obj[i] = [1, 2, 3];
        }
    },

    data() {
        return {
            obj: {}
        };
    }
};
</script>

• 此时对象的数据并不响应，使用$set

<template>
    <div class="hello">
        {{ obj }}
    </div>
</template>

<script>
export default {
    mounted() {
        for (let i = 0; i < 3; i++) {
            this.obj[i] = [1, 2, 3];
        }
        this.$set(this.obj, this.obj);
    },

    data() {
        return {
            obj: {}
        };
    }
};
</script>

• 此时对象便可以动态响应

  
  image.png