一、Vue更新数据存在的问题

示例代码如下：

<div id="app">
    <h2>人员信息</h2>
    <button @click="update">点击更新Robert人员信息</button>
    <ul>
        <li v-for="(p,index) of perArr" :key="p.id">
            {
   {p}}
        </li>
    </ul>
</div>
<script type="text/javascript"> const vm = new Vue({ el: '#app', data: { perArr: [{ id: '001', name: 'Robert', age: 19}, { id: '002',name: 'Rose', age: 18}, { id: '003', name: 'Jack', age: 20}] }, methods:{ update(){ //方式一：更换数组元素，有效 this.perArr[0].name ='Robin' this.perArr[0].age =20 //方式二：替换数组数据 // this.perArr[0] ={id: '001', name: 'Robin', age: 20} } } }) </script>

效果如下：
在这里插入图片描述
我们通过替换数组元素的方式能够成功修改人员数据，页面也能够成功显示最新数据；而通过修改数组数据我们可以发现页面无法正常显示最新数据，在Vue工具中也无法看到最新的数据，而我们在控制台中打印vm对象数据可以看到最新的数据，这是什么原因呢？

点开vm对象的详细数据，我们可以发现第一个数据数据中数据代理生成的get、set方法被破坏了，导致页面无法响应式的显示。
在这里插入图片描述

二、Vue监测数据改变的原理

示例代码如下：

<body>
    <div id="app">
        <button @click="addSex">添加属性</button>
        <ul>
            <li v-for="(friend,index) of student.friends" :key="index">
                {
   {friend}}
            </li>
        </ul>
    </div>
</body>
<script type="text/javascript"> Vue.config.productionTip = false const vm = new Vue({ el:'#app', data:{ name:'Peking', address:'北京', student:{ name:'tom', parents:{ father:40, mom:39, }, friends:[ 'Jerry','Able','Apple' ] } }, methods:{ addSex(){ // this.student.sex='男' Vue.set(this.student,'sex','男') } } }) </script>

① 对象

通过打印vm对象我们可以看到Vue给vm中的对象属性中的属性添加了多个get、set代理方法。在这里插入图片描述
② 数组

通过观察数组的代理方法我们可以看到Vue并没有给数组里的每个元素都添加代理方法，所以说当我们只是修改数组中的某个元素时，页面不会有响应式的变化，需要使用Vue包裹过的方法才会触发视图更新。这些被包裹过的方法包括：push()、pop()、shift()、unshift()、splice()、sort()、reverse()。

在这里插入图片描述