Vue2（四）：Vue监测数据的原理

一、先来看一个问题

添加一个按钮点击更新马冬梅的信息：

<button @click="gengxin">点击更新马冬梅的信息</button>

methods:{
            gengxin(){
                this.person[1].name='马老师',
                this.person[1].age=50,
                this.person[1].sex='男'
            }
        }

下面这种方式就不能奏效，但是在控制台查看person[1]姓名年龄啥的都是更改之后的。如果先点击按钮在点击vue后台可以看到信息更改页面却不更改，先点击vue后台就vue也没改页面也没改，这是为啥呢？

 this.person[1]={id:'002',name:'马老师',age:'50',sex:'男'}

二、Vue监视对象改变的原理

我们写的data是要传入的数据，传入到vm._data，这两个其实不是一摸一样的，打开控制台可以看到vm._data里面还有一堆东西，就是因为data在传入给vm._data之前，还要进行一些处理。

加工一下就能做响应式了（数据变了页面也跟着变），vm._data里面还有name.get/address.get和name.set等等函数

我们用原生js写也可以大概模拟一下name和address的getter和setter但是vue做的事情要更多，比如直接输入vue.name就可以查看，js还要vue._data.name

而且如果data里面数据套娃的话vue是自动递归嵌套有getter和setter的，js就没有了，vue连嵌套的数组也能给你挖出来配套getter和setter。

三、Vue监测对象中的数据

1.Vue.set()

实现后添加的数据也能有响应式的功能调用Vue给的API：

Vue.set(vm.student,'sex','男')；

vm.$set(vm.student,'sex','男');

实现点击按钮添加性别

<div id="root">
      <h2>学校名称：{{name}}</h2>
      <h2>学校地址：{{address}}</h2>
      <hr/>
      <button @click="addSex">点我添加性别</button>
      <h2>学生姓名：{{student.name}}</h2>
      <h2 v-if="student.sex">学生性别：{{student.sex}}</h2>
      <!-- 判断一下有没有性别，有就展示没有就隐藏 -->
      <h2>学生真实年龄：{{student.age.rAge}},对外年龄：{{student.age.lAge}}</h2>
       <h2>
           <ul>
               <li v-for="(f,index) in student.friends" :key="index">
               {{f.name}}--{{f.age}}
            </li>
           </ul>
       </h2>
    </div>
    <script type="text/javascript">
    
    const vm=new Vue({
        el:'#root',
        data:{
          name:'尚硅谷',
          address:'北京',
          student:{
              name:'tom',
              age:{
                  rAge:40,
                  lAge:18
              },
              friends:[
                  {name:'jerry',age:35}
              ]
          }
        },
        methods: {
            addSex(){
                Vue.set(this.student,'sex','男')
            }
        },
        
     
    })

set的局限性：最开始我们在student里面没有加sex但是盒子上面引用了没有报错，是因为a.b,只要data里有a就不会报错，如果我们再想添加一个校长是不可以给data里面追加属性的，第一个参数不可以是data或者vm。

四、Vue监测数组中的数据

数组中的数据不能靠setter和getter取得和改变数据，在Vue修改数组中的某个元素实现响应式的方法：

1.使用这些API:

push：在最后一个位置添加元素

pop：删除最后一个元素

shift：删除第一个

unshift：往前边加一个

splice：在指定位置插入一个元素

sort：分类

reverse：反转这个数组

filter不算，因为它都不能改变原数组，可以筛选完之后再赋值到之前的数组

所以我们就知道一当中的问题是为什么了，我们对数组的索引值直接去赋值肯定不行

vue当中的数组调用push方法和原始的数组调用push不一样，它是先像原始数组那样调，然后去重新解析模版，生成虚拟dom等等

2.Vue.set() 或 vm.$set()

Vue.set(vm.student.hobby,1,'跳舞')

五、综合大练习

 <div id="root">
      <hr/>
      <h1>学生信息</h1>
      <button @click="student.age++">年龄+1</button>
      <button @click="addSex">添加性别属性，默认值为男</button>
      <button @click="addFriend">在列表首页添加一个朋友</button>
      <button @click="xiugai">修改第一个朋友的名字为张三</button>
      <button @click="addHobby">添加一个爱好</button>
      <button @click="xiugaiaihao">修改第一个爱好为开车</button>
      <h2>学生姓名：{{student.name}}</h2>
      <h2 v-if="student.sex">学生性别：{{student.sex}}</h2>
      <h2>学生真实年龄：{{student.age}}</h2>
       <h2>
           <ul>朋友
               <li v-for="(f,index) in student.friends" :key="index">
               {{f.name}}--{{f.age}}
            </li>
           </ul>
           <ul>爱好
            <li v-for="(h,index) in student.hobby" :key="index">
            {{h}}
         </li>
        </ul>
       </h2>
    </div>
    <script type="text/javascript">
    
    const vm=new Vue({
        el:'#root',
        data:{
          student:{
              name:'tom',
              age:18,
              hobby:['抽烟','喝酒','打麻将'],
              friends:[
                  {name:'jerry',age:35},
                  {name:'tony',age:40}
              ]
          }
        },
        methods: {
            addSex(){
                Vue.set(this.student,'sex','男')
            },
            addFriend(){
                this.student.friends.unshift({name:'tt',age:18})
            },
            xiugai(){
                //this.student.friends[0].name.splice(0,1,'张三')
                this.student.friends[0].name='张三'
            },
            addHobby(){
                this.student.hobby.unshift('唱歌')
            },
            xiugaiaihao(){
                this.student.hobby.splice(0,1,'开车')
            }
        },
        
     
    })

    </script>

我做的时候修改第一个朋友的名字为张三的出了点问题，我光记着不能直接赋值了，但是像这种给数组下的某一个去赋值是可以的，不可以的是不能数组那一条直接赋值frined[0]={，，}这种

说的是0这一项的setter 和getter没有，0本身是对象，下面的name是一个属性，有属性就有setter 和getter。

不能通过数组的索引值直接赋值！！！