推荐一个讲解的视频
先说明一下,很多人误认为数据响应和双向绑定是一样的,这不一样,数据响应式指的是数据的变化引起视图的变化,而双向绑定才是数据到视图,视图到数据相互影响。
大致说一下思路,具体代码肯定还是要自己花时间看视频,最好是跟着敲一下代码。Vue 数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。利用了Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)。
在observe方法中进行数据劫持,Dep类进行收集订阅者,通过addSub方法向数组中添加订阅者实例,在DOM被创建好的时候,订阅者就会被添加进来,同时,Dep类中有一个notify方法,被每当数据变化时(即在set中被劫持到),Dep类中的notify方法通过遍历的方式,通知每一个订阅者(调用他们的update方法), Watcher类是订阅者类,里面有update方法,在这个方法中触发回调函数的方法即cb方法(cb方法中记录着如何更新自己的内容,在创建Watcher类实例时会被传进来)。会根据最新的数据去渲染dom结构。当同页面上的的内容变化时,通过事件监听的方式更新数据的值。