Vue渲染/更新过程

一,渲染过程

    1,解析模板为render函数(或在开发环境已完成,vue-loader)

    2,触发响应式,监听data属性getter setter

    3,执行render函数,生成vnode,patch(elem,vnode)

二,更新过程

    1,修改data,触发setter(此前在getter中已被监听)

    2,重新执行render函数,生成newVnode

    3,patch(vnode,newVnode)

三,vue组件是异步渲染

    1,Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发,只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。

渲染和更新流程


Vue完整的渲染过程
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。