Vue的雙向綁定
vue雙向綁定是其最重要的核心亮點，其原理也很簡單，這里做個簡單總結
- vue2的雙向綁定是利用的
Object.defineProperty - vue3的雙向綁定是利用的
ES6Porxy中的defineProperty(target, propKey, propDesc
其作用類似于Object.defineProperty
下面寫一下兩種原理的簡單代碼
- 用于直觀展示雙向綁定的視圖層（view） html代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文檔標題</title>
</head><body><input id="input"/><p id="output"></p>
</body>
</html>
- vue2的雙向綁定
let obj={message:"12"
}
Object.defineProperty(obj,"message",{get:function(){return this._message},set:function(newValue){this._message=newValuedocument.getElementById("output").innerHTML=newValue}})document.getElementById("input").addEventListener('input',(event)=>{obj.message=event.target.value
})
代碼主要對對象的set過程進行劫持，將其與view層綁定
- vue3的雙向綁定
let obj={message:"12"
}
const newObj=new Proxy(obj,{get:function(target,propKey,rev){return Reflect.get(target,propKey)},set:function(target,propKey,value){Reflect.set(target,propKey,value)document.getElementById("output").innerHTML=value}
})document.getElementById("input").addEventListener('input',(event)=>{newObj.message=event.target.value
})- 效果
!
