vue数据双向绑定原理简述

vue数据双向绑定，理解成当一方改变另外一方也需要做出对应的变化。整个实现的过程，需要使用到object.defindprototype(data,key,{get,set})

这里讲一下data key {get,set}的关系
当我们定义一个对象时
let a =  {
    s:10
}
在控制台打印
console.log(a)

data 是我们检测的对象 key是对象的属性  get,set 是对象上原型的方法

get 当属性被获取时会被触发
set 当属性值发生变化时触发

let data=  {
    a:10,
    b:20,
    c:'小明'
}
data这里是一个是一个简单的数据类型
举例如果数据是一个复杂的数据类型
data:{
    a:10,
    list:[
        {
            name:'小明'，
            age:20
        },
        {
            name:'小红'，
            age:19
        }
    ]
}

会使用obServer()进行递归检测数据类型

object.defindprototype(data,key,{get,set}){
    //obServer(data)  这里不做讲述检测数据的过程。
    //只讲述，数据双向绑定，如何实现修改，并通知
    let dep = new Dep()
    a,b,c 都是data 对象的属性
    每一个key都会绑定一个唯一的dep,用来收集使用到这个key的使用者(简称订阅者或者是watcher) ，
    get(){
            当页面被渲染时，数据被获取，然后完成页面渲染。
            检测到数据被使用了或者称为数据被劫持了，这里dep就开始工作了，开始依赖收集。
            只要是使用到这个key属性的地方，都会被这个key关联的唯一dep进行收集
            dep.depend() 触发收集依赖的动作（实现过程是隐式的，代码中一般不做体现）
    }
    set(){
            属性值被修改时，会被set捕获到。
            此处值被修改了，需要通知属性的使用者进行更新(订阅者或watcher)
            dep.notify() 触发通知属性使用者进行更新（实现过程是隐式的，代码中一般不做体现）
    }
}