Object.defineProperty() 实现双向数据绑定小案例

  Object.defineProperty() 基础知识请看上一篇文章:理解Object.defineProperty()
  在上篇文章最后我提到了vue.js 是通过Object.defineProperty() 方法来实现双向数据绑定的,双向数据绑定原理我准备在下一篇Vue.js 双向数据绑定原理剖析
再细说,这一篇先借助一个小例子自己来实现双向数据绑定。

  那么双向数据绑定到底是什么呢?

  • 当数据发生变化的时候,使用到数据的地方同步变化,即模型到视图(model => view)
  • 当使用到数据的地方发生改变的时候,数据也同步变化,即视图到模型(view => model)

  因此监听数据及视图的变化是实现双向数据绑定的核心,那么如何监听数据的变化呢?我在理解Object.defineProperty()提到Object.defineProperty()方法里的get()set()可以分别监听数据的获取和设置。话不多说,直接上代码。

    let aVal = 1
    let obj = {}
    Object.defineProperty(obj, 'a', {
      set(newVal) {
        console.log('设置a')
        aVal = newVal
      },
      get() {
        console.log('获取a')
        return aVal
      }
    })
双向绑定.gif

代码分析:
  当获取obj.a时,get方法被调用,执行get()里的代码输出‘获取a’并返回aVal的值作为obj.a的值;当设置obj.a为100时,set方法被调用,执行set()里的代码输出'设置 a'并修改aVal的值为100,这样我们就做到了监控obj.a的存取。

  其实在set()方法里我们不止可以进行打印操作,还可以进行其他的操作,比如修改页面元素显示的值,这是不是就实现了从模型到视图的同步?

模型-->视图




  
  
  Document
  
  

看我变变变

数据到视图.gif

  从上面的执行结果可以看到,已经实现了监控数据(模型)改变,视图同步跟着变化,要实现双向绑定,还需要做到监控视图改变,让数据(模型)同步变化。

视图-->模型

   以id为‘#my-input’ 的input框为例,需求是文本框输入内容一旦发生变化,同步更新obj.show的值。具体做法是:监听文本框的“ keyup” 事件。因为每当文本框的值发生改变就会触发keyup事件,那么我们只需要在keyup事件里面修改obj.show的值就好了,这就实现了视图到模型(view => model)的同步。




  
  
  Document
  
  

看我变变变

双向数据绑定.gif

  这样就实现了简单的双向数据绑定了,是不是很简单呢?下一篇:Vue.js 双向数据绑定原理剖析



文中有不足或者读者有疑问或更好的见解,欢迎留言讨论。
如果觉得该篇文章对您有帮助,别忘了留下您的足迹,点个赞❤噢

你可能感兴趣的:(Object.defineProperty() 实现双向数据绑定小案例)