vue检测数组更新的几个方法

检测数组更新

  • 因为Vue是响应式的，所以当数据发生变化时，Vue会自动检测数据变化，视图会发生对应的更新。

  • Vue中包含了一组观察数组编译的方法，使用它们改变数组也会触发视图的更新。

方法

  1. push(): 添加

  2. pop()： 删除数组中的最后一个元素

  3. shift(): 删除数组中的第一个元素

  4. unshift(): 在数组最前面添加元素

  5. splice作用：删除元素，插入元素，替换元素

  6. sort() 排序

  7. reverse() 反转

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../js/vue.js"></script>
</head>
<body>
  <div id="app">
    <ul>
      <li v-for="(item, index) in letters">{{item}}</li>
    </ul>
    <button @click="btnClick">按钮</button>
  </div>

  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        letters: ['A','B','C','D','E']
      },
      methods: {
        btnClick() {
          // 1.push方法
          // this.letters.push('aaaa')
          // this.letters.push('aaa','bbb','ccc')

          // 2.pop()： 删除数组中的最后一个元素
          // this.letters.pop(); 

          // 3.shift(): 删除数组中的第一个元素
          // this.letters.shift(); 
          
          // 4.unshift(): 在数组最前面添加元素
          // this.letters.unshift() 
          // this.letters.unshift('aaa','bbb','ccc') 

          // 5.splice作用：删除元素，插入元素，替换元素
          // 删除元素：第二个参数传入你要删除几个元素(如果没有传，就删除后面所有的元素)
          // 替换元素：第二个参数，表示我们要替换几个元素，后面是用于替换前面的元素
          // 插入元素：第二个参数，传入0，并且后面跟上要插入的元素
          // splice(start)
          // const start = 2
          // this.letters.splice(start, this.letters.length-start)
          // this.letters.splice(1, 3,'m','n','l')
          // this.letters.splice(1, 3)
          // this.letters.splice(1, 0,'a','b','v')

          // 6.sort() 排序
          // this.letters.sort()

          // 7.reverse() 反转
          // this.letters.reverse()

          // 注意.通过索引值修改数组中的元素，不建议，因为这个不是响应式的
          // this.letters[0] = 'bbbb'
          this.letters.splice(0, 1, 'aaa') // 建议用splice
          // Vue.set(this.letters,0,'aaa')
        }
      },
    })
  </script>
</body>
</html>

编程范式

  1. 从计算机指定方面出发

    1. 命令式编程

    2. 声明式编程

  2. 也可以分为

    1. 面向对象编程(第一公民：对象)

    2. 函数式编程(第一公民：函数)

filter函数的使用

filter中回调函数有一个要求：必须返回一个boolean值

true: 当返回true时，函数内部会自动将这次回调的n加入到新的数组中

false:当返回false时，函数内部会过滤掉这次的n

     const nums = [10,20,111,222,444,40,50]
 ​
     // 1.filter函数的使用
     let newNums = nums.filter(function(n) {
       return n<100
     })
     console.log(newNums)

map函数的使用

     // 2.map函数的使用
     let new2Nums = newNums.map(function(n) {
       return n * 2
     })  
     console.log(new2Nums)

reduce函数的使用

     //3.reduce函数的使用
     let total = new2Nums.reduce(function(preValue,n){
       return preValue+n
     },0)
     console.log(total)

 代码：

需求：将数组中小于100的数乘以2后，求和

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../js/vue.js"></script>
</head>
<body>
  <div id="app">

  </div>

  <script>
    const nums = [10,20,111,222,444,40,50]

    // 1.filter函数的使用
    let newNums = nums.filter(function(n) {
      return n<100
    })
    console.log(newNums)

    // 2.map函数的使用
    let new2Nums = newNums.map(function(n) {
      return n * 2
    })  
    console.log(new2Nums)

    //3.reduce函数的使用
    let total = new2Nums.reduce(function(preValue,n){
      return preValue+n
    },0)
    console.log(total)

    // 函数式编程
    let total2 = nums.filter(function(n){
      return n<100
    }).map(function(n) {
      return n*2
    }).reduce(function(preValue,n){
      return preValue + n
    },0)
    console.log(total2) 

    //lambel表达式
    let sumNums = nums.filter(n => n<100).map(n => n*2).reduce((a,b)=>(a+b))
    console.log(sumNums) 
  </script>
</body>
</html>

 

posted @ 2022-01-12 17:52  蔡地像徐坤  阅读(550)  评论(0)  编辑  收藏  举报