Vue之监测数据的原理

监测数据原理

1. vue会监视data中所有层次的数据。只需要开启deep:true 即可。

2. 如何检测对象中数据？通过setter实现数据监视，在 new vue()的时候就要传入监测数据 (就是data里的变量呗)

   • 对象中 直接追加属性，vue不承认，不会做响应式处理

   • 如果必须为后来添加属性做响应式，使用如下API

     （1）Vue.set(target,propertyName,value)

     （2）this.$set(target,propertyName,value)

3. 如何监测数组中的数据？

   1. 调用原生对应方法对数组进行更新
   2. 重新解析模板，进而更新页面

4. Vue修改数组中的某个元素一定要用如下方法

   • push、pop、shift、unshift、splice、sort、reverse （除非你暴力变更整个数组）
   • Vue.set() vm.$set()

浅谈数据劫持：

社会中，张三去超市买可乐，李四在半路上拦截，站住，你干嘛。李四就把张三的钱抢了，买可乐去了

代码中，当我们修改data中的变量值，就会触发setter，那么setter>就会阻止你，他会自己去修改变量值，然后重新解析模板

<div id="root">
        <h1>学生信息</h1>
        <p>姓名：{{student.name}}</p>
        <p>年龄：{{student.age}}</p>
        <p>爱好：{{student.skill}}</p>
        <button @click="student.age++">点击增加年龄</button>  
        <br>
        <p v-if="student.sex">性别：{{student.sex}}</p>
        <button @click="addSex">点击添加默认性别</button>
        <br>
        <ul>
            <button @click="addHobby">点击增加业余爱好信息</button>
            <button @click="updateHobby">点击修改第一个爱好</button>
            <h2>业余爱好信息</h2>
            <li v-for="(h,index in student.hobby" :key="index">
                {{h}}
            </li>
        </ul>
    </div>
    <script src="./vue.js"></script>
    <script>
        const vm = new Vue({
            el:'#root',
            data:{
                student:{
                    name:"洋葱",
                    age:19,
                    hobby:['魔方','王者','学习'],
                },

            },
            methods:{
                addSex(){
                    // Vue.set(this.student,'sex','男');
                    this.$set(this.student,'sex','男');
                },
                addHobby(){
                    this.student.hobby.push("打篮球");
                    //对对象可以直接修改，这样数据也是响应式，但是数组就不行，除非使用“传说中的七个方法”才能修改数组，并且数据是响应式
                    //push pop shift unshift reverse sort splice 七种方法
                },
                updateHobby(){
                    // this.student.hobby.splice(0,1,'台球')   //成功修改
                    //Vue.set(this.student.hobby,0,'台球2号')  //使用Vue.set也可以修改，并且数据仍是响应式数据
                    this.$set(this.student.hobby,0,'台球3号')  //照样修改成功了。
                }
            }
        })
    </script>

总而言之，如果一开始new vue实例的时候，data里的元素是具有getter与setter的。如图1：

但是后期你如果仅仅是通过 vm._data.student.friends = {id:“001”,name:“张三”,age:13}来创建一个对象，那么，这个friends是没有getter和setter的。
只能通过上文所提供的API，这样追加的对象或者属性才会有getter和setter