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
}
