属性拦截器(Object.defineProperty),以及VUE中的双向数据绑定简单实现

vue.js是通过它实现双向绑定的。俗称属性拦截器或者前端数据劫持。

首先看一下官方的定义:

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

语法:
Object.defineProperty(obj,prop,descriptor)

参数:
1.obj:需要定义属性的对象。

2.prop:需定义或修改的属性的名字。

3.descriptor:将被定义或修改的属性的描述符。

返回值:

返回传入函数的对象,即第一个参数obj。
对象里目前存在的属性描述符有两种主要形式:数据描述符和存取描述符。数据描述符是一个拥有可写或不可写值的属性。存取描述符是由一对 getter-setter 函数功能来描述的属性。描述符必须是两种形式之一;不能同时是两者。

数据描述符和存取描述符均具有以下可选键值:

configurable
当且仅当该属性的 configurable 为 true 时,该属性描述符才能够被改变,也能够被删除。默认为 false。

enumerable
当且仅当该属性的 enumerable 为 true 时,该属性才能够出现在对象的枚举属性中。默认为 false。

数据描述符同时具有以下可选键值:

value
该属性对应的值。可以是任何有效的 JavaScript 值(数值,对象,函数等)。默认为 undefined。

writable
当且仅当该属性的 writable 为 true 时,该属性才能被赋值运算符改变。默认为 false。

存取描述符(第三个参数对象)同时具有以下可选键值:

get
一个给属性提供 getter 的方法,如果没有 getter 则为undefined。当我们读取某个属性的时候,其实是在对象内部调用了该方法,此方法必须要有return语句。该方法返回值被用作属性值。默认为 undefined。

set
一个给属性提供 setter 的方法,如果没有 setter 则为 undefined。该方法将接受唯一参数,并将该参数的新值分配给该属性。默认为 undefined。也就是说,当我们设置某个属性的时候,实际上是在对象的内部调用了该方法。

要注意的一点是:在 descriptor 中不能同时设置访问器(get 和 set)和 wriable 或 value,否则会错,就是说想用 get 和 set,就不能用 writable 或 value 中的任何一个。

写个小例子:

代码段:

1.png

视图显示:

2.png

1s后的视图显示

3.png

2s后的视图显示

4.png

说这么多,也就是我们可以在页面监听某个变量,当变量发生变化的时候,我们就更新对应的视图。由数据来驱动视图的更新,vue .js的核心思想就是这个。

二、数据双向绑定:

数据模型和视图之间的双向绑定,用户在视图上的修改会自动同步到数据模型中,同样的,如果数据模型中的值发生变化,也会同步到视图中去。

优点:双向绑定在一些需要实时反应用户输入的场合会非常方便(比如多级联动菜单)

最经常应用的场景:表单

代码示例:

5.png

视图显示:

6.png

注意:
Vue 虽然通过 v-model 支持双向绑定,但是如果引入了类似redux的vuex,就无法同时使用 v-model。
详情参见:https://github.com/vuejs/vuex/blob/master/docs/zh-cn/forms.md

总结:
单向绑定跟双向绑定在功能上基本上是互补的,所以我们可以在合适的场景下使用合适的手段。比如在UI控件中(通常是类表单操作),会使用双向的方式绑定数据;而其他场景则统一采用单向方式构建。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.ios高性能编程 (1).内层 最小的内层平均值和峰值(2).耗电量 高效的算法和数据结构(3).初始化时...
    欧辰_OSR阅读 29,874评论 8 265
  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 13,820评论 1 32
  • 我是疯儿 你是傻 缠缠绵绵到天涯 我是蘑菇 你是线 缠缠绵绵成线团 我是妹妹 你是姐 嘻嘻哈哈到永远 ✌️
    居家小咸鱼阅读 1,930评论 1 1
  • 心法与手法的结合 生命中有许多事物,都是需要用心灵去体验的。头脑固然可以帮忙,但它绝对无法取代心灵的体验。爱情如是...
    尚先李政涛阅读 7,925评论 1 9
  • 我留恋家中可口的饭菜 我留恋家里暖和的被窝 我留恋父母对我的唠叨 我留恋村庄清晨和日落 可是我还要远方的美好 又一...
    笑逐燕开Yeon阅读 1,287评论 0 2