阅读 249

用ES5方法手动实现数据的双向绑定

vue是一个mvvm的渐进式框架,很容易上手,mvvm分为,view:视图,model:数据,viewmodel:数据视型。其中vue帮我们承载最多的就是viewmodel这个模块,简称vm。
v-model这个指令我相信大家都用的很多,主要用于表单元素的双向数据绑定,而什么是双向数据绑定呢,即数据变了视图跟着变和视图变了数据跟着变,今天呢,我们就用ES5的方法手动实现数据双绑。
假设有个输入框,初始值设为data.msg,我们就来实现他们之间的双绑:

31.png

1.视图变了 ---> 数据就跟着改变
这一步很好实现,即给input注册一个输入事件,拿到动态的value值,直接赋值给data.msg即可完成第一步:

32.png

2.数据变了 ---> 视图跟着改变
难点就在这第二步,因为我们得知或者监听数据什么时候发生变化。然而ES5提供一个方法可以解决这个问题,就是Object.defineproperty():

33.png

我们用这个属性可以劫持data.msg,其中提供get方法和set方法,get就是获取对象属性的操作,在这里虽然我们在获取元素值时做其他事情,但是这里我们只需要获取它的值,即return data.msg即可,而set可以劫持设置操作,也能获取到设置之后的值value,这里我们不仅要把劫持到的msg的值进行更新,也要把修改之后的值赋值给输入框,才算完成数据改变 ---> 视图改变的操作。

这里要注意的是,当我们劫持到data.msg时,我们需要声明一个临时变量来存储它的值,试想如果获取和设置劫持的都是data.msg, 而当他们进行获取和设置操作时又会触发get和set,那这不就成了一个死循环了嘛。其实当我们劫持到data.msg 时,整个劫持操作就已经和data.msg没有关系了, 因为我们获取和设置操作的都是临时变量msg,只需要即使更新这个临时变量即可。

就这么简单就实现了数据双绑,这样动手实现一下,是不是感觉v-model做的事也很简单呢,实际上v-model是vue帮我们实现上述的操作,只是它劫持的是整个data中数据,如果要实现也很简单,循环遍历对象劫持即可:

34.png

文章分类
前端
文章标签