vue中的vue.set()的使用

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

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

<template>
<div>
  <!--key的主要作用就是提高渲染性能，避免数据混乱的情况出现
  获取item数组里的message-->
    <p v-for="item in items" :key="item.id">
        {{item.message}}
    </p>
    <!--点击按钮，item[0]的message发生改变-->
    <button class="btn" @click="dynamicClick()">动态赋值</button> 
</div>
</template>    


<script>
export default {
  data() {
        return {
           items:[
               {message:"Test one",id:"1"},
               {message:"Test two",id:"2"},
               {message:"Test three",id:"3"}
              ]
            }
        },
methods: {
    dynamicClick(){
            // this.items[0]={message:"Change Test",id:'10'}//vue界面上没有改变，由于 JavaScript 的限制，Vue 不能检测出数据的改变
            this.$set(this.items,0,{message:"ChangeTest",id:'10'})//给items[0]重新赋值 message:"ChangeTest"
            console.log(this.items)
    },
}


}
</script>

<style>

</style>

直接给items[0]赋值

通过vue.set()赋值