[JavaScript知识库]vue的单向数据流和双向数据绑定

• Vue 的数据流本质上是单向数据流，而我们平时说的双向数据绑定，只是Vue的一个语法糖，也就是说，Vue在数据流方面既可以实现单向数据流也可以实现双向数据绑定。
  ?
• 双向数据绑定实现原理：

  

  <input type="text" :value="content" @input="onInput">
  <script>
  export default{
      data: { return: {content:"hello"} },
      methods: {
              onInput(e) { 
                   this.content = e.target.value 
               } 
      }            
  }
  </script>  

  

  从上述代码中我们可以看出，通过@input事件来监听用户行为，一旦触发了onInput事件，content的值也随即会发生变化，也就是View中的数据变化导致Model层的数据变化，而在data中去声明的content的值，也会导致value值的变化，也就是Model层的数据变化导致View的数据变化，这两个情况我们统称为数据的双向绑定。

• 单向数据流原理：

  <input type = "text" :value="content">
  <script>
  export default{
            data:{ return { content:"hello"}}
  }

  Model层的数据变化时会导致View的数据变化，但是View的数据变化并不会引起Model层的数据变化。
  在这里单向数据流涉及到了Object.defineProperty()这个内置方法，它可以监听变量的读取和写入并在发生读取与写入的时候执行回调函数；
  Object.defineProperty(obj,prop,descriptor)
  //obj 要定义属性的对象/监听的对象 prop 要定义/监听的对象的属性名 desc 要定义/修改的属性描述符/监听方法

  copy

  let a = {};
  Object.defineProperty(a,'text',{
  
             get () {console.log ("读取");}
             set () {console.log("写入");}
  });