Vue2数据劫持

创建的Vue实例对象，自带的_data属性，是通过劫持data配置项的内容渲染至页面上的。

Vue实例对象的属性 _data ，劫持了Vue配置项里面的data属性，_data 里面的get( return data.name )，

 <div>   <span>姓名：{{name}}</span> <span>年龄：{{age}}</span> </div>

<script></script>

let data={

        name:'张三',

        age:18

}

let vm = new Vue({

        el:'#box',

        data

}) 

        vm里面有一个属性是 _data，_data里面有name属性 和 age 属性，_data 里面的 name属性 和 age 属性是通过劫持 data 里面的 name属性 和 age 属性 得到的

Object.defineProperty(_data,'data',{

        get(){ return data }

        set(value){ data.value=value }

})

修改数据：vm._data.name='王五'  ===  vm.name= '王五 '  此时会触发 set() 属性，会把data 里面的名字更改为 ' 王五 ' 即 data.name = value  执行的是 set(value){ data.value=value }这句代码 ，然后再通过 get() 方法返回给 _data ,此时 _data 再重新渲染页面