vue双向数据绑定原理,vue数据绑定的方法
这篇文章主要介绍了某视频剪辑软件数据绑定的原理，帮助大家更好的理解和使用某视频剪辑软件框架，感兴趣的朋友可以了解下
原理
其实原理很简单，就是拦截了目标的获取/设置方法，在对数据进行集合(年龄=18岁)时去重现渲染视图
实现方式有两种
方式一
定义了同名的获取/设置就相当于定义了年龄
风险值测试={
_年龄：18岁，
获取年龄(){
console.log(触发get’)；
//直接会这个时代会进入死递归的
归还这个。_年龄；
},
设置年龄（年龄){
console.log(触发set’)；
这个.年龄=年龄；
}
};
为了让试验不显示多余的变量，可以把_年龄定义在外部
var _ age=18
风险值测试={
获取年龄(){
console.log(触发get’)；
//直接会这个时代会进入死递归的
返回_年龄
},
设置年龄（年龄){
console.log(触发set’)；
_年龄=年龄；
}
};
方式2
使用这种方式完美的解决了对象内包含多余的变量的问题
功能测试(){
var _ age=18
Object.defineProperty(this， age ，{
get: function () {
console.log(触发get’)；
返回_年龄
},
集合：函数（值){
console.log(触发设置)
_年龄=值；
}
});
}
var t=new test()；
年龄=18岁
实现数据到视图的绑定
这里的渲染只是一个简单的正则替换
要实现某视频剪辑软件那么强大的功能还要自己实现一个模板引擎
div id=test
pname:/p
第页：/p
/div
函数元素(id，initData) {
var self=this
var El=文档。getelementbyid(id)；
var templet=el.innerHTML
var _ data=null
if (initData) {
_ data={ }；
for(initData中的定义变量变量){
_ data[变量]=初始数据[变量];
绑定(变量，自我)；
}
}
函数绑定（变量，对象){
Object.defineProperty(自身，变量，{
集合：函数（值){
//使用_数据里的数据，避免死递归
_ data[变量]=值；
//每次被设置新值的时候重新渲染界面
render()；
},
get: function () {
return _ data[变量];
},
});
}
//渲染
函数render() {
var temp=模板
temp=temp.replace(/\{\{(.*)\}\}/g，函数{
if (_data[t]) {
return _ data[t]；
}
});
el.innerHTML=temp
}
//初始化时候手动渲染一次
render()；
}
var应用=新元素(测试,{
姓名：张三，
年龄：18岁
})
实现视图到数据的绑定
这里做一个简单的投入改变的事件监听
每次渲染之后都要重新添加事件，用时间委托可以实现，但是投入的集中位置不能保留
可见某视频剪辑软件内部的渲染和事件绑定肯定不是像这里演示写的那么简单，这里只是大致的原理（可能并不是这样的。)
div id=test
输入类型=文本值=
英国铁路公司
span/span
/div
函数元素(id，initData) {
var self=this
var El=文档。getelementbyid(id)；
var templet=el.innerHTML
var输入=El。getelementsbytagname( input )[0]；
var _ data=initData
Object.defineProperty(self， data ，{
集合：函数（值){
_ data=值
render()；
},
get: function () {
返回数据
},
});
//渲染
函数render() {
var temp=模板
temp=温度。replace(/\ { \ {(data)\ } \ }/g，function (s，t) {
返回数据
});
el.innerHTML=temp
//重新添加事件，其实应该用事件委托的
输入=El。getelementsbytagname(" input ")[0]；
输入变化()；
输入。焦点()；
}
函数inputchange() {
if (window.attachEvent) {
input.attachEvent(oninput ，temp)；
} else if(窗口。添加事件侦听器){
input.addEventListener(input ，temp，false)；
}
函数温度(){
自我。数据=输入。价值；
}
}
//初始化时候手动渲染一次
render()；
}
var应用=新元素(测试， )；
以上是Vue数据绑定原理分析的详细内容。更多关于Vue数据绑定的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。