1.原理
在这里插入图片描述

  • View的变化能实时让Model发生变化,而Model的变化也能实时更新到View。
  • Vue采用数据劫持&发布-订阅模式的方式,通过ES5提供的Object.defineProperty() 方法来劫持 (监控) 各属性的getter、setter,并在数据(对象)发生变动时通知订阅者,触发相应的监听回调。并且,由于是在不同的数据上触发同步,可以精确的将变更发送给绑定的试图,而不是对所有的数据都执行一次检测。要实现Vue中的双向数据绑定,大 致 可 以 划 分 三 个 模 块:Observer、Compile、Watcher,如图:
    在这里插入图片描述
  • Observer 数据监听器,负责对数据对象的所有属性进行监听(数据劫持),监听到数据发生变化后通知订阅者。
  • Compile 指令解析器,扫描模板,并对指令进行解析,然后绑定指定事件。
  • Watcher 订阅者,关联Observer和Complie,能够订阅并收到属性变动的通知,执行指令绑定的相应操作,更新视图。Updade()是它自身的一个方法,用于执行Compile中绑定的回调,更新视图。

2.版本比较

vue是基于依赖收集的双向绑定;
3.0之前的版本使用 Object。defineProperty,3.0新版本使用Proxy

1) 基于 数据劫持/依赖收集 双向绑定的优点

  • 不需要显示的调用,Vue利用数据劫持+发布订阅,可以直接通知变化并且驱动试图
  • 直接得到精确的变化数据,劫持了属性setter,当属性值改变我们可以精确的获取变化的 newVal,不需要额外的 diff 操作

2)object。defineProperty的缺点

  • 不能监听数组; 因为数组没有getter和setter,因为数组长度不确定。如果太长性能负担太大。
  • 只能监听属性,而不是整个对象;需要遍历属性;
  • 只能监听属性变化,不能监听属性的删减;

3)proxy好处

  • 可以监听数组;
  • 监听整个对象不是属性
  • 13种拦截方法,强的很多;
  • 返回新对象而不是世界修改元对象,更符合immutable;

4)proxy缺点

  • 兼容性不好,且无法用polyfill磨平;
Logo

前往低代码交流专区

更多推荐