Vue学习笔记之06-响应式的数组方法

数组中的哪些方法是响应式的

• push(), pop(), shift(), unshift(), splice(), sort(), reverse() 这些方法是响应式的
• 修改数组中的数据不是响应式的!
• 如果想要修改数组中的数据也有响应式 则需要用splice() 方法
• 或者使用Vue的set()方法 set(要修改的数组, 要修改的数据的下标, 修改后的数据)

<div id="app">
    <ul>
      <li v-for="item in arr">{{item}}</li>
    </ul>
    <button @click="btnClick">按钮</button>
  </div>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        arr: ['a', 'b', 'c', 'd']
      },
      methods: {
        btnClick() {
          // 数组中哪些方法是响应式的
          // 1. push() 在数组的最后添加数据 是响应式的
          // this.arr.push('aaa');

          // 2. pop() 删除数组的最后一个数据 是响应式的
          // this.arr.pop();

          // 3. shift() 删除数组中的第一个数据 是响应式的
          // this.arr.shift();

          // 4. unshift() 在数组中的最前面添加数据, 是响应式的
          // this.arr.unshift("aaa");

          // 5. splice() 删除数组元素, 修改数组元素, 向数组插入元素 是响应式的
          // 这个方法一共有三或以上的参数, 第一个参数是从第几个索引号开始, 第二个参数是要修改多少个数据, 后面的参数是要插入或者要修改的参数
          // 删除数据, 第一个参数传入从第几个索引号开始删除, 第二个参数传入要删除的数据个数, 如果第二个参数不传入的话, 就是删除第一个参数往后的所有数据
          // this.arr.splice(0, 1);
          // 替换数据, 第一个参数传入从第几个索引号开始替换, 第二个参数传入要替换多少个数据, 后面的参数是要替换后的数据
          // this.arr.splice(0, 2, "aaa", "bbb");
          // 插入数据, 第一个参数传入从第一个索引号开始插入, 第二个参数传入0, 后面的参数是要插入的数据
          // this.arr.splice(0, 0, "aaa", "bbb")

          // 6. sort() 排列数组 参数是一个function 是响应式的
          // this.arr.sort();

          // 7. reverse() 翻转数组, 是响应式的
          // this.arr.reverse();

          // 注意: 修改数组中的数据不是响应式的!!!
          // this.arr[0] = "aaa";
          // 想要响应式
          Vue.set(this.arr, 0, "aaa");
        }
      }
    })
  </script>