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()完全可以滿足我們的需求。