vue2.0响应式原理

vue2.0响应式原理

vue2.x响应式原理（Object.defineProperty()）

响应式原理的含义

就是利用object.defineproperty的getter和setter改变原有的逻辑，重写逻辑，对取值和设置进行观察操作

Object.defineProperty(obj,prop,descriptor)

Object->defineProperty ：对象 ->定义 属性 。为对象添加一个属性，内容为descriptor

obj：对象

prop：属性

descriptor：描述项

//给对象添加一个属性
function defineProperty(){
var _obj = {}
Object.defineProperty(_obj,'a',{
  value:'纱萨婚纱'
})
return _obj
}
var obj = defineProperty()
console.log(obj)   // {a: "纱萨婚纱"}

//给对象添加多个属性
function defineProperty(){
var _obj = {}
Object.defineProperties(_obj,{
  a:{
      value:'抵押给'
  },
  b:{
      value:"事件的看法"
  }
})
return _obj
}
var obj = defineProperty()
console.log(obj)  //{a: "抵押给", b: "事件的看法"}

但是需要注意的是，经object.defineProperty操作过的对象，不可更改，不可枚举，不可删除。

但是也是有解决的办法的，他又这么几个属性：

writeable:true 可写入

enmuerable:true 可枚举 obejct.keys()/for …in…

configureable：true 可配置 就可以进行删除了

一道阿里面试题：

怎么能够进入到if中
if(a===1&a===2&a===3){
	console.log('you win!!!')
}
利用Object.defineProperty
var a=0
Object.defineProperty(window,'a',{
	get(){
		return ++a
	}
})

tips：未完待续。。