25
2020
08

vue的双向绑定原理(vue的原理、简单说一下双向数据绑定)

vue是采用数据劫持结合发布者-订阅者模式的方式,通过object.defineProperty()来劫持各个属性的setter和getter,在数据变动时发布消息给订阅者,触发响应的监听回调


具体步骤:


第一步:需要observe的数据对象进行递归遍历,给各个属性加上setter和getter,从而监听数据的变化


第二步:compile解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面视图,一旦数据变动,就更新视图


第三步:watcher订阅者是observe和complie之间通信的桥梁


第四步:MVVM作为数据绑定的入口,整合observe、compile和watcher三者,通过observe来监听自己的model数据变化,通过compile来解析编译模板指令,最终利用watcher搭起observe和compile之间的桥梁,达到数据变化,视图更新

« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。