1. push()

1. push() 是响应式的 在数组的最后添加一个元素。

2. pop()

1. pop() 是响应式的 从数组的最后弹出一个元素 删除数组中的最后一个元素。

3. shift()

1. shift() 删除数组中的第一个元素。

4. unshift()

1. unshift() 在数组的最前面添加元素。

5. splice()

splice() 的作用 删除元素/插入元素/替换元素。

1. 删除元素: 第一个参数是操作的开始位置，第二个参数是你要删除几个元素，如果第二个参数不传递则删除所有。

2. 插入元素:第一个参数是操作的开始位置 ， 第二个参数传递0，后面跟上插入的元素即可。

3. 替换元素:第一个参数是操作的开始位置，第二个参数表示我们要替换几个元素，后面是用于替换前面的元素的。

6. sort()

1. 方法用原地算法对数组的元素进行排序，并返回数组。默认排序顺序是在将元素转换为字符串，然后比较它们的UTF-16代码单元值序列时构建的。

7. reverse()

1. reverse() 数组逆转的方法。

8. Vue.set(array,index,'xxx')

1. Vue.set(array,index,'xxx') vue自带的set方法也可以实现数组的响应式变化。

使用数组下标修改数组元素的值不是响应式的。

代码演示

<div id="app">

  <ul>
    <li v-for="item in letters" :key="item">{{item}}</li>
  </ul>

  <button @click="btnClick">操作</button>

  <ul>
    <li v-for="item in numbers" :key="item">{{item}}</li>
  </ul>

  <button @click="btnClickSort">排序</button>

  <ul>
    <li v-for="item in reverse" :key="item">{{item}}</li>
  </ul>

  <button @click="btnClickReverse">逆序</button>

  <ul>
    <li v-for="item in popOpt" :key="item">{{item}}</li>
  </ul>

  <button @click="btnClickPop">pop</button>

  <ul>
    <li v-for="item in pushOpt" :key="item">{{item}}</li>
  </ul>

  <button @click="btnClickPush">push</button>

  <ul>
    <li v-for="item in shiftOpt" :key="item">{{item}}</li>
  </ul>

  <button @click="btnClickShift">shift</button>


  <ul>
    <li v-for="item in unShiftOpt" :key="item">{{item}}</li>
  </ul>

  <button @click="btnClickUnShift">UnShift</button>

</div>
<script src="../../js/vue.js"></script>

const app = new Vue({
        el: '#app',
        data: {
            letters: ['a', 'b', 'c', 'd'],
            numbers: [1, 20, 31, 42, 5, 6],
            reverse: ['a', 'b', 'c', 'd'],
            popOpt: ['e', 'f', 'g', 'h'],
            pushOpt: ['e', 'f', 'g', 'h'],
            shiftOpt: ['a', 'b', 'c'],
            unShiftOpt: [1, 2, 3, 4, 5, 6]
        },
        methods: {

            btnClick() {

                this.letters[0] = '6666'; // 这个不是响应式的哦

                // push() 是响应式的 在数组的最后添加一个元素

                // pop() 是响应式的 从数组的最后弹出一个元素 删除数组中的最后一个元素

                // shift() 删除数组中的第一个元素

                // unshift() 在数组的最前面添加元素

                // splice的作用 删除元素/插入元素/替换元素
                // 1. 删除元素: 第一个参数是操作的开始位置，第二个参数是你要删除几个元素，如果第二个参数不传递则删除所有
                // 2. 插入元素: 第二个参数传递0，后面跟上插入的元素即可
                // 3. 替换元素:第二个参数表示我们要替换几个元素，后面是用于替换前面的元素的
                // splice()

                // 3. 替换元素,
                this.letters.splice(1, 3, 'm', 'n', 'l'); //
                // 2. 插入元素
                this.letters.splice(1, 0, 'e', 'f');

                // 替换元素
                this.letters.splice(1, 1, 'F');

                // sort()

                // reverse()

                // set 方法修改
                Vue.set(this.letters, 0, 'cccc');
            },

            /**
             * 进行排序操作
             */
            btnClickSort() {
                console.log(this.numbers.sort((a, b) => {
                    return a - b;
                }));
            },

            /**
             * 逆转数组
             */
            btnClickReverse() {
                this.reverse.reverse();
            },

            /**
             * 从数组末尾弹出一个元素
             */
            btnClickPop() {
                this.popOpt.pop();
            },

            /**
             * 在数组的末尾插入一个或多个元素
             */
            btnClickPush() {
                this.pushOpt.push('f', 'g', 'h', 'j', 'k');
            },

            /**
             * 删除数组的第一个元素
             */
            btnClickShift() {
                this.shiftOpt.shift();
            },
            btnClickUnShift() {
                this.unShiftOpt.unshift('f', 'g', 'h', 'j', 'k');
            }
        }
    });