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()方法里我们不止可以进行打印操作，还可以进行其他的操作，比如修改页面元素显示的值，这是不是就实现了从模型到视图的同步？

模型-->视图

  
  
  
  
  
看我变变变


  

数据到视图.gif

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

视图-->模型

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

  
  
  
  
  
看我变变变


  

双向数据绑定.gif

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

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