Vue学习 -- 双向数据绑定（一）

前面咱们学习vue的路由，今天咱们学习一下vue的另一大神技：双向数据绑定

什么是双向数据绑定？

Vue是三大MVVM框架之一，数据绑定简单来说，就是当数据发生变化时，相应的视图会进行更新，当视图更新时，数据也会跟着变化。

那么它是如何做到的呢？

是通过Object.defineProperty()数据劫持实现的。

Object.defineProperty()

大家可能第一次看到 Object.defineProperty() ，不理解它到底有什么用，这里我们需要了解一下，它可以来控制一个对象属性的一些特有操作，比如读写权、是否可以枚举，这里我们主要先来研究下它对应的两个描述属性get和set

普通对象

var obj ={};
console.group('普通打印对象 =======================')
console.log(obj)

大家可以看到，什么也没有，只有一个 _ proto _ ，（对于原型不了解的小伙伴只能自行学习了，这里就不多说了）

劫持后的对象

var obj ={};
    
    Object.defineProperty(obj,'name',{
      get :function(){
      	//这里 return 了值，如果不写的话，name 会显示 undefined。
        return '张三'
      },
      set :function(){
        
      }
    })

    console.group('劫持后对象 =======================')
    console.log(obj)

到这里大家不难发现，对象多了get和set两个方法，这就有意思了，那他们到底有什么作用呢？咱们继续搞。。。

get 和 set 的作用

var obj ={};

    var name ='张三';

    Object.defineProperty(obj,'name',{
      get :function(){
        console.log('触发get方法')
        return name
      },
      set :function(val){
        console.log(val,'触发set方法')
        name = val
      }
    })

    console.group('首先获取name =======================')
    console.log(obj.name)

    console.group('然后设置name =======================')
    obj.name ='李四'

    console.group('再次获取name =======================')
    console.log(obj.name)

通过上边的打印情况，我们好像大体明白了。

get 功能应该就是 获取

set 功能应该就是 设置

思路分析

了解了Object.defineProperty( )的能力，那么我们就要开始分析。怎么通过它实现双向数据绑定的呢？或者说实现双向数据绑定的难点在哪里？

MVVM流程图

关键点在于data如何更新view，因为view更新data其实可以通过事件监听即可，比如input标签监听 ‘input’ 事件就可以实现了。

所以重点在于，当数据改变，如何更新视图的。结合我们上边的分析可以想到，数据变更会触发set函数，所以我们只要将一些需要更新的方法放在这里面就可以实现data更新view了。

验证一下

<div>
    <input id="inputId" placeholder="请输入"/>
    <div>
      这是内容：
      <p id="txtId"></p>
    </div>
  </div>
  <script>
    var obj ={};
    var txtId = document.getElementById('txtId');

    Object.defineProperty(obj,'name',{
      get :function(){
        console.log('触发get方法')
        return name
      },
      set :function(val){
        //name 改变，触发了set方法
        console.log(val,'触发set方法')
        name = val;
        //使用innerHTML 变更view视图
        txtId.innerHTML = name;
      }
    })

    //input输入时，获得他的value
    inputId.oninput =function(e){
      var val = e.target.value;
      console.log(val,'input的值')
      //赋值给obj.name
      obj.name = val;
    }

  </script>

双向数据绑定（二）

github代码地址