vue 2.0與3.0的雙向資料繫結實現原理
阿新 • • 發佈：2022-03-16
一、vue 2.0雙向資料繫結
在vue2.0中實現雙向資料繫結，主要通過資料劫持的方式來實現。通過Object.defineProperty來劫持物件屬性的getter和setter操作，當資料發生變化時發出通知。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>vue2.0實現雙向繫結</title> 6 </head> 7 <body> 8姓名：<span id="spanName"></span> 9 <br/> 10 <input type="text" id="inputName"/> 11 </body> 12 <script> 13 let obj={ 14 name:'' 15 } 16 let newObj = JSON.parse(JSON.stringify(obj)); //進行深拷貝 17 18// 資料劫持 19 Object.defineProperty(obj,'name',{ //監聽obj中的name屬性 20 get(){ 21 return newObj.name; //不能直接返回obj.name防止無限迴圈 22 }, 23 set(val){ 24 if(val === newObj.name) return; //如果相同就不進行賦值 25 newObj.name = val;26 setInner() 27 } 28 }) 29 30 //設定頁面元素的值 31 function setInner(){ 32 spanName.innerHTML = obj.name; 33 inputName.value = obj.name; 34 } 35 36 //監聽input的輸入，設定obj中name的值 37 inputName.oninput = function (){ 38 obj.name = this.value 39 } 40 41 </script> 42 </html>
二、vue 3.0雙向資料繫結
3.0的雙向繫結的實現比2.0更加簡單，是通過es6語法中的proxy代理來進行實現。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>vue3.0實現雙向繫結</title>
</head>
<body>
姓名：<span id="spanName"></span>
<br/>
<input type="text" id="inputName"/>
</body>
<script>
let obj = {};
obj = new Proxy(obj,{
get(target,prop){
return target[prop]
},
// target 原先的值 prop代表物件的key值 value最新的值['']
set(target,prop,value){
target[prop] = value;
setInner()
}
})
//設定頁面元素的值
function setInner(){
spanName.innerHTML = obj.name;
inputName.value = obj.name;
}
//監聽input的輸入，設定obj中name的值
inputName.oninput = function (){
obj.name = this.value
}
</script>
</html>
三、相比於vue2.x，使用proxy的優勢如下
- 1 defineProperty只能監聽某個屬性，不能對全物件監聽
- 2 可以省去for in、閉包等內容來提升效率（直接繫結整個物件即可）
- 3 可以監聽陣列，不用再去單獨的對陣列做特異性操作
- vue3.x可以檢測到陣列內部資料的變化