Vue双向数据绑定原理
-
知识点预热
#1.单向数据传递 优点：数据流动方向可以跟踪，流动单一，追查问题的时候可以更快捷(便于控制) 缺点：繁琐，不方便。需要多个action控制各个view #2.双向数据绑定 优点：model和view双向绑定，数据改变驱动视图自动更新，操作简单方便 缺点：数据相互依赖相互绑定，数据问题的源头难以被跟踪到(容易不受控制) 解决方案：Vuex状态管理 #3.Vue双向数据绑定的原理(专业术语：数据劫持) Vue内部通过Object.defineProperty方法属性拦截的方法，把data对象里每一个数据的读写转化为getter/setter,当数据变化时通知试图更新；
双向数据原理.PNG
Watcher 起到了桥梁的作用连接了Compile 和Observer ，数据变化会驱动视图更新
订阅者模式：与关注某某大咖一样，关注了后大咖发布新的消息就会推送给你，若上图添加订阅后数据发生变化就会触发Watcher钩子
Object.defineProperty()
#代码表述：
let obj = {};
obj.gf_age = 18;
console.log( obj.gf_age );
#文字表述：
Object.defineProperty()方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性返回这个对象；
#与代码交流是不是明白了 QAQ
<!-- 代码实现Vue双向数据绑定 -->
<!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;
}
});
//添加监听事件
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，当属性值修改时
# 触发执行该方法，该方法将接受唯一参数，即该属性新的参数值
# 3.configurable:当且仅当该属性的configurable为true时，该属性描述符才能够被改变
# 同时该属性也能从对应的对象上被删除，默认为true
# 4.value:该属性对应的值，可以是任何有效的js值(数值，对象，函数..)。默认为undefined
# 5.writable:当且仅当该属性的writable为true时，value才能被赋值运算符改变。默认为true
# 6.enumerable:当且仅当改属性的enumerable为true时，该属性才能够出现在对象的枚举属性中，默认为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;
}
});
//添加监听事件
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>
