Vue 源码学习过程 - Observer/Dep/Watcher三者实现数据双向绑定

Vue版本: [email protected],简单记录自己的学习过程

目录

实现双向绑定的方式区别

Vue实现数据劫持的方式

了解defineProperty

Observer/Dep/Watcher三者实现

1. Observer

2. Dep

3.Watcher

---

实现双向绑定的方式区别

脏值检测(angularjs)

这种模式下,使用之只有触发指定的事件进入脏值检测,才会进行双向数据绑定更新,一般是通过预先定义的事件行为触发,这也就是在angularjs中,使用普通的dom操作更改input的内容后,没有办法直接更新model的主要原因.

数据劫持(vue.js)

这种模式下,通过defineProperty()为每个属性在setter/getter添加拦截监听,不论以何种方式(vue预定义事件或者原生操作)变动或获取该属性,均可被监听到.必须注意的是,只有设置了setter/getter拦截的属性才可被监听,这也就是当向component的data根节点插入新的属性时,不会被监听的原因.因为新设置的属性没有设置相应的拦截.

Vue实现数据劫持的方式

了解defineProperty

首先了解Object.defineProperty()方法:defineProperty;

也就是说,object的每一个属性均可设置setter&getter,当数据更新和数据调用时,相应方法会被调用.实现数据劫持的核心思想,就是在可能会变化的Object的每个属性的setter&getter中设置订阅和更新,从而触发相应的watcher事件,实现双向绑定.

Observer/Dep/Watcher三者实现

1. Observer

先看一下源码中如何定义: observer/index.js

1.1. Observer中存在三个属性:

• value:需要观察的数据
• dep:数据订阅和通知watcher的事件处理方
• vmCount:一个计数器

1.2. constructor

 constructor (value: any) {
    this.value = value //设置属性value
    this.dep = new Dep() //设置属性dep
    this.vmCount = 0 //设置属性vmCount
    def(value, '