Vue中的双向绑定原理
据说Vue2.0中的双向绑定原理是采用数据劫持和订阅-观察者模式的结合而实现的。其中view发生变化通过底层input事件通知到data层;从model到view涉及到一个方法–>Object.defineProperty()
Object.defineProperty用法
Object.defineProperty(obj,key,des);
该方法用于为对象新增/修改属性并返回该对象。其中obj
为添加/修改属性的对象,key
为属性名称(新增的或已有的),des
为属性描述符。属性描述符des就是描述key的特性,分成两类 :
- 数据描述符:含有value(属性的值),writable(默认为false不能被重新赋值,当其为true时,属性才能被改变)两种键值;
- 存取描述符:含有set(当属性被改变时调用此方法),get(当属性被读取时被调用的方法),若configurable为false,那么该属性不能被修改。
此外desc属性描述符有公共的键值:
- configurable :可配置性定义对象的属性是否可被删除,默认为false,当属性不可配置时不能在数据和访问器属性类型之间进行切换,为true时才能被删除;
- enumerable:可枚举性定义对象的属性是否可以在
for...in
和Object.keys(..)
中被枚举,默认为false,为true时才能成为对象的枚举属性。若直接对对象属性进行定义或赋值,则enumerable为true。
通过定义属性使用get,set就可以通知到订阅者,以下是简单的双向绑定实现:
mVue.js
function mVue(obj){
let {myEl,myData}={...obj};
this.myEl=document.querySelector(myEl);
this.myData={...myData};
let tempData=this.myEl;
Object.keys(myData).forEach(key=>{
Object.defineProperty(this.myData,key,{
configurable:true,
enumerable:true,
set:function(val){
noticeView(tempData,val);
},
get:function(newVal){
return newVal;
}
})
});
addEventListen(this.myEl,this.myData);
}
function addEventListen(el,data){
let inputElement=el.querySelector('input');
inputElement.addEventListener('input',function(e){
for(pro in data){
data[pro]=e.target.value;
}
});
}
function noticeView(el,val){
let spanElement=el.querySelector('span');
spanElement.innerText=val;
}
test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
label{
color:#bfbfbf;
}
span{
background: #265b9c;
color: #dce1e4;
}
</style>
<body>
<div id="container">
<h5>Vue双向绑定实现:</h5>
<input type="text"/>
<hr/>
<br/>
<label>></label>
<span></span>
</div>
<script src="js/mVue.js"></script>
<script>
const myVue=new mVue({
myEl:'#container',
myData:{
message:'Hello World!'
}
})
</script>
</body>
</html>
效果如下:
结尾
外面手写的双向绑定例子有点看不懂,总之原理大概知道了。还有一点,在实际运用中,Vue是不能检测到对象属性的添加/删除,有时碰到比较复杂的自定义组件,在数据绑定上有时数据已更新但视图不更新的情况,这时不妨试用一下Vue.$set(obj,value)或Vue.$set(arr,index,value)。
后记
有文章解释Vue3.0的响应式不再依赖Object.defineProperty而是使用Proxy对象
Proxy
顾名思义Proxy是代理,是ES6中的新特性,用于包装其第一个参数target对象,而定义代理行为的是第二参数handler对象( 可为空对象{ } ).
let handler={
get:function(target,name){
return name in target?target[name]:66;
},
set:function(target,prop,value){
if(prop=='age'){
if(!Number.isInteger(value)){
throw new Error("The age is not an integer");
}
if(value>200){
throw new Error("The age seems invalid.");
}
target[prop]=value;
}
}
};
let target={};
let proxyObj=new Proxy(target,handler);
target.age="age";// 抛出异常: Uncaught TypeError: The age is not an integer
target.age=290;// 抛出异常: Uncaught TypeError: The age seems invalid.
target.age=10;
console.log(target.age);//10
Proxy代理可以帮子类实现继承,创建特定属性对象,拓展一个对象等,但是并不兼容IE浏览器,