快捷導(dǎo)航

Vue2.x和Vue3.x的雙向綁定原理詳解

更新時間：2020年11月05日 10:41:52 作者：Silent Land

這篇文章主要給大家介紹了關(guān)于Vue2.x和Vue3.x的雙向綁定原理的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

雙向的綁定的原理

通過Object.defineproperty()重新定義對象屬性的set方法、get方法來實現(xiàn)的，從這個屬性中取值時會觸發(fā)get方法，改變這個屬性時會觸發(fā)set方法，所以我們只要將一些需要更新view的方法放在這里面就可以實現(xiàn)data更新view了,而view更新data其實可以通過事件監(jiān)聽實現(xiàn)

當(dāng)視圖上的數(shù)據(jù)發(fā)生改變時， data 中的數(shù)據(jù)也發(fā)生改變當(dāng) data 中的數(shù)據(jù)發(fā)生改變時，視圖中的數(shù)據(jù)也發(fā)生改變 Object.defineProperty()

Object.defineProperty() 方法會直接在一個對象上定義一個新屬性，或者修改一個對象的現(xiàn)有屬性，并返回此對象。

語法：Object.defineProperty(obj, prop, descriptor)

參數(shù)：

obj
要定義屬性的對象。
prop
要定義或修改的屬性的名稱或 Symbol 。
descriptor
要定義或修改的屬性描述符。

返回值

被傳遞給函數(shù)的對象。

對象里目前存在的屬性描述符有兩種主要形式：數(shù)據(jù)描述符和存取描述符。數(shù)據(jù)描述符是一個具有值的屬性，該值可以是可寫的，也可以是不可寫的。存取描述符是由 getter 函數(shù)和 setter 函數(shù)所描述的屬性。一個描述符只能是這兩者其中之一；不能同時是兩者。

作用

* 可以給對象的一個屬性設(shè)置兩個方法：

* get：從這個屬性中取值時會觸發(fā)get方法

* set：給這個屬性賦值時會觸發(fā)set方法

 let obj = {}
 // 給obj的name屬性設(shè)置兩個方法get&set
 Object.defineProperty(obj,'name',{
 set:function (value){//value就是給name賦值的結(jié)果
  console.log('觸發(fā)了set');
  this._name=value//保存這個值 這里不能直接用name,因為會觸發(fā)set
 },
 get:function(){
  console.log('觸發(fā)了get');
  // 將保存的值返回回來
  return this._name
 }
 })

在給name屬性賦值的時候觸發(fā)set方法，在set方法中將值存起來

取值時觸發(fā)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>
 <!-- 這里相當(dāng)于V -->
 <div id="v"></div>
 <input type="text" id="ipt">
</body>
<script>
 // MVVM：
 // 當(dāng)V改變，M自動改變
 // 當(dāng)M改變，V自動改變
 // 這里相當(dāng)于M

 let data = {}
 // 給data中的name屬性設(shè)置兩個方法get ，set
 Object.defineProperty(data,'name',{
 set:function(value){
  // 當(dāng)M改變時，V自動改變
  document.querySelector('#v').innerHTML = value
 },
 get:function(){
  return this._name
 }
 })
 // 給input添加一個內(nèi)容改變的之后會觸發(fā)的事件
 document.querySelector('#ipt').oninput = function(e){
 data.name = e.target.value
 }
</script>
</html>

一旦輸入框中的內(nèi)容發(fā)生改變，就會觸發(fā)oninput事件馬上改變data中的內(nèi)容，一旦data中的name發(fā)生改變就會觸發(fā)set方法將最新的值賦值給v，這樣就實現(xiàn)了數(shù)據(jù)的雙向綁定

vue3.x雙向綁定原理

Vue3.x是通過proxy（代理）實現(xiàn)的數(shù)據(jù)的雙向綁定

proxy

跟Object.defineProperty一樣也可以給對象的屬性添加兩個方法get&set

區(qū)別：

Object.defineProperty一次性只能給對象的一個屬性添加get&set方法
Proxy:一次性給對象所有屬性都設(shè)置get&set方法

用法：

創(chuàng)建一個新的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('觸發(fā)了get');
  return obj[prop]
 },
 set:function(obj,prop,value){
  // obj:被代理的對象
  // prop要賦值的屬性
  // value要賦值的結(jié)果
  console.log('觸發(fā)了set');
  // 將賦值的結(jié)果保存起來
  obj[prop] = value
 }
 })
</script>

vue3.x實現(xiàn)數(shù)據(jù)的雙向綁定