vue响应更新机制和简单的无框架数据双向绑定

最近看到有人说vue是双向数据绑定，也有人说vue是单向数据流。我认为这两种说法是错误的。vue是一个具有响应更新机制的框架，可以实现单向数据流和双向数据绑定。

2单向数据流和双向数据绑定

单向数据流是指当模型中的数据发生变化时，视图的变化。

双向数据绑定是指模型中的数据发生变化时视图的变化，视图的变化也会引起模型的变化。

//这是一个单向数据流。更改此输入的值不能更改数据中的文本属性。输入类型=' text' :值=' text ' data : { return { text : ' text input box ' }//这是双向数据绑定，无论是修改模型还是视图都会导致对方改变。输入类型=' text ' v-model=' text ' data : { return { text : ' text输入框' }}3 vue中数据双向绑定的实现原理

Vue为我们提供了两种语法糖来实现数据双向绑定，即v-model和。同步修改器。v-model用于为表单元素、和提供数据双向绑定。sync修饰符用于为任意属性提供数据双向绑定。接下来，我们尝试在不使用vue提供的语法糖的情况下，自行实现数据双向绑定。

如果要在视图更改时更改模型，则必须先聆听视图的更改，然后在视图更改时更改模型。以下是思考后的代码实现。

//首先，通过输入事件监控视图的变化。当输入类型=' text ' : value=' input title ' @ input=' on input ' data : { return { text : ' text input box ' } }时，methods:{ //当视图发生变化时，将视图的值赋予模型的值，实现数据对输入(事件)的双向绑定{this。text=事件。目标。价值；}4 vue中单向数据流的实现原理

vue的单向数据流涉及到Object.defineProperty()的API。

对象。定义属性用法：

//object . definepreproperty用于数据劫持，可以监控一个变量的读写，发生读写时执行回调函数object . definepreproperty(obj，prop，desc)；//obj是要定义的对象，prop是要定义的属性的名称，desc是属性的描述符

示例：

//定义一个对象，监听其文本属性的存储和值操作。让数据={ }；Object.defineproperty(数据，“text”，{ get(){ console . log(' value operation '))；}，set(newVal) {console.log('存储值操作')；}});console . log(' data ')；===输出：==={}===值运算数据. text='文本输入框'；===output===使用API Object.defineProperty()进行的存储值操作，可以监控模型中的数据变化，并在数据发生变化时修改视图，达到单向数据流的效果。

5.实现简单的双向数据绑定

下面实现一个简单的数据双向绑定，目标是修改视图可以使模型中的变量发生变化，修改模型可以使视图发生变化。

//htmldiv id='app '输入类型=' text ' id=' input '/div//jslet input=document . queryselector(' # input ')；//定义modellet数据={ text : ' ' }；//监控模型中文本的变化，首先是当单向数据流对象。定义属性(数据，文本，{get () {}，//文本更改，修改输入元素集的值值(newVal){ input . value=newVal；}});//监控输入元素的变化，修改模型的值，实现双向数据绑定输入。addEventListener ('input '，event={ data . text=event . target . value；});此时，实现了简单的数据双向绑定。您可以在控制台中修改data.text的值以查看视图是否更改，并修改input元素的值以打印数据。在控制台中修改text以查看模型是否更改。

摘要

以上是边肖引入的vue响应更新机制，以及不使用框架的简单数据双向绑定。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！