vue基础-v-for更新监测

1、目标结构变化，触发v-for更新

2、demo

demo1 数组翻转

<template>
  <div id="app">
    <div>
      <ui>
        <li v-for="(val,index) in arr" :key="index">{{ val }}</li>
      </ui>
      <button @click="rvebtn">数组翻转</button>
    </div>  
  </div>
  
</template>

<script>
export default {
  data(){
    return{
      arr:[5,3,9,2,1]
      
    }
    
  },
  methods:{
    rvebtn(){
      alert(11)
      this.arr.reverse()
    }
  }
}
</script>

demo2:截取前三个

<template>
  <div id="app">
    <div>
      <ui>
        <li v-for="(val,index) in arr" :key="index">{{ val }}</li>
      </ui>
      <button @click="slicebtn">截取前三个</button>
    </div>  
  </div>
  
</template>

<script>
export default {
  data(){
    return{
      arr:[5,3,9,2,1]
      
    }
    
  },
  methods:{
    slicebtn(){
     var re= this.arr.slice(0,3)
     console.log(re)
    }
  }
}
</script>