Vue2.x和Vue3.x的雙向繫結原理詳解
雙向的繫結的原理
通過Object.defineproperty()重新定義物件屬性的set方法、get方法來實現的，從這個屬性中取值時會觸發get方法，改變這個屬性時會觸發set方法，所以我們只要將一些需要更新view的方法放在這裡面就可以實現data更新view了,而view更新data其實可以通過事件監聽實現
當檢視上的資料發生改變時， data 中的資料也發生改變當 data 中的資料發生改變時，檢視中的資料也發生改變 Object.defineProperty()
Object.defineProperty() 方法會直接在一個物件上定義一個新屬性，或者修改一個物件的現有屬性，並返回此物件。
語法：Object.defineProperty(obj,prop,descriptor)
引數：
- obj
要定義屬性的物件。 - prop
要定義或修改的屬性的名稱或 Symbol 。 - descriptor
要定義或修改的屬性描述符。
返回值
被傳遞給函式的物件。
物件裡目前存在的屬性描述符有兩種主要形式：資料描述符和存取描述符。資料描述符是一個具有值的屬性，該值可以是可寫的，也可以是不可寫的。存取描述符是由 getter 函式和 setter 函式所描述的屬性。一個描述符只能是這兩者其中之一；不能同時是兩者。
作用
* 可以給物件的一個屬性設定兩個方法：
* get
* set：給這個屬性賦值時會觸發set方法
let obj = {}
// 給obj的name屬性設定兩個方法get&set
Object.defineProperty(obj,'name',{
set:function (value){//value就是給name賦值的結果
console.log('觸發了set');
this._name=value//儲存這個值 這裡不能直接用name,因為會觸發set
},get:function(){
console.log('觸發了get');
// 將儲存的值返回回來
return this._name
}
})
在給name屬性賦值的時候觸發set方法，在set方法中將值存起來
取值時觸發get方法，在get方法中將值返回回來
vue2.x雙向繫結原理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 這裡相當於V -->
<div id="v"></div>
<input type="text" id="ipt">
</body>
<script>
// MVVM：
// 當V改變，M自動改變
// 當M改變，V自動改變
// 這裡相當於M
let data = {}
// 給data中的name屬性設定兩個方法get ，set
Object.defineProperty(data,{
set:function(value){
// 當M改變時，V自動改變
document.querySelector('#v').innerHTML = value
},get:function(){
return this._name
}
})
// 給input新增一個內容改變的之後會觸發的事件
document.querySelector('#ipt').oninput = function(e){
data.name = e.target.value
}
</script>
</html>
一旦輸入框中的內容發生改變，就會觸發oninput事件馬上改變data中的內容，一旦data中的name發生改變就會觸發set方法將最新的值賦值給v，這樣就實現了資料的雙向繫結
vue3.x雙向繫結原理
Vue3.x是通過proxy（代理）實現的資料的雙向繫結
proxy
跟Object.defineProperty一樣也可以給物件的屬性新增兩個方法get&set
區別：
- Object.defineProperty一次性只能給物件的一個屬性新增get&set方法
- Proxy:一次性給物件所有屬性都設定get&set方法
用法：
- 建立一個新的proxy物件
let p = new Proxy(obj,{get:function(){},set:function(){}})
<script>
let obj = {}
let p = new Proxy(obj,{
get:function(obj,prop){
//obj :被代理的物件 prop:要操作的屬性
console.log('觸發了get');
return obj[prop]
},set:function(obj,value){
// obj:被代理的物件
// prop要賦值的屬性
// value要賦值的結果
console.log('觸發了set');
// 將賦值的結果儲存起來
obj[prop] = value
}
})
</script>
vue3.x實現資料的雙向繫結
總結
到此這篇關於Vue2.x和Vue3.x的雙向繫結原理的文章就介紹到這了,更多相關Vue2.x和Vue3.x雙向繫結原理內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！