Vue为什么重写原数组函数方法

1、操作数组函数后---修改原有数据（被Vue重写）

push 、pop 、shift 、unshift 、splice 、sort 、reverse

2、操作数组函数后---生成新数组

filter 、concat 、slice

3、解析原因

•  this.persons[0].name = '马老师'      通过直接修改数组里面对象的值，页面模改变
•  this.persons[0] = {id:'001',name:'马老师',age:50,sex:'男'}    通过索引改数组的值，页面模板不变 ------------------------ 因为Vue用数据代理Object.defineProperty get()、set() 进行模板更新，而原生的数组方法无法实现这一点【如果数组每一个都加get、set，那么会严重影响代码效率】

=============== 怎么办？？？？============

所以，Vue重写了push、pop等函数方法、例子如下：

通过重写后，vue虽然不能通过索引改变模板，但是可以操作上面的7个函数方法进行修改

4、原生数组函数方法演示

1.  
            <div class="a"></div>
2.  
    
3.  
           a = document.querySelector('.a')
4.  
    
5.  
           arr = [1, 23, 345, 64]
6.  
    
7.  
           a.innerHTML = arr[1]

 上面可以看得出来，页面的模板并没有改变

6、源码

1.  
   <div id="root">
2.  
   <h2>人员列表</h2>
3.  
   <button @click="updateMei">更新马冬梅的信息</button>
4.  
   <ul>
5.  
   <li v-for="(p,index) of persons" :key="p.id">
6.  
   {{p.name}}-{{p.age}}-{{p.sex}}
7.  
   </li>
8.  
   </ul>
9.  
   </div>
10.  
    <div class="a"></div>

1.  
   a = document.querySelector('.a')
2.  
   arr = [1, 23, 345, 64]
3.  
   a.innerHTML = arr[1]
4.  
    
5.  
    
6.  
   Vue.config.productionTip = false
7.  
    
8.  
   const vm = new Vue({
9.  
   el: '#root',
10.  
    data: {
11.  
    persons: [{
12.  
    id: '001',
13.  
    name: '马冬梅',
14.  
    age: 30,
15.  
    sex: '女'
16.  
    }, {
17.  
    id: '002',
18.  
    name: '周冬雨',
19.  
    age: 31,
20.  
    sex: '女'
21.  
    }, {
22.  
    id: '003',
23.  
    name: '周杰伦',
24.  
    age: 18,
25.  
    sex: '男'
26.  
    }, {
27.  
    id: '004',
28.  
    name: '温兆伦',
29.  
    age: 19,
30.  
    sex: '男'
31.  
    }]
32.  
    },
33.  
    methods: {
34.  
    updateMei() {
35.  
    // this.persons[0].name = '马老师' //奏效
36.  
    // this.persons[0].age = 50 //奏效
37.  
    // this.persons[0].sex = '男' //奏效
38.  
    // this.persons[0] = {id:'001',name:'马老师',age:50,sex:'男'} //不奏效
39.  
     
40.  
    // push pop shift unshift sort reverse splice可以改变原数组，且页面有反应，直接赋值没有反应
41.  
    // 【所以Vue从新写了Vue数组函数，为什么，因为原数组函数里面的值改变了，但是没有更新在页面上】
42.  
    // 【Vue重写的数组函数：1、调用原来的数组函数push等等对数组进行变化 2、重新解析模板】
43.  
    // 还有Vue.set()也可以更改数组
44.  
    this.persons.splice(0, 1, {
45.  
    id: '001',
46.  
    name: '马老师',
47.  
    age: 50,
48.  
    sex: '男'
49.  
    })
50.  
    }
51.  
    }
52.  
    })

这篇好文章是转载于：学新通技术网