Vue.js雙向綁定實現的原理

Vue.js最核心的功能有兩個,一是響應式的數據綁定系統。二是組件系統

一、訪問屬性

訪問器屬性是對象中的一種特殊屬性,它不能直接在對象中設置,而必須通過 defineProperty() 方法單獨定義。

Object.defineProperty()方法會直接在一個對象上定義一個新屬性,或者修改一個對象的現有屬性,并返回這個對象

語法

Object.defineProperty(obj,prop,descriptor)

參數:
      obj:要在其上定義屬性的對象
      prop:要定義或修改的屬性的名稱
      descriptor:將被定義或修改的屬性描述符

返回值:被傳遞給函數的對象。
image.png

二、極簡雙向綁定的實現

隨文本框輸入文字的變化,span 中會同步顯示相同的文字內容;在控制臺顯示的修改obj.hello的值。視圖會相應更新。這樣就實現了 model=>view 以及 view=>model 的雙向綁定

image.png
image.png
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容