Vue的数据双向绑定和Object.defineProperty()
Vue是前端三大框架之一,也被很多人指责抄袭,说他的两个核心功能,一个数据双向绑定,一个组件化分别抄袭angular的数据双向绑定和react的组件化思想,咱们今天就不谈这种大是大非,当然我也没到达那个能力。就来简单的说说这个数据双向绑定。
Vue的数据双向绑定和angular的数据绑定的原理完全不一样,Angular是用的数据脏检测,当Model发生变化,会检测所有视图是否绑定了相关数据,再更改视图,其本质就是循环遍历,发现与更改数据相关的视图,然后将其更新,性能上有点差。而Vue使用的发布订阅模式,是点对点的绑定数据,其本质就是我们今天要谈论的这个方法:Object.defineProperty()
我们先来看看他的用法:通过这个方法为对象设置的属性可以控制他的很多行为,如:
var obj = {} obj.sex = 'men' Object.defineProperty(obj,'height',{ enumerable:true, // 是否可枚举,默认为false // writable:false, // 默认为false,不可写入,即使下面写入了,遍历该对象也遍历不到 // value:'jhon', //默认值 configurable:true, // 是否可删除,默认false。 set:function(val){ console.log("设置值",val) _height = val }, get:function(){ console.log("获取值") return _height } }) obj.height = 100 console.log(obj) console.log(1,obj.height); console.log(2,obj._height) delete obj._height; console.log(obj) for (var k in obj){ console.log(k) console.log(obj[k]); }
enumerable控制该属性是否可枚举,默认为false,不可枚举,通过for in遍历该对象可以发现,是不能遍历出enumerable为false的属性的,但是仍然可以通过对象点的方式来访问该属性。
writable控制属性是否可以被赋值,默认为false。尽管通过对象点的方式赋值,也是遍历不出来的。
value设置该变量的默认值,注意,尽管writable为false的时刻,该值也是生效的,因为这个属性只是控制他是否可以被赋值,并不能阻止他有默认值。
configurable控制该变量是否可删除,默认为false,我们可以通过delete关键字来测试下,发现尽管使用delete删除了该变量,for in 还是可以遍历出来,说明是不能删除的,当其值为true则可以。
既然谈到delete,就小小的普及下关于他的知识:
1. delete关键字可以用来删除没有使用var声明的变量
2. delete关键字还可以用来删除对象的属性
3. delete关键字拥有返回值,表示删除是否成功,但是不可靠!(即对于一些不可以删除的属性,他删除后没有达到效果,但结果依然为true)
set和get方法:这两个方法会在改变量设置值和获取值时自动调用,但是这两个方法不能和writable以及value一起使用,否则会报错。当这两个方法只设置一个时,就是对应着只读或只写属性。
set方法里面设置一个变量接收将要设置的值时,可以用其他的名字,如:_height,也可以和该变量同名,如height,但是不管怎么,这个变量都不属于该对象,在外面通过对象点的方式是访问不到的,而只能访问到调用Object.defineProperty()方法设置的那个变量,即他的第二个参数。并且在打印该对象的时候,你会发现height属性后面有个(。。。),并没有直接显示该属性,以后碰到这样的,就说明他是设置了set或get方法,如下图
![](https://images2017.cnblogs.com/blog/1221009/201709/1221009-20170921150827087-106874652.png)
细心的同学会发现,Vue 的data属性里面的所有属性都同时具有set和get方法,而Vue正式通过这种机制,检测变量的读取,从而实现与他绑定的视图的更新,这种效率毫无疑问比angular是高。
set和get方法在Vue中的第一次应用:当想定义个属性,而这个属性又得经过一些转换,才是我们要的值,就可以向下面这样去定义。调用的时候就和其他变量一样调用即可,如:this.end_date
get end_date () { if (this.local_time.length) { return toEST(this.local_time[1]) } else { return '' } }
这里关于数据双向绑定的原理就不做进一步深究了,其实是我自己还理解的不够深,想进一步了解的同学,可以参考这篇文章。http://www.cnblogs.com/kidney/p/6052935.html?utm_source=gold_browser_extension