本篇文章帶給大家的內容是關於vue雙向綁定的原理是什麼？ vue雙向綁定的原理實現，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
先上效果圖
#簡單的實作資料的雙向綁定
首先來了解一個東西：Object.defineProperty()
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty
這裡是MDN對這個的詳細說明
簡單點說：
這個方法可以修改現有物件屬性的值
Object.defineProperty (obj, prop, descriptor)
參數說明：
obj：定義屬性的物件
prop：修改後的屬性
descriptor:修改的屬性描述子
這邊只挑最簡單的說，
get:
官方：一個給予屬性getter 的方法，如果沒有getter 則為undefined。當存取該屬性時，該方法會被執行，方法執行時沒有參數傳入，但會傳入this物件（由於繼承關係，這裡的this並不一定是定義該屬性的物件）。預設為 undefined。
**簡單的說：當你需要取物件的屬性值時，就是來呼叫這個函數，取到值的**
set：
官方：一個給予屬性setter 的方法，如果沒有setter 則為undefined。當屬性值修改時，觸發執行該方法。此方法將接受唯一參數，即該屬性新的參數值。預設為 undefined。
**簡單的說：當你需要設定（改變）物件的屬性值時，就是來呼叫這個函數，達到修改的**
接下來上程式碼
nbsp;html>
<meta>
<meta>
<title></title>
<div></div>
<div>
<input>
</div>
<script>
var data = {};
var dom_aa = document.getElementById("aa")
function changedata(value){
data.a = value
}
//直接使用Object.defineProperty里面的set方法进行视图改变
Object.defineProperty(data,"a",{
set:function(newValue){
dom_aa.innerHTML = newValue;
},
get:function(){
return a;
}
})
</script>
相關推薦：
Angular和Vue雙向資料綁定的實作原理(重點是vue的雙向綁定)
以上是vue雙向綁定的原理是什麼？ vue雙向綁定的原理實現的詳細內容。更多資訊請關注PHP中文網其他相關文章！
