VUE之数组更新检测

目录

变更方法

1.push()

2.pop()

 3.shift()

 4.unshift()

 5.splice()

方法参数说明:

 6.sort()

数字排序

比值函数

7.reverse()

---

变更方法

Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：

• push() 给末尾加元素
• pop() 清除末尾元素
• shift() 给数组的第一位进行删除
• unshift() 给数组首位添加元素
• splice() 删除元素/替换元素/插入元素
• sort() 以字母顺序对数组进行排序 
• reverse() 翻转

主体使用代码:

export default{
  data(){
    return{
      list:[1,2,3,4,5,6]
    }
  },
  methods:{
    changeList:function(){
      //删除末尾元素 变更方法
      this.list.pop()
    }
  }  
  }
</script>

<template>
  <!-- for 循环 key:标识 为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素 -->
   <li v-for="item in list" :key="item">
    {{item}}
   </li>
   <button @click="changeList">改变list</button>
</template>

初始样式

1.push()

代码:

  methods:{
    changeList:function(){
      //给末尾加元素
      this.list.push(1,2,3)
    }
  }  
  }

效果:

2.pop()

代码:

changeList:function(){
      //删除末尾元素
      this.list.pop()
    }

效果:

 3.shift()

代码:

methods:{
    changeList:function(){
      //删除末尾元素
      this.list.shift()
    }
  } 

效果:

 4.unshift()

代码:

methods:{
    changeList:function(){
      //删除末尾元素
      this.list.unshift(2,3,4)
    }
  }  

效果:

 5.splice()

方法参数说明:

第一个参数:表示开始插入或者开始删除的元素的位置下标

第二个参数:

1.删除元素:表示传入要删除几个元素(如果没有传入,代表删除后面所有元素)

2.插入元素:传入0 =>[并且后面参数添加要插入的元素]

3.替换元素:表示替换几个元素 [后面参数表示要替换的元素值]

删除元素:

代码

  methods:{
    changeList:function(){
      //删除元素
      this.list.splice(2,3)
    }
  }

结果

插入元素:

代码

methods:{
    changeList:function(){
      //插入元素
      this.list.splice(2,0,4,22)
    }
  }  

结果

替换元素:

代码

 methods:{
    changeList:function(){
      //替换元素
      this.list.splice(2,2,4,22)
    }
  }  

结果:

 6.sort()

数字排序

默认地，sort() 函数按照字符串顺序对值进行排序。

该函数很适合字符串（"Apple" 会排在 "Banana" 之前）。

不过，如果数字按照字符串来排序，则 "25" 大于 "100"，因为 "2" 大于 "1"。

正因如此，sort() 方法在对数值排序时会产生不正确的结果。

比值函数

比较函数的目的是定义另一种排序顺序。

比较函数应该返回一个负，零或正值，这取决于参数：

function(a, b){return a-b}

当 sort() 函数比较两个值时，会将值发送到比较函数，并根据所返回的值（负、零或正值）对这些值进行排序。

简单案例:

代码

export default{
  data(){
    return{
      list:[1,2,3,41,5,6]
    }
  },
  methods:{
    changeList:function(){
      //排序
      this.list.sort(function(a, b){return a-b})
    }
  }  
  }

结果

7.reverse()

代码

  methods:{
    changeList:function(){
      //翻转
      this.list.reverse()
    }
  }  

效果