vue响应式数据原理

中所周知,vue采用的是MVVM的设计思想,那么到底什么是MVVM呢?

MVVM，说到底还是一种分层架构。它的分层如下：

MVVM是Model-View-ViewModel的缩写。

• Model: 域模型，用于持久化
• View: 作为视图模板存在

• ViewModel: 作为视图的模型，为视图服务

  
  

vue的核心部分是响应数据

在 new Vue()之后。 Vue 会调用 _init 函数进行初始化，也就是这里的 init 过程，它会初始化生命周期、事件、 props、 methods、 data、computed 与 watch 等。其中最重要的是通过Object.defineProperty设置 setter 与 getter函数，用来实现响应式以及依赖收集,它使得当被设置的对象被读取的时候会执行 getter 函数，而在当被赋值的时候会执行 setter 函数。
接下来简单实现一下vue的响应式：

        class MVVM {
             // Vue 构造类 
            constructor(options) {
                this._data = options.data
                // 数据劫持,给所有属性添加getter和setter
                new Observer(this._data)
                /* 将数据代理到vue实例上
                   在开发中我们之所以能够以this.xx 操作data中的数据,就是因为vue将data中的数据代理到vue的实例上了 */
                this.proxyData(this._data)
                new Watcher()
            }
             // 代理数据的方法
            proxyData(data) {
                Object.keys(data).forEach(key => {
                    Object.defineProperty(this, key, {
                        get() {
                            return data[key]
                        },
                        set(newVal) {
                            data[key] = newVal
                        }
                    })
                })
            }
        }

        class Observer {
            constructor(data) {
                this.observer(data)
            }

            //添加数据监听
            observer(data) {
                //对data做校验
                if (!data || typeof data !== 'object') {
                    return
                }
                Object.keys(data).forEach(key => {
                    this.defineReactive(data, key, data[key])
                    // 递归的方式深度监听
                    this.observer(data[key])
                })
            }

            // 响应数据
            defineReactive(object, key, val) {
                let _this = this
                let dep = new Dep()
                Object.defineProperty(object, key, {
                    enumerable: true,
                    configurable: true,
                    get() { // 当getter的时候添加订阅
                        Dep.target && dep.add(Dep.target)
                        return val
                    },
                    set(newVal) {
                        if (newVal === val) return
                        _this.observer(newVal) // 如果设置的新值是对象,需要深度监听
                        val = newVal
                        dep.notify()
                    }
                })
            }
        }

        class Watcher {
            constructor() {
                Dep.target = this
            }

            updata() {
                alert('数据更新')
            }
        }
        Dep.target = null;

        class Dep {
            constructor() {
                this.subs = []
            }
            add(watcher) { // 添加订阅
                this.subs.push(watcher)
            }
            notify() { // 遍历subs通知更新
                this.subs.forEach(watcher => {
                    watcher.updata()
                })
            }
        }

在的代码中 observe 的目的是遍历对象，在内部对数据进行劫持，即添加getter和 setter，我们把劫持的逻辑单独抽取成 defineReactive 方法，需要注意的是 observe 方法在执行最初就对当前的数据进行了数据类型验证，然后再循环对象每一个属性进行劫持，目的是给同为 Object类型的子属性递归调用 observe进行深度劫持。

在 defineReactive 方法中，创建了 Dep 的实例，并对 data 的数据使用 get 和 set 进行劫持，当访问的时候触发getter，添加订阅,将这个 watcher 添加到 Dep 的 subs 数组中进行统一管理，因为在代码中获取 data中的值操作比较多，会经常触发get，我们又要保证 watcher不会被重复添加，所以在 Watcher 类中，获取旧值并保存后，立即将 Dep.target 赋值为 null，并且在触发 get 时对 Dep.target进行了短路操作，存在才调用 Dep 的 addSub 进行添加。

通过以上的代码可见,vue的响应式原理主要是通过Object.defineProperty方法来实现,但是它存在着一些局限,如对属性的添加、删除动作的检测，对数据基于下标的修改和对 .length修改的检测存在着一些问题,所以vue官方提供一个API$set()方法,来解决基于数组下标操作无法更新视图的问题。据说vue的下一个版本，vue3.0计划使用es6的Proxy来重写vue的数据监听。