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,就小小的普及下关于他的知识:
![](https://i-blog.csdnimg.cn/blog_migrate/1b0ee82cd9dc121ffffc93565c7fd929.png)
get end_date () { if (this.local_time.length) { return toEST(this.local_time[1]) } else { return '' } }