vue双向绑定原理

100 阅读1分钟

vue2双向绑定原理:
通过数据劫持+发布者-订阅者模式的方式来实现
1、首先设置一个监听器(Observer),通过object.defineProperty()方法来劫持数据的setter和getter方法
2、利用compile解析器对每个节点元素进行扫描和解析,找到其中动态绑定的数据,从data中获取并初始化视图 同时初始化一个订阅者watcher,并添加更新回调函数
3、当数据变化时,会先找到对应的消息订阅器dep,然后通知watcher去执行更新函数

vue3双向绑定原理优化:
1、使用proxy代理,代理整个对象而不是对象属性,那么就能监听到对象属性的增删改
2、 vue3还用block tree解决新旧节点对比效率问题
vue2在对比新旧数的时候,并不知道哪些节点时静态的,哪些节点时动态的,因此只能一层一层比较,这就浪费了大部分时间在对比静态节点上。
而vue3对节点进行了标记 PatchFlags,在做新旧节点对比的时候,就对比带flag的节点