Vue.set的使用

Vue 无法检测到对象属性的添加和删除。对于已经创建的实例，Vue 不能动态添加根级别的
响应式属性，可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性。
object：要更改的数据源(可以是对象或者数组)
key：要更改的具体数据
value ：重新赋的值

<template>
    <div>
        <p v-for="item in items" :key="item.id">{{item.name}}</p>
        <button @click="updateItem()">updateItem</button>
        <button @click="insertItem()">insertItem</button>
    </div>
</template>
<script>
export default {
    data(){
        return{
            items:[
                {name:"I'm the first",id:'1'},
                {name:"I'm the second",id:'2'},
                {name:"I'm the third",id:'3'},
            ]
        }
    },
    methods:{
        updateItem(){
            this.$set(this.items,0,{name:"I'm the update",id:"10"})
        },
        insertItem(){
            var itemLength = this.items.length
            this.$set(this.items,itemLength,{name:"I'm the insert",id:"bugaosuni"})
        }
    }
}
</script>

此时的界面为：

当我们点击第一个按钮后。调用methods中的updateItem方法。此时"I’m the first"修改为"I’m the update"。

当我们点击第二个按钮，向items数组中添加了数据：