首页天道酬勤vue实现双向绑定原理,nodejs跟vue的关系

vue实现双向绑定原理,nodejs跟vue的关系

张世龙 05-04 02:15 68次浏览

双向数据绑定机制:

公式: vue采用数据劫持与发布者-订阅模型相结合的方式,在Object.defineProperty )中劫持每个属性的setter、getter,并在数据发生更改时订阅者

第一步:

需要观察器的数据对象是递归遍历的,并将setter和getter添加到其中,包括子属性对象的属性。 这样,给该对象的某个值赋值后,setter就会启动,从而可以监听数据的变化

第二步:

compile分析模板指令,并将模板中的变量替换为数据。 然后初始化“渲染页面”视图,将更新函数绑定到每个指令对应的节点,添加接收数据的订阅者,并在数据更改时收到通知并更新视图

第三步:

Watcher订阅名称是observer和Compile之间的通信桥梁,主要执行以下操作:

1 .实例化自身时,将自身添加到属性寄存器(dep )中

2 .自己需要update (方法

3 .在等待属性更改dep.notice ()通知时,如果可以调用自己的update ) )方法并触发Compile决定的回调,则成功退出

步骤:

MVM作为数据绑定的入口,将observer、Compile、Watcher三者相结合,通过observer拦截自己的model数据的变化,通过Compile解析编译模板指令,最终

自己理解:

1个别绑定过程(自己总结的)变量发生了变化,set向watcher发送通知。 watcher告知虚拟DOM树应该进行比较。 我对此的值发生了变化,所以生成新的DOM树进行比较,分阶段分类进行比较,比较哪个要素发生了变化后将该要素更新到页面上,这是个别数据绑定的原理。

2. v-model的原理是,实际上在将oninput事件绑定到input事件时,会立即调用与基础对象对应的setter方法来更改data中的属性值,从而导致双向数据绑定

vue双向绑定原理,vue中实现数据双向绑定的是