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