vue数据劫持理解

上篇讲到vue的数据代理，这篇来讲一下我对数据劫持的理解。

数据劫持的通俗理解就是数据监视，当我们修改vue实例对象中的data属性中的值时，页面中的数据会立马改变，这又是如何检测到的呢？

**数据劫持：**就是vue通过Object.defineProperty对data中的属性添加了set，get方法，并在调用该方法时为该方法添加一些操作来劫持对象属性的操作。

vue监视数据的原理：
Vue数据绑定之前，通过observe每个对象的属性，添加到订阅器dep中，当数据发生变化的时候发出一个notice，即消息的订阅与发布。

vue监视对象中的数据 ：
通过setter实现监视，且要在new Vue时就传入要监测的数据。
(1)对象中后追加的属性，Vue默认不做响应式处理。
(2)如需给后添加的属性做响应式，需使用set方法：

代码如下：

<div id="root">
        <h1>姓名：{{person.name}}</h1>
        <h1>地址：{{person.sex}}</h1>
    </div>
    <script>
        Vue.config.productionTip=false;// 阻止vue在启动时生成自动提示
       	let vm=new Vue({
            el:'#root',
            data:{
               person:{
                   name:'rose',
               }
            },
            methods:{
                addSex(){
                    // vue实例对象中的方法
                    // this.$set(this.person,'sex','女')
                    // Vue自身的方法
                    Vue.set(this.person,'sex','女');

                }
            },
            mounted(){
                this.addSex();
            }
        })
    </script>

Vue给sex属性添加了get，set方法。

vue监视数组中的数据
通过包裹数组更新元素的方法实现，本质就是做了两件事：

1.调用原生对应的方法对数组进行更新，也就是做了劫持修改。
2.重新解析模板，进而更新页面。

Vue想要修改数组中的某个元素，只能使用数组原有的API进行修改。
当Vue在observer数据阶段会判断如果是数组的话，就给数组原型上的API进行了劫持，只要使用数组方法修改，vue就能检测到数据的变化，进而调用get，set方法。
API如下：
push()、pop()、shift()、unshift()、splice()、sort()、reverse() 等。

特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象 添加属性！！！

希望这篇文章对你有所帮助，欢迎更正或者补充~