Vue响应式原理

一、理解什么是代理对象

1.定义一个源对象

let obj1 = {
            name:'张三',
            age:20
        }

2.定义一个代理对象

 let obj2 = obj1

用代理对象修改源对象的数据

       obj2.name = '李四'
       obj2.age = 30

二、看一下Vue是如何使用代理对象

1.定义源对象myData
2.将源对象传递给Vue的Data选项，背后做了两件事情
① 设置Vue实例的_data属性，作为当前源对象的代理对象。（响应式的核心）
② 将_data里面代理的所有数据，再添加到当前Vue实例身上。（为了Vue实例方便调用数据）

 let myData = {
            name:'张三',
            age:20
        }
        let vm = new Vue({
           
            data:myData
        })

通过Vue的代理对象_data 修改name和age的值 能够修改 data的值

        vm._data.name = '王五'
        vm._data.age = 18

三、给对添加属性的几种方式

let obj3 = {}
        //方式一:
        obj3.name = '张三'
        //方式二：
        obj3['age'] = 20
        //方式三：通过Object对象的defineProperty方法，给指定的对象添加指定的属性
        // 使用这种方式，给对象添加的属性，默认不可被枚举，不能被删除
        // 使用这种方式，给对象添加的属性，对属性的保护措施更加严格
        Object.defineProperty(obj3,'sex',{
            //属性值
            value:'男',
            //允许被枚举（默认不允许）
            enumerable:true,
            //允许被删除（默认不允许）
            configurable:true
        })
        //通过delete关键，可以删除对象身上的指定属性
        delete obj3.name
        delete obj3.sex

四、Vue响应式的原理

 <div>
        <h2>姓名：<span id="name"></span></h2>
        <h2>年龄：<span id="age"></span></h2>
  </div>

在页面中，显示姓名和年龄

        document.querySelector('#name').innerHTML = data.name
        document.querySelector('#age').innerHTML = data.age

定义一个代理对象（使用_data 去代理 data）

 let _data = {}

使用Object.defineProperty给代理对象添加属性

      注:在设置对象的属性-时，不能够设置value的值
        Object.defineProperty(_data,'name',{
            //get方法，用于返回属性的值（当我们获取name属性获取值时，会调用get方法）
            get(){
                return data.name   //返回 data.name的值
            },
            //set方法，用于设置属性的值（当我们设置name属性设置值时，会调用set方法）
            set(val){
                data.name = val
                //当代理对象，监听到数据发生变化了，就会重新渲染页面
                document.querySelector('#name').innerHTML = data.name
            }
        })
        Object.defineProperty(_data,'age',{
            get(){
                return data.age
            },
            set(val){
                data.age = val
                //当代理对象，监听到数据发生变化了，就会重新渲染页面
                document.querySelector('#age').innerHTML = data.age
            }
        })