回顾
- 虚拟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
