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 要定義/修改的屬性描述符/監聽方法

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