12~vue中数组更新检测

vue中数组更新检测

数组发生了变化, vue就会检测到数组发生了更新, 从而去**触发视图更新**。

Vue将被侦听的数组的变更方法进行了包裹, 所以他们也将会触发视图更新。 这些被包裹的方法见下面:

数组检测的方法

vue3修改索引值, 触发视图更新

vue2的时候通过索引值去修改数组, 视图不会更新的; vue3通过索引值的修改,可以实现响应式, 从而达到视图更新的效果

<script>
export default {
  data () {
    return {    
       list:[1,3,2,13,144,33]
    }   
  },
  methods: {
    changeList:function(){
      // 修改索引值, 实现数组更新, 视图更新
      this.list[1] = 99
    }
  },
  computed: {       
  }, 
  watch:{
  }
}
</script>

<template>
  <!-- template就是模版 -->
  <div>
      <!-- key是给列表项加上唯一的标识 -->     
    <ul>
      <!-- item是键值,key是键名 -->
      <li v-for="(item,index) of list" :key="index">
       {{ index }} -- {{ item }}
      </li>      
    </ul>   
    <button @click="changeList">改变数组</button>
  </div>
</template>
<style>
</style>

push(), 数组末尾增加元素, 触发视图更新

push()参数是扩展运算符, 里面可以传1个或多个要追加的元素

<script>
export default {
  data () {
    return {    
       list:[1,3,2,13,144,33]
    }   
  },
  methods: {
    changeList:function(){
      // push 数组末尾增加元素, 触发视图更新
      this.list.push('李白白不白')
      // push参数是扩展运算符, 里面可以传1个或多个要追加的元素
      // this.list.push('李白白不白','张三白嫖')
    }
  },
  computed: {       
  }, 
  watch:{
  }
}
</script>

<template>
  <!-- template就是模版 -->
  <div>
      <!-- key是给列表项加上唯一的标识 -->     
    <ul>
      <!-- item是键值,key是键名 -->
      <li v-for="(item,index) of list" :key="index">
       {{ index }} -- {{ item }}
      </li>      
    </ul>   
    <button @click="changeList">改变数组</button>
  </div>
</template>
<style>
</style>

pop() 删除数组最末尾的元素,触发视图更新

pop() 里面不需要传参数

<script>
export default {
  data () {
    return {    
       list:[1,3,2,13,144,33]
    }   
  },
  methods: {
    changeList:function(){
      // pop 删除数组最末尾的元素
      this.list.pop()
    }
  },
  computed: {       
  }, 
  watch:{
  }
}
</script>

<template>
  <!-- template就是模版 -->
  <div>
      <!-- key是给列表项加上唯一的标识 -->     
    <ul>
      <!-- item是键值,key是键名 -->
      <li v-for="(item,index) of list" :key="index">
       {{ index }} -- {{ item }}
      </li>      
    </ul>   
    <button @click="changeList">改变数组</button>
  </div>
</template>
<style>
</style>

shift()删除数组第一位,触发视图更新

<script>
export default {
  data () {
    return {    
       list:[1,3,2,13,144,33]
    }   
  },
  methods: {
    changeList:function(){
      // shift 给数组第一位进行删除
      this.list.shift()
    }
  },
  computed: {       
  }, 
  watch:{
  }
}
</script>

<template>
  <!-- template就是模版 -->
  <div>
      <!-- key是给列表项加上唯一的标识 -->     
    <ul>
      <!-- item是键值,key是键名 -->
      <li v-for="(item,index) of list" :key="index">
       {{ index }} -- {{ item }}
      </li>      
    </ul>   
    <button @click="changeList">改变数组</button>
  </div>
</template>
<style>
</style>

unshift()给数组首位开始添加元素,触发视图更新

unshift参数是扩展运算符, 里面可以传1个或多个要追加的元素

<script>
export default {
  data () {
    return {    
       list:[1,3,2,13,144,33]
    }   
  },
  methods: {
    changeList:function(){
      // unshift 给数组首位开始添加元素
      this.list.unshift('是吗?')
      //unshift参数是扩展运算符, 里面可以传1个或多个要追加的元素
      // this.list.unshift('是吗?','不是嘛?')
    }
  },
  computed: {       
  }, 
  watch:{
  }
}
</script>

<template>
  <!-- template就是模版 -->
  <div>
      <!-- key是给列表项加上唯一的标识 -->     
    <ul>
      <!-- item是键值,key是键名 -->
      <li v-for="(item,index) of list" :key="index">
       {{ index }} -- {{ item }}
      </li>      
    </ul>   
    <button @click="changeList">改变数组</button>
  </div>
</template>
<style>
</style>

splice()可以增删改数组,很强大

它有三个参数

splice()删除的操作

array.splice(index,howmany)

• 参数1,必传: index 表示开始插入或者删除数组元素的位置下标
• 参数2,可选, 表示要删除元素的个数,如果没有传, 就删除后面所有元素

删除操作示例

<script>
export default {
  data () {
    return {    
       list:[1,3,2,13,144,33]
    }   
  },
  methods: {
    changeList:function(){
      /**
       * splice 可以删除元素, 插入元素, 替换元素
       * splice第一个参数, 表示开始插入或者开始删除的元素的位置下标
       * splice第二个参数,可选, 表示要删除元素的个数,如果没有传, 就删除后面所有元素
       * 
       */     
      // 需求, 从list数组中3开始删除, 删除3,2,13三个元素 就是下标为1的地方开始删除      
      this.list.splice(1,3) // 删除后的list就是[1,144,33]
      // this.list.splice(1) // 如果没传第二个参数,就会从下面1开始, 后面的所有元素都删除
    }
  },
  computed: {       
  }, 
  watch:{
  }
}
</script>

<template>
  <!-- template就是模版 -->
  <div>
      <!-- key是给列表项加上唯一的标识 -->     
    <ul>
      <!-- item是键值,key是键名 -->
      <li v-for="(item,index) of list" :key="index">
       {{ index }} -- {{ item }}
      </li>      
    </ul>   
    <button @click="changeList">改变数组</button>
  </div>
</template>
<style>
</style>

splice()插入元素的操作

array.splice(index,0,item1,.....,itemX)

• 参数1,必传: index 表示开始插入或者删除数组元素的位置下标
• 参数2,当为插入时, 第二个参数传入 0 ,并且后面要接上第三个参数
• 参数3, 要插入的元素, 可以1个或多个

插入操作示例

<script>
export default {
  data () {
    return {    
       list:[1,3,2,13,144,33]
    }   
  },
  methods: {
    changeList:function(){
      /**
       * 插入元素
       * splice第一个参数, 表示开始插入或者开始删除的元素的位置下标
       * splice第二个参数, 当为插入时, 第二个参数传入 0 ,并且后面要接上第三个参数
       * splice第三个参数, 要插入的元素,可以1个或者多个
       */     
      // 需求, 从list数组中3开始, 前面插入 你好    
      this.list.splice(1,0,'你好') // 3的下标是1, 会在下标为1的位置插入元素
      // this.list.splice(1,0,'你好','中国','大使馆') 可以插入1个或多个元素,关键是前两个参数要写对
    }
  },
  computed: {       
  }, 
  watch:{
  }
}
</script>

<template>
  <!-- template就是模版 -->
  <div>
      <!-- key是给列表项加上唯一的标识 -->     
    <ul>
      <!-- item是键值,key是键名 -->
      <li v-for="(item,index) of list" :key="index">
       {{ index }} -- {{ item }}
      </li>      
    </ul>   
    <button @click="changeList">改变数组</button>
  </div>
</template>
<style>
</style>

splice()替换元素的操作

可以这么理解, 先删除几个元素, 再插入几个元素

array.splice(index,0,item1,.....,itemX)

• 参数1,必传: index 表示开始插入或者删除数组元素的位置下标
• 参数2,表示要替换几个元素
• 参数3, 替换的元素,第二个参数的元素数量和第三个参数不必对应上

替换操作示例

<script>
export default {
  data () {
    return {    
       list:[1,3,2,13,144,33]
    }   
  },
  methods: {
    changeList:function(){
      /**
       * 替换元素
       * splice第一个参数, 表示开始插入或者开始删除的元素的位置下标
       * splice第二个参数, 表示要替换几个元素
       * splice第三个参数, 替换的元素,第二个参数的元素数量和第三个参数不必对应上
       */     
      // 需求, 从list数组中3开始,把3,2替换成'小日本'   
      // this.list.splice(1,2,'小日本') 
      this.list.splice(1,2,'小日本','美国','德国','开市')
    }
  },
  computed: {       
  }, 
  watch:{
  }
}
</script>

<template>
  <!-- template就是模版 -->
  <div>
      <!-- key是给列表项加上唯一的标识 -->     
    <ul>
      <!-- item是键值,key是键名 -->
      <li v-for="(item,index) of list" :key="index">
       {{ index }} -- {{ item }}
      </li>      
    </ul>   
    <button @click="changeList">改变数组</button>
  </div>
</template>
<style>
</style>

sort()排序,触发视图更新

<script>
export default {
  data () {
    return {    
       list:[1,3,2,13,144,33]
    }   
  },
  methods: {
    changeList:function(){     
      // 排序,数字从小到大排序
      this.list.sort(function(a,b){return a-b})
    }
  },
  computed: {       
  }, 
  watch:{
  }
}
</script>

<template>
  <!-- template就是模版 -->
  <div>
      <!-- key是给列表项加上唯一的标识 -->     
    <ul>
      <!-- item是键值,key是键名 -->
      <li v-for="(item,index) of list" :key="index">
       {{ index }} -- {{ item }}
      </li>      
    </ul>   
    <button @click="changeList">改变数组</button>
  </div>
</template>
<style>
</style>

reverse() 翻转数组, 触发视图更新

<script>
export default {
  data () {
    return {    
       list:[1,3,2,13,144,33]
    }   
  },
  methods: {
    changeList:function(){     
      // reverse数组翻转
      this.list.reverse()
    }
  },
  computed: {       
  }, 
  watch:{
  }
}
</script>

<template>
  <!-- template就是模版 -->
  <div>
      <!-- key是给列表项加上唯一的标识 -->     
    <ul>
      <!-- item是键值,key是键名 -->
      <li v-for="(item,index) of list" :key="index">
       {{ index }} -- {{ item }}
      </li>      
    </ul>   
    <button @click="changeList">改变数组</button>
  </div>
</template>
<style>
</style>