v-for列表渲染之數組變動檢測

1.簡單舉一個v-for列表渲染例子

<template>
  <div>
    <ul>
      <li v-for="item in items">{{item}}</li>
    </ul>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        items:['html','css','javascript']
      }
    },
  }
</script>

2.修改items數組中的值

• demo  :  https://run.iviewui.com/9OwDCfZE
• 結果發現數組中的值雖然發生了變化，但是watch中並沒有監聽到數組的變化，並且DOM也沒有發生改變；

    methods:{
      hadnleupdata(){
        this.items[1]='python';
        console.log(this.items)
      }
    },
    watch:{
      items(val){
        console.log('watch中items值為:',val)
      }
    }

3. 如何解決並讓DOM更新？

1. 利用 $forceUpdate 強制更新

• 在使用Vue框架開發時，在函數中改變了頁面中的某個值，在函數中查看是修改成功了，但在頁面中沒有及時刷新改變后的值，就可以使用此方法；

• demo : https://run.iviewui.com/pgRGJ9CL

• 通過這種方式發現DOM雖然發生了改變，但是watch中的監聽事件並沒有觸發；

    methods:{
      hadnleupdata(){
        this.items[1]='python';
        console.log(this.items)
        this.$forceUpdate();
      }
    },
    watch:{
      items(val){
        console.log('watch中items值為:',val)
      }
    }

　　2. Vue.js 包裝了被觀察數組的變異方法，故它們能觸發視圖更新。被包裝常用的方法有：

• push()

• pop()

• shift()

• unshift()

• splice()

• sort( )

    　　demo :  https://run.iviewui.com/GnL4vAZA

    　　通過這種方式發現 DOM 發生了改變並且 watch 監聽事件也被觸發了；

    methods:{
      hadnleupdata(){
        this.items.splice(1,1,'python')
        console.log(this.items)
      }
    },
    watch:{
      items(val){
        console.log('watch中items值為:',val)
      }
    }

4. 結合iview提供的Table組件使用案例：https://run.iviewui.com/oM49rQ7H