博客

vue基础 v-for更新监测

目标: 当v-for遍历的目标结构改变, Vue触发v-for的更新

情况1: 数组翻转

情况2: 数组截取

情况3: 更新值

口诀:

数组变更方法, 就会导致v-for更新, 页面更新

数组非变更方法, 返回新数组, 就不会导致v-for更新, 可采用覆盖数组或this.$set()

<template>
  <div>
      <ul>
           <li v-for="(item,index) in arr " :key="index">
          {{item}}
          </li>
      </ul>
      <button @click="reverseBtn">reverse()翻转数组</button>
      <button @click="pushBtn">push()追加一个数据</button>
      <button @click="sliceBtn">slice()提取数据</button>
      <button @click="updateOne">slice()修改第一项数据</button>
  </div>
</template>

<script>
// push() / pop() / shift() / unshift() / splice() / sort() / reverse()
// vue封装好的
export default {
data () {
    return {
        arr:['刘备','关羽','张飞','赵云'],
    }
},
methods:{
    reverseBtn(){
        this.arr.reverse()
    },
    pushBtn(){
        this.arr.push('黄忠')
    },
    sliceBtn(){
    const res =  this.arr.slice(0,3) //从 0 开始取 ，取前三个
    console.log(res);
    this.arr = res
    },
    updateOne(){
        // vue主要是对改变数组的方法封装了更新监测
        // 直接通过索引修改，页面无法更新
        // this.arr[0] = '带头大哥'

        // 可以通过 this.set 修改索引的某一项
        this.$set(this.arr,0,'带头大哥')
    }
}
}
</script>

<style>

</style>

这些方法会触发数组改变, v-for会监测到并更新页面

• 
push()

• 
pop()

• 
shift()

• 
unshift()

• 
splice()

• 
sort()

• 
reverse()


这些方法不会触发v-for更新

• 
slice()

• 
filter()

• 
concat()


注意: vue不能监测到数组里赋值的动作而更新, 如果需要请使用Vue.set() 或者this.$set(), 或者覆盖整个数组

总结: 改变原数组的方法才能让v-for更新