快捷導(dǎo)航

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

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

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

雙向的綁定的原理

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

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

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

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

參數(shù)：

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

返回值

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

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

作用

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

* get：從這個(gè)屬性中取值時(shí)會(huì)觸發(fā)get方法

* set：給這個(gè)屬性賦值時(shí)會(huì)觸發(fā)set方法

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

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

取值時(shí)觸發(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)改變
 // 當(dāng)M改變，V自動(dòng)改變
 // 這里相當(dāng)于M

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

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

vue3.x雙向綁定原理

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

proxy

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

區(qū)別：

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

用法：

創(chuàng)建一個(gè)新的proxy對(duì)象

	let p = new Proxy(obj,{get:function(){},set:function(){}})

<script>
 let obj = {}
 let p = new Proxy(obj,{
 get:function(obj,prop){
  //obj :被代理的對(duì)象 prop:要操作的屬性
  console.log('觸發(fā)了get');
  return obj[prop]
 },
 set:function(obj,prop,value){
  // obj:被代理的對(duì)象
  // prop要賦值的屬性
  // value要賦值的結(jié)果
  console.log('觸發(fā)了set');
  // 將賦值的結(jié)果保存起來
  obj[prop] = value
 }
 })
</script>

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