1.简单举一个v-for列表渲染例子

<template><div><ul><li v-for="item in items">{{item}}</li></ul></div>
</template>
<script>exportdefault{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