数组方法中的响应式和非响应式

数组方法中的响应式和非响应式

<div id="app">
  <ul>
    <li v-for="item in letters">{{item}}</li>
  </ul>
  >
  <button @click="btnClick">点我</button>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      letters: ['A', 'B', 'C', 'D', 'E']
    },
    methods: {
      btnClick() {
        /**
         * 可以做到响应式的数组方法
         */
        //1.push方法，向数组末尾添加一个或多个元素，并返回添加后的长度，可以响应式显示
        /*console.log(this.letters.push('F','G'));//7*/
        //2.pop方法，删除并返回数组的最后一个元素
        /*  console.log(this.letters.pop());//E*/
        //3.shift方法删除并返回数组第一个元素
        /*console.log(this.letters.shift());//A*/
        //4.unshift方法，向数组开头添加一个或多个元素，并返回新的长度
        /* console.log(this.letters.unshift('F','G'));//7*/
        /**
         * 这些可以添加一个或多个元素的方法都是采用可变参数实现的
         * 函数的参数不确定，我们可以通过...num加参数名来命名参数，
         * 这样所有的参数都方法在num这个数组中,其实和argument有点像
         * 但是一个是类数组，一个是数组，类数组不能直接使用 所有的数组方法。
         */
        function sum(...num) {
          console.log(arguments);//Arguments { 0: 12, 1: 23, 2: 46, 3: 78, 4: 12, … }
          console.log(num);//Array(5) [ 12, 23, 46, 78, 12 ]
        }

        //sum(12,23,46,78,12);
        /**
         * 5.splice方法，删除元素，并向数组添加新的元素.
         * 参数：
         *      1.必须，从何处开始删除元素
         *      2.必须，规定删除多少元素，但是可以为0，
         * 如果未规定该参数，从第一个参数开始删除到原数组最后一个元素
         *     3.可选，规定要添加到数组的元素，从第一个参数所指下标开始，可以写多个元素。
         * 返回值：
         *      被删除元素组成的数组，如果有被删除元素的话
         */
        //let result = this.letters.splice(1,2,'E','F');
        //console.log(result);//Array [ "B", "C" ]
        //console.log(this.letters);//Array(5) [ "A", "E", "F", "D", "E" ]
        /**
         * sort方法对数组进行排序
         *    默认是Unicode编码进行排序，从小到大，即使是数字也是Unicode进行排序
         * 就会报错，所以我们可以在sort方法中添加一个回调函数，指定排序规则。
         *    回调函数两个参数：
         *        a,b，在数组中a肯定在b的前边，
         *        如果返回一个大于0的数,元素交换位置
         *        如果返回小于等于0的数，位置不变。
         */
        // let arr = [2, 4, 1, 9, 11, 3];
        // arr.sort();
        // console.log(arr);//Array(6) [ 1, 11, 2, 3, 4, 9 ],没有成功排序
        // arr.sort(function (a,b) {
        //   return a - b;//升序
        //   //return b - a;//降序
        // });
        // console.log(arr);//[ 1, 2, 3, 4, 9, 11 ]
        /**
         * reverse方法用于颠倒数组中的元素，不会创建新的数组
         */
        //console.log(this.letters.reverse());//Array(5) [ "E", "D", "C", "B", "A" ]


        /**
         *不可以做到响应式的数组方法
         */
        //1.通过索引修改数组的元素,不可以做到响应式,
        //this.letters[0] = 'A被我修改了';
        /**
         * 该方法可以用splice方法代替,将下标传入，删除一个，添加一个
         */
        //this.letters.splice(0, 1, 'A被我修改了');
        /**
         * vue自带的set方法，三个参数
         *    1.要修改的对象，
         *   2.索引值。
         *   3.修改后的值
         */
        Vue.set(this.letters,0,'A被我修改了');
      }
    }
  });
</script>

注意vue的V要大写，之前js数组具体讲了每个方法的。