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也没有发生改变；

 1     methods:{
 2       hadnleupdata(){
 3         this.items[1]='python';
 4         console.log(this.items)
 5       }
 6     },
 7     watch:{
 8       items(val){
 9         console.log('watch中items值为:',val)
10       }
11     }

3. 如何解决并让DOM更新？

1. 利用 $forceUpdate 强制更新

• 在使用Vue框架开发时，在函数中改变了页面中的某个值，在函数中查看是修改成功了，但在页面中没有及时刷新改变后的值，就可以使用此方法；

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

• 通过这种方式发现DOM虽然发生了改变，但是watch中的监听事件并没有触发；

 1     methods:{
 2       hadnleupdata(){
 3         this.items[1]='python';
 4         console.log(this.items)
 5         this.$forceUpdate();
 6       }
 7     },
 8     watch:{
 9       items(val){
10         console.log('watch中items值为:',val)
11       }
12     }

　　2. Vue.js 包装了被观察数组的变异方法，故它们能触发视图更新。被包装常用的方法有：

• push()

• pop()

• shift()

• unshift()

• splice()

• sort( )

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

    　　通过这种方式发现 DOM 发生了改变并且 watch 监听事件也被触发了；

 1     methods:{
 2       hadnleupdata(){
 3         this.items.splice(1,1,'python')
 4         console.log(this.items)
 5       }
 6     },
 7     watch:{
 8       items(val){
 9         console.log('watch中items值为:',val)
10       }
11     }

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