Vue.js 源码分析——虚拟 DOM

回顾

  • 虚拟DOM库 - Snabbdom
  • 什么是虚拟DOM
    • 虚拟DOM（Virtual Dom ）是使用JavaScript对象描述真实的DOM
  • Vue.js中的虚拟DOM借鉴Snabbdom，并添加了vue.js的特性
    • 例如：指令和组件机制
  • 为什么要使用虚拟DOM
    • 避免直接操作DOM，提高开发效率
    • 作为一个中间层可以跨平台
    • 虚拟DOM不一定可以提高性能 。首次渲染的时候回增加开销。复杂视图情况下提升渲染性能

一、h函数

  • vm.$createElement(tag,data,children,normalizeChildren)
    • tag：标签名称或者组件对象
    • data：描述tag,可以设置DOM的属性或者标签的属性
    • children：tag中的文本内容或者子节点
  • h()函数的返回结果是VNode
  • VNode的核心
    • tag：也就是调用h()函数时候传入的tag
    • data：也就是调用h()函数时候传入的data
    • children：也就是调用h()函数时候传入的children
    • text：属性
    • elm：记录真实DOM
    • key：复用当前的这个元素
二、整体过程分析
image.png

image.png

image.png

image.png
三、VNode
  • 创建过程核心—— createElement
  • 处理过程—— update（判断是否有prevVnode,如果没有就是首次渲染调用patch方法传入vm.$el,如果有prevVNode，说明是数据更新的时候，调用patch方法传入oldvnode,和newVnode）
四、patch 函数

-Snabbdom 中的VNode


image.png

-Snabbdom中的patch


image.png

  • Vue.js 中patch的初始化
    src/platforms/web/runtime/index.js


    image.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容