响应式原理
Vue实例在初始化时,将
data初始化为一个Observer,并通过Object.defineproperty来重写对象中每个值的getter,setter。同时每个属性都会设置一个Dep(消息订阅器),他内部维护了一个数组,用来记录所有Watcher(订阅者)。
然后Vue通过Compile(解析器)编译模板,将模板中的变量替换成对应的数据并渲染页面视图。此时Watcher会将自己添加到Dep中,到这里一个Vue实例的初始化完毕。
当属性值发生改变时,触发setter函数,setter会调用Dep.notify()通知每一个订阅该属性的Watcher,Watcher会调用自身的update()函数对视图进行更新。这样一来双向绑定就实现了
$nextTick
作用是在更新数据后,使用该方法可在其回调函数中获取到更新后的dom
vue在更新DOM的时候是异步操作的,监听到数据变化,不会立即去更新,而是会开启一个队列,如果一个watcher被多次触发,最终只会推入一次,所以并不能及时的获取到最新的dom机构,此时可以使用这个方法
原理可以总结为 利用eventloop事件线程去异步操作。
vue用异步队列的方式来控制DOM更新和nextTick回调先后执行
microtask因为其高优先级特性,能确保队列中的微任务在一次事件循环前被执行完毕
因为兼容性问题,vue不得不做了microtask向macrotask的降级方案