vue.set的用法

使用过vue的都知道，vue中使用的是mvvm模式，我们通过修改数据来驱动视图。但有时我们会发现修改了数据视图并未更新

<div class="myApp">
        one:{{num}}
        <p v-for='(item,index) in items' :key="item.id">
            {{item.message}}
        </p>
        <div @click="change">
            修改数据
        </div>
        <div @click="add">
            添加数据
        </div>
    </div>

循环一个列表

 data:{
            num:1,
            items:[
                {message:" one",id:"1"},
                {message:" two",id:"2"},
                {message:" three",id:"3"}
            ]

        },
        methods:{
            change(){
                var obj = {message:'修改了'}

　　　　　　　　　　this.items[0]=obj;

                console.log(this)
            },
            add(){
                 this.items[3]={message:'添加了'}
                
                console.log(this)
            }
        }

点击对应按钮，我么发现视图没有更新但。实际数据已经发生了变化

vue并没有检查出数据的改变，这时我们可以使用vue.set方法解决这个问题

 change(){
                var obj = {message:'修改了'}      
                this.$set(this.items,0,obj)
                console.log(this._data)
            },
            add(){
                this.$set(this.items,3,{message:'添加了'})
                console.log(this._data)

            }

除了使用vue.set方法也可以直接使用splice方法，次方法会返回一个已经修改过的新数组

 change(){
                var obj = {message:'修改了'}
                this.items.splice(0,1,obj)
                console.log(this._data)
            },
            add(){
                this.items.splice(3,0,{message:'添加了'})
                console.log(this._data)
            }