一、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可以檢測到數組內部數據的變化