問題來源： 工作中遇到需要使用陣列來記錄使得頁面響應式變化的需求的時候，發現數組改變的時候，頁面不會變化，但是控制檯輸出的陣列是變化了，於是尋找原因

<template>
  <div>
    <a-row>
      <a-col :span="24">
        <div class="list">
            <a-list bordered :data-source="Tdata" :infinite-scroll-disabled="true" :infinite-scroll-distance="4">
              <!-- <a-list-item slot="renderItem" slot-scope="item"> -->
              <a-list-item v-for
 
="(item,index) in Tdata" :key="item">
                <a-checkbox :checked="Status[index]" @change="onChange(index)" >
                  {{ item }}
                </a-checkbox>
              </a-list-item>
            </a-list>
            <p>{{ checked }}</p>
        </div>
      </a-col>
    </a-row>
  </div>
</template>
<script>
import Vue from 
 
'vue'
export default {
  data() {
    return {
       Tdata: [1, 2, 3],
       queryParam: {
          barcodeEnd: '', //  條碼終止號
          barcodeStart: '', // 條碼起始號
          type: 0
        },
        Sdata: [],
        Status: [],
    }
  },
  onmounted() {
    this.init()
  },
  methods: {
    onChange: 
 
function (index) {
      var newFlag = !this.Status[index]
      Vue.set(this.Status, index, newFlag)
      console.log(this.Status[index])
      console.log(this.Status)
      this.checked = !this.checked
    },
      init: function () {
        this.Tdata.forEach((item, index) => {
          this.Status.push(true)
        })
        }
  }
}
</script>

先前開始的時候，在onChange裡面的的程式碼是：

onChange: function (index) {
      var newFlag = !this.Status[index]
      this.Status[index] =  var newFlag 
      console.log(this.Status[index])
      console.log(this.Status)
      this.checked = !this.checked
    },

發現控制檯輸出確實改變了，但是頁面中 p 標籤裡面的陣列內容沒有改變

解決方法：

找了一下，發現數組響應變化的只有特定的幾個方法：

1.變異方法（修改原有資料,會影響原有陣列資料）
都會被Vue處理成響應式的方式，只要呼叫這些方法，都會影響到頁面中模板內容的變化
this.list.push(this.fname)

• push()陣列末尾新增一個或多個元素
• pop()刪除陣列的最後一個元素
• shit()刪除陣列的第一個元素
• unshit()向陣列開頭新增一個或多個元素
• splice()刪除陣列中指定元素
• sort()對陣列中的元素進行排序
• reverse()反轉陣列，顛倒順序

2.使用Vue.set

例如:

this.$set(this.SData[index],newValue)

或

Vue.set(this.SData[index],newValue)

　或

Vue.set(Array, index , newValue)