本文介绍了Vue数据绑定的原理,分享给大家,具体如下:
<强>原理
其实原理很简单,就是拦截了对象的获?设置方法,在对数据进行设置(obj.aget=18)时去重现渲染视图
<>强实现方式有两种
<强>方式1
定义了同名的获?设置就相当于定义了年龄
var={测试
_age: 18,
年龄(){
console.log(“触发得到');//直接会this.age会进入死递归的
返回this._age;
},
设置年龄(岁){
console.log(“触发组”);
这一点。_age=年龄;
}
};
之前
为了让测试不显示多余的变量,可以把_age定义在外部
var _age=18;
var={测试
年龄(){
console.log(“触发得到');//直接会this.age会进入死递归的
返回_age;
},
设置年龄(岁){
console.log(“触发组”);
_age=年龄;
}
};
之前
<强>方式2
使用这种方式完美的解决了对象内包含多余的变量的问题
功能测试(){
var _age=18;
Object.defineProperty(“年龄”,{
得到:函数(){
console.log(“触发得到');
返回_age;
},
设置:函数(值){
console.log(“触发组”)
_age=价值;
}
});
}
var t=新的测试();
t.age=18;
之前
<>强实现数据到视图的绑定
这里的渲染只是一个简单的正则替换
要实现Vue那么强大的功能还要自己实现一个模板引擎
& lt; div id=安馐浴北?
& lt; p>名称:& lt;/p>
& lt; p>年龄:& lt;/p>
& lt;/div>
函数元素(id、initData) {
var自我=;
var el=. getelementbyid (id);
var模板=el.innerHTML;
var _data=https://www.yisu.com/zixun/null;
如果(initData) {
_data={};
(var变量initData) {
_data(变量)=initData(变量);
绑定(变量,自我);
}
}
函数绑定(变量,obj) {
Object.defineProperty(自我,变量,{
设置:函数(值){//使用_data里的数据,避免死递归
_data(变量)=价值;//每次被设置新值的时候重新渲染界面
呈现();
},
得到:函数(){
返回_data(变量);
},
});
}//渲染
函数呈现(){
var temp=模板;
temp=temp.replace (//{(. *)/}/{}/g函数(s, t) {
如果(_data [t]) {
返回_data [t];
}
});
埃尔。innerHTML=temp;
}//初始化时候手动渲染一次
呈现();
}
应用var=新元素(“测试”,{
名称:“zhangsan”,
年龄:18
})
之前
<>强实现视图到数据的绑定
这里做一个简单的输入改变的事件监听
每次渲染之后都要重新添加事件,用时间委托可以实现,但输入的焦点是位置不能保留
可见Vue内部的渲染和事件绑定肯定不是像这演示里写的那么简单,这里只是大致的原理(可能并不是这样的……)
& lt; div id=安馐浴北?
& lt;输入类型="文本" value="比;
& lt; br>
& lt; span> & lt;/span>
& lt;/div>
函数元素(id、initData) {
var自我=;
var el=. getelementbyid (id);
var模板=el.innerHTML;
var输入=el.getElementsByTagName(“输入”)[0];
var _data=https://www.yisu.com/zixun/initData;
Object.defineProperty(自我,“数据”,{
设置:函数(值){
_data=https://www.yisu.com/zixun/value;
呈现();
},
得到:函数(){
返回_data;
},
});//渲染
函数呈现(){
var temp=模板;
temp=temp.replace(/{/{(数据)/}}/g函数(s, t) {
返回_data;
});
埃尔。innerHTML=temp;//重新添加事件,其实应该用事件委托的
输入=el.getElementsByTagName(“输入”)[0];
inputchange ();
input.focus ();
}
函数inputchange () {
如果(window.attachEvent) {
输入。attachEvent (“oninput”,临时);
}else if (window.addEventListener) {
输入。addEventListener(“输入”,临时假);
}
函数临时(){
自我。数据=https://www.yisu.com/zixun/input.value;
}
}//初始化时候手动渲染一次
呈现();
}
应用var=新元素(‘测试’,”);
