https://blog.csdn.net/qq_37041819/article/details/105644405

這裡我定義了一個列表資料，我將通過按鈕來控制列表資料。

比如我們修改一個數組其中的一個值，或者新增一條資料時，不管用。

<template>
  <div id="app" style="padding: 100px">
    <el-link type="primary" v-for="item in items" :key="item.id" style="margin-right: 10px">{{item.message}}</el-link>
    <el-button @click='btn2Click()'>動態賦值</el-button>
  </div>
</template>
<script>
  import Vue from 'vue'
    export default {
      name: "test",
      data() {
        return{
          items:[
            {message:"Test one",id:"1"},
            {message:"Test two",id:"2"},
            {message:"Test three",id:"3"}
          ]
        }
      },
      methods:{
        btn2Click(){
          this.items[0] = {message:"Test four",id:"10"}
          console.log(this.items)
        },
      },
    }
</script>

 

當我點選按鈕通過JS賦值的方法,將Tset one改為 Test four時，發現控制檯已經改變了，但是檢視並沒有更新


因此修改失敗

Vue.set() 方法
呼叫方法：Vue.set( target, key, value )
target：要更改的資料來源(可以是物件或者陣列)
key：要更改的具體資料
value ：重新賦的值

<template>
  <div id="app" style="padding: 100px">
    <el-link type="primary" v-for="item in items" :key="item.id" style="margin-right: 10px">{{item.message}}</el-link>
    <el-button @click='btn2Click()'>動態賦值</el-button>
  </div>
</template>
<script>
  import Vue from 'vue'
    export default {
      name: "test",
      data() {
        return{
          items:[
            {message:"Test one",id:"1"},
            {message:"Test two",id:"2"},
            {message:"Test three",id:"3"}
          ]
        }
      },
      methods:{
        btn2Click(){
          Vue.set(this.items,0,{message:"Test four",id:"10"})
          console.log(this.items)
        },
      },
    }
</script>

 

還是點選按鈕如下圖


這次控制檯變化的同時，檢視頁面也跟著變化

總結：
在vue文件中寫著如果在例項建立之後新增新的屬性到例項上，它不會觸發檢視更新
資料發生變化檢視不更新 那就要Vue.set方法來設定