最近看到有些人说vue是双向数据绑定的,有些人说vue是单向数据流的,我认为这两种说法都是错误的,vue是一款具有响应式更新机制的框架,既可以实现单向数据流也可以实现数据的双向绑定。
单向数据流是指模型中的数据发生改变时引起视图的改变。
双向数据绑定是指模型中的数据发生改变时视图的改变,视图的改变也会引起模型的改变。
//这个是单向数据流,改变这个输入的值值并不能是中数据的文本属性发生改变。
& lt;输入类型=拔谋尽?value=" https://www.yisu.com/zixun/text "比;
数据:{
返回{
文本:“文本输入框”
}
}//这个是双向数据绑定,无论是修改模型还是修改视图都能引起另一方的改变。
& lt;输入类型=拔谋尽眝模型=拔谋尽北?
数据:{
返回{
文本:“文本输入框”
}
}
vue给我们提供了实现数据双向绑定的两种语法糖,分别v模型和.sync修饰符,v模型用于为表单元素提供数据双向绑定,.sync修饰符用于为任意属性提供数据双向绑定,接下来我们来尝试不使用vue提供的语法糖,自己实现数据双向绑定。
要想查看发生改变的时候引起模型的改变首先要监听到视图的改变,看来发生改变时再去改变模型,有了思路之后下面是代码实现。
//首先通过输入事件监听视图的改变
& lt;输入类型=拔谋尽?value=" https://www.yisu.com/zixun/inputTitle " @input=皁nInput”比;
数据:{
返回{
文本:“文本输入框”
}
},
方法:{//视图发生改变的时候,将视图的值赋予模型的值,实现数据双向绑定>//定义一个对象并监听他的文本属性的存值操作与取值操作
让数据=https://www.yisu.com/zixun/{};
Object.defineProperty(数据、“文本”{
get () {
console.log(“取值操作的);
},
集(newVal) {
console.log(“存值操作的);
}
});
console.log(的数据);===祝辞输出:===在{}===祝辞取值操作
data.text='文本输入框';===祝辞输出===祝辞存值操作
有了<代码> Object.defineProperty() 这个API就可以监听模型中数据的改变并在数据改变的时候修改视图达到单向数据流的效果。
下面实现一个简易的数据双向绑定,目标是在修改视图可以使模型中的变量发生改变,修改模型可以使视图发生改变。
//html
& lt; div id=坝τ谩北?
& lt;输入类型="文本" id=笆淙搿北?
& lt;/div>//js
让输入=document.querySelector(“#输入”);//定义模型
让数据=https://www.yisu.com/zixun/{
文字:“
};//监听模型中文字的变化,首先实现数据单向流
Object.defineProperty(数据、文本、{
get () {
},//文本发生改变的时候,修改输入元素值的值
集(newVal) {
input.value=https://www.yisu.com/zixun/newVal;
}
});//监听输入元素的改变并修改模型的值,实现数据双向绑定
input.addEventLisener(“输入”,事件=比;{
data.text=event.target.value;
});
至此就实现了简易的数据双向绑定,可以在控制台中修改data.text的值来查看视图是否发生改变,修改输入元素的值在控制台中打印data.text查看模型是否发生改变。
以上所述是小编给大家介绍的vue响应式更新机制及不使用框架实现简单的数据双向绑定问题,希望对大家有所帮助,如果大家有任何疑问请给我留的言,小编会及时回复大家的。在此也非常感谢大家对网站的支持。
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
