angular和vue雙向數據綁定

angular和vue雙向數據綁定的原理(重點是vue的雙向綁定)

我在整理javascript高級程序設計的筆記的時候看到面向對象設計那章,講到對象屬性分為數據屬性和訪問器屬性,我們平時用的js對象90%以上都只是用到數據屬性;我們向來講解下數據屬性和訪問器屬性到底是什么?

 

• 數據屬性:數據屬性包含一個數據值的位置,在這個位置可以讀取和寫入值.

• 訪問器屬性:訪問器屬性不包含數據值;他們包含一對getter和setter函數在讀取訪問器屬性時,會調用getter函數,這個函數負責返回有效的值,在寫入訪問器屬性時,會調用setter函數並傳入新值.

 

這里介紹的重點是訪問器屬性,設置對象的訪問器屬性只能用es5的Object.defineProrerty()方法,如下例子:

 

 

 

  var book={
          _year:2004,
          edition:1
      };
      Object.defineProperty(book,"year",{
          get:function () {
              return this._year
          },
          set:function (newValue) {
              if(newValue>2004){
                  this._year=newValue;
                  this.edition+=newValue-2004;
              }
          }
      });
        book.year=2005;
        alert(book.edition);//2
        console.log(book.year);//2005

 

 

 

也就是當執行book.year=2005的時候其實是執行了year中的set方法,當執行book.year的時候執行了year的get方法;

 

   var book={
          _year:2004,
          edition:1
      };
      Object.defineProperty(book,"year",{
          get:function () {
              console.log("year get")
              return this._year
          },
          set:function (newValue) {
              console.log("year set")
              if(newValue>2004){
                  this._year=newValue;
                  this.edition+=newValue-2004;
              }
          }
      });
        book.year=2005;
        alert(book.year);

 

控制台的提示是:

 

 

這個原理就是vue雙向數據綁定的原理,我們在vue組件中的data聲明屬性數據的時候其實在對象中的已經將這個屬性封裝成了訪問器屬性.

 

 

每個屬性都有get和set方法,在做雙向的數據的控制都在get和set方法中,因為無論你是在ready(2.0是mounted了)或是在view中改變值都會觸發set方法,將新值復制進去,在重新在view中匹配值,當然你們有更復雜的控制操作,get方法着是讓ready中獲取的這個屬性值一直保存最新值.

 

  angular1的雙向數據綁定是臟數據監測,簡單點說就是監測新值和舊值有沒有變化,這種方式就要定時監測了咯.兩種性能的消耗感覺不在一個層次上的啊.

 

  就好比用html5 Sockets做后台主動消息推送前端和用js定時器每個5秒發送請求到后台捕獲消息的性能差距一樣.

 

還有之前寫的js面向對象分層的思想其實也可以用在vue項目中,以前我一直以為vue的data層其實就是個擺設,但在api發現computed屬性之后data層完全可以實現發送ajax取數功能,沒必要在全都放到ready(2.0是mounted了)里面,這個ready(2.0是mounted了)可以只負責數據格式出來,或者控制頁面的動態效果而已.這js的結構就像后台MVC那樣層次功能分明清晰.這也只是我突然想到的思路還沒真正應用到實際項目中,只是給在用vue的朋友提供個思路.

 

 import data  from '../assets/js/data'
    export default{
        data(){
            return{
              menu:data.menu,
              inde:"",
              row:"",
              clomu:""
            }
        },
      computed:{
        isfull:function () {
          alert(111);
          return 11;
        }
      },
      mounted(){

      },
      methods:{
          domclick:function (i) {
            if(this.inde===i){
              this.inde="";
            }else {
              this.inde = i;
            }
          },
        subclick:function (i,o) {
         this.row=i;
          this.clomu=o;
        }
      }
    }