Vue雙向數(shù)據(jù)綁定原理
-
知識點預熱
#1.單向數(shù)據(jù)傳遞 優(yōu)點：數(shù)據(jù)流動方向可以跟蹤，流動單一瞭郑，追查問題的時候可以更快捷(便于控制) 缺點：繁瑣辜御，不方便。需要多個action控制各個view #2.雙向數(shù)據(jù)綁定 優(yōu)點：model和view雙向綁定屈张，數(shù)據(jù)改變驅動視圖自動更新擒权，操作簡單方便 缺點：數(shù)據(jù)相互依賴相互綁定，數(shù)據(jù)問題的源頭難以被跟蹤到(容易不受控制) 解決方案：Vuex狀態(tài)管理 #3.Vue雙向數(shù)據(jù)綁定的原理(專業(yè)術語：數(shù)據(jù)劫持) Vue內部通過Object.defineProperty方法屬性攔截的方法阁谆，把data對象里每一個數(shù)據(jù)的讀寫轉化為getter/setter,當數(shù)據(jù)變化時通知試圖更新碳抄；
雙向數(shù)據(jù)原理.PNG
Watcher 起到了橋梁的作用連接了Compile 和Observer ，數(shù)據(jù)變化會驅動視圖更新
訂閱者模式：與關注某某大咖一樣场绿，關注了后大咖發(fā)布新的消息就會推送給你剖效，若上圖添加訂閱后數(shù)據(jù)發(fā)生變化就會觸發(fā)Watcher鉤子
Object.defineProperty()
#代碼表述：
let obj = {};
obj.gf_age = 18;
console.log( obj.gf_age );
#文字表述：
Object.defineProperty()方法會直接在一個對象上定義一個新屬性，或者修改一個對象的現(xiàn)有屬性返回這個對象焰盗；
#與代碼交流是不是明白了 QAQ
<!-- 代碼實現(xiàn)Vue雙向數(shù)據(jù)綁定 -->
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#app{
background:goldenrod;
color: #ffffff;
height: 35px;
width: auto;
}
</style>
</head>
<body>
<p id="app"></p>
<input type="text" id="app_value">
</body>
<script type="text/javascript">
window.onload = ()=>{
let obj = {
app_text:null,
app_value:null
};
//注冊obj 屬性
Object.defineProperty(obj,'app_value', {
//getter
get:()=>{
return obj;
},
//setter
set:(val)=>{
document.getElementById("app_value").value = val;
document.getElementById("app").innerText = val;
}
});
//添加監(jiān)聽事件
document.addEventListener('keyup',(e)=>{
//console.log(e)
//console.log(e.target.value)
obj.app_value = e.target.value;
});
}
</script>
</html>
# Object.defineProperty()的屬性操作符
# 1. get:一個給屬性提供getter的方法璧尸，如果沒有getter 則為undefined
# 2. set:一個給屬性提供setter的方法，如果沒有setter則為undefined熬拒，當屬性值修改時
# 觸發(fā)執(zhí)行該方法爷光，該方法將接受唯一參數(shù)，即該屬性新的參數(shù)值
# 3.configurable:當且僅當該屬性的configurable為true時澎粟，該屬性描述符才能夠被改變
# 同時該屬性也能從對應的對象上被刪除蛀序，默認為true
# 4.value:該屬性對應的值，可以是任何有效的js值(數(shù)值活烙，對象徐裸，函數(shù)..)。默認為undefined
# 5.writable:當且僅當該屬性的writable為true時啸盏，value才能被賦值運算符改變重贺。默認為true
# 6.enumerable:當且僅當改屬性的enumerable為true時，該屬性才能夠出現(xiàn)在對象的枚舉屬性中，默認為true
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#app{
background:goldenrod;
color: #ffffff;
height: 35px;
width: auto;
}
</style>
</head>
<body>
<p id="app"></p>
<input type="text" id="app_value">
<fieldset>
<legend> 假如我有一個女朋友 </legend>
<p>她的名字叫 <span id="name"></span></p>
<p>她今年<span id="age"></span></p>
</fieldset>
</body>
<script type="text/javascript">
window.onload = ()=>{
let obj = {
app_text:null,
app_value:null
};
console.log("obj = ", obj);
console.log("開始枚舉：")
for(item in obj){
console.log(item);
}
console.log("刪除屬性：");
delete obj.app_text;
console.log("刪除屬性后枚舉值：")
for(item in obj){
console.log(item);
}
//注冊obj 屬性
Object.defineProperty(obj,'app_value', {
get:()=>{
return obj;
},
set:(val)=>{
document.getElementById("app_value").value = val;
document.getElementById("app").innerText = val;
}
});
//添加監(jiān)聽事件
document.addEventListener('keyup',(e)=>{
//console.log(e)
//console.log(e.target.value)
obj.app_value = e.target.value;
});
//開始騷操作了
let gf ={
gf_age:'18歲'
};
Object.defineProperty(gf,"gf_name",{
value:'Alisa',
enumerable:false,
configurable:true,
writable:true
});
console.log(gf);
//name屬性被注冊到 gf上了 但是不能被枚舉
document.getElementById('name').innerText = gf.gf_name;
document.getElementById('age').innerText = gf.gf_age;
console.log("在控制臺中只會顯示女朋友的年齡檬姥，想不到吧曾我！");
for(info in gf){
console.log(info);
}
}
</script>
</html>
