vue中的vue.set()的使用

Vue.set( target, key, value ) / this.$set( target, key, value )

target：要更改的数据源(可以是对象或者数组)
key：要更改的具体数据
value ：重新赋的值

直接上代码！

<template>
    <p v-for="item in items" :key="item.id">
        {{item.message}}
    </p>
    <button class="btn" @click="dynamicClick()">动态赋值</button> 
</template>    
<script>
data() {
        return {
           items:[
               {message:"Test one",id:"1"},
               {message:"Test two",id:"2"},
               {message:"Test three",id:"3"}
              ]
            }
        },
methods: {
    dynamicClick:function(){
            //this.items[0]={message:"Change Test",id:'10'}
            this.$set(this.items,0,{message:"ChangeTest",id:'10'})
            console.log(this.items,'----------')
    },
}
</script>                    

我们写js写惯了就会这样写：

this.items[0]={message:"Change Test",id:'10'}
我们可以看到打印的是：页面的数据没改变而打印的数据改变了；
vue文档中明确的注意事项就是：由于 JavaScript 的限制，Vue 不能检测出数据的改变，所以当我们需要动态改变数据的时候，Vue.set()完全可以满足我们的需求。