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