(面试题)Vue双向绑定原理

107 阅读2分钟

1.通过数据劫持和发布订阅实现的 2.vue通过Obiect.defineProperty对数据进行劫持,监听数据的变化,并通过getter和setter对数据进行读写 3.vue通过发布订阅模式维护了一个订阅者数组,当数据发生变化时,会通知所有订阅者进行更新 (因此页面上修改时,会更新对应的数据,通知订阅者更新视图/当数据发生变化时,Vue也会更新对应的视图) 4.所以实现了数据双向绑定 补充:订阅者是Vue中的一个概念,它是一个用于管理更新视图的对象,当数据发生变化时,Vue会通知所有的订阅者进行更新:组件、每一个watcher都是一个订阅者,它们订阅了某一个数据的变化,并等待数据发生变化时进行更新。订阅者管理着数据和视图之间的关系,保证了数据的变化能及时反映到视图上。 (看不懂)

image.png (2倍速看了一遍技术蛋老师,重新写一下) 1.采用了数据劫持和发布-订阅者模式 2.使用(创建)observe函数进行递归遍历,包括子属性的对象,通过Object.defineProperty()给它们都加上setter和getter(赋值调用setter,调用值用getter) 3.创建compile函数,将模板中的变量替换成数据,初始化渲染页面视图(初始化 调用:? 渲染页面视图),并将每个指令对应的节点绑定更新函数(,添加监听数据的订阅者,一旦数据有变动,收到通知,更新视图) 4.创建dep类,用来dep.addsub()收集存放订阅者信息和dep.notice()通知订阅者,dep.notice()调用时会遍历订阅者的数组,然后让订阅者调用自身updata()方法进行更新 5.创建订阅者Watcher类,创建updata()函数设置回调函数,可以触发Compile(中绑定的回调),更新视图 (第三步:Watcher订阅者是Observer和Compile之间通信的桥梁,主要做的事情是: 1、在自身实例化时往属性订阅器(dep)里面添加自己 2、自身必须有一个update()方法 3、待属性变动dep.notice()通知时,能调用自身的 update() 方法,并触发Compile中绑定的回 调,则功成身退。 第四步:MVVM作为数据绑定的入口,整合Observer、Compile和Watcher三者,通过Observer 来监听自己的model数据变化,通过Compile来解析编译模板指令, 最终利用Watcher搭起Observer和 Compile之间的通信桥梁, 达到数据变化 -> 视图更新; 视图交互变化(input) -> 数据model变更的双向绑定效果。)

image.png