vue框架 中最核心的就是 vue的响应式 ，通过对vue中data数据的变更实现页面效果的重新渲染。但在实际开发中经常会有人发现明明更改了对应数据的值，但是vue却没有重新渲染。明明说好了是响应式的，但为什么有的数据可以通过响应式实现，而有的只能通过vue.set方法实现。这里就会有一个疑问：vue的响应式到底是怎么回事，他的原理又是什么

这个文章主要就是针对这个疑问所对Vue 响应式的一个解析。

前言

直白的描述下响应式，就是对你数据的变化，vue会有一个响应，去完成某件事。

由于Vue 的核心库只关注视图层，所以这件事就是去重新渲染页面。具体是局部渲染还是全部渲染，这个是基于vue的一个性能优化，本篇文章暂时就不谈了。

看到这里应该明白了些，vue的响应式原理是基于vue知道数据发生了改变。

所以针对上文提到的可以重新描述下问题：什么时候的赋值是才不是vue的盲区？

Vue数据劫持

数据劫持

数据劫持: vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。

如下面的代码块就是一个很简单的Getter/Setter构造器。
当obj的param被赋值的时候,执行set对应的方法；当obj的param被取值的时候，执行get对应的方法。

    var obj = {};
    Object.defineProperty(obj,"param",{
        set :function SelfSetter(newVal) {
             console.log("被赋值")
             this._param = newVal
        },
        get :function SelfGetter () {
            console.log("取值")
            return this._param
        }
    })

  obj.param = 'newparam';  // 被赋值
  console.log(obj.param); // 取值  newparam

通过下方源码可以看到，当set的回调触发之后将数据的变动推送给订阅者。

// Vue.js v2.5.13 #964-1018
function defineReactive (
        obj,
        key,
        val,
        customSetter,
        shallow
    ) {
        var dep = new Dep();

        var property = Object.getOwnPropertyDescriptor(obj, key);
        if (property && property.configurable === false) {
            return
        }

        // cater for pre-defined getter/setters
        var getter = property && property.get;
        var setter = property && property.set;

        var childOb = !shallow && observe(val);
        Object.defineProperty(obj, key, {
            enumerable: true,
            configurable: true,
            get: function reactiveGetter () {
                var value = getter ? getter.call(obj) : val;
                if (Dep.target) {
                    dep.depend();
                    if (childOb) {
                        childOb.dep.depend();
                        if (Array.isArray(value)) {
                            dependArray(value);
                        }
                    }
                }
                return value
            },
            set: function reactiveSetter (newVal) {
                var value = getter ? getter.call(obj) : val;
                /* eslint-disable no-self-compare */
                if (newVal === value || (newVal !== newVal && value !== value)) {
                    return
                }
                /* eslint-enable no-self-compare */
                if ("development" !== 'production' && customSetter) {
                    customSetter();
                }
                if (setter) {
                    setter.call(obj, newVal);
                } else {
                    val = newVal;
                }
                childOb = !shallow && observe(newVal);
                dep.notify();
            }
        });
    }

发布消息给订阅者

在上述vue源码中可以看到，当set的回调触发时，回去执行dep.notify();发布消息给订阅者。

迭代数据劫持

上述描述中仅仅只是对数据的一个属性进行了劫持，vue中通过observe方法实现所有的数据属性的劫持。

// Vue.js v2.5.13 #934-959
function observe (value, asRootData) {
        if (!isObject(value) || value instanceof VNode) {
            return
        }
        var ob;
        if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
            ob = value.__ob__;
        } else if (
            observerState.shouldConvert &&
            !isServerRendering() &&
            (Array.isArray(value) || isPlainObject(value)) &&
            Object.isExtensible(value) &&
            !value._isVue
        ) {
            ob = new Observer(value);
        }
        if (asRootData && ob) {
            ob.vmCount++;
        }
        return ob
    }

数据劫持盲区

在日常开发时候发现的赋值之后没有渲染页面，也就是说该属性没有被劫持，当变化时候没有去发布消息给订阅者，属于盲区。

简述

• vue在实例化的时候会将data数据中的属性都做数据劫持。
• 如果是对象，也会迭代本身属性将全部属性都实现数据劫持。
• 当赋值的时候，如果是newVal是对象，也会去迭代newVal的属性实现全部属性的数据劫持

那在什么情况下会有盲区：如果对一个对象添加一个新的属性 如obj本身没有newparam属性，现在 obj.newparam = 1,因为本身obj.newparam的属性不是Getter/Setter,所以在赋值后不会去发布消息给订阅者。这就是所谓的盲区。而且无论以后obj.newparam如何变化都不会发布消息(实际就是vue根本不知道这个属性发生了变化)。

但是有一个有趣的现象：就是虽然obj.newparam不会发布消息，但是如果别的发布者触发的时候，页面局部渲染时如果包括obj.newparam的值，渲染效果也是会显示obj.newparam的最新值。这是由于页面更新时是直接读取的obj.newparam的值。

数组Array的特殊性

可能又有同学会发现，Array对象是没有办法通过上述方法实现数据劫持的。

那么数组是如何实现的：vue中实现的方法实际是对数组的属性重写，重写过后的方法不仅能实现原有的功能，还能发布消息给订阅者。

  // Vue.js v2.5.13 #818-851
  var arrayProto = Array.prototype;
    var arrayMethods = Object.create(arrayProto);[
        'push',
        'pop',
        'shift',
        'unshift',
        'splice',
        'sort',
        'reverse'
    ].forEach(function (method) {
        // cache original method
        var original = arrayProto[method];
        def(arrayMethods, method, function mutator () {
            var args = [], len = arguments.length;
            while ( len-- ) args[ len ] = arguments[ len ];

            var result = original.apply(this, args);
            var ob = this.__ob__;
            var inserted;
            switch (method) {
                case 'push':
                case 'unshift':
                    inserted = args;
                    break
                case 'splice':
                    inserted = args.slice(2);
                    break
            }
            if (inserted) { ob.observeArray(inserted); }
            // notify change
            ob.dep.notify();
            return result
        });
    });

当然Array也有特殊现象：如果要更新 Array 某个索引对应的值得时候，要用Vue.set方式实现

Vue.set

一直在说Vue.set是对数据进行拦截，那么Vue.set究竟是什么

阅读源码就能发现，实际就是数据劫持处理，并发布一次消息

// #1025-1050
function set (target, key, val) {
        if (Array.isArray(target) && isValidArrayIndex(key)) {
            target.length = Math.max(target.length, key);
            target.splice(key, 1, val);
            return val
        }
        if (key in target && !(key in Object.prototype)) {
            target[key] = val;
            return val
        }
        var ob = (target).__ob__;
        if (target._isVue || (ob && ob.vmCount)) {
            "development" !== 'production' && warn(
                'Avoid adding reactive properties to a Vue instance or its root $data ' +
                'at runtime - declare it upfront in the data option.'
            );
            return val
        }
        if (!ob) {
            target[key] = val;
            return val
        }
        defineReactive(ob.value, key, val);
        ob.dep.notify();
        return val
    }