virtual dom

什么是virtual dom

• 虚拟dom
• 用JS模拟DOM结构
• DOM变化的对比，放在JS层来做
• 提高重绘性能

浏览器的DOM操作是很复杂的

浏览器的dom节点是很复杂的

• DOM操作是“昂贵”的，js运行效率高
• 尽量减少DOM操作，而不是“推到重来”
• 项目越复杂，影响就越严重
• vdom即可解决这个问题
• 将DOM对比操作放在JS层，提高效率

diff算法

• DOM操作是“昂贵”的，因此尽量减少DOM操作
• 找出本次DOM必须更新的节点来更新，其他的不更新
• 这个“”找出“的过程，就需要diff算法
• 实现，patch(container,vnode)和patch(vnode,newVnode)
• 核心逻辑，createElement和UpdateChildren

MVVM

jQuery和vue实现to-do-list的区别

• 数据和视图的分离，解耦（开放封闭原则）
• 以数据驱动视图，只关心数据变化，DOM操作被封装（vue只管视图，不管数据）

MVVM

M：模型、数据
V：视图、模板（视图和模型是分离的）
ViewModel：连接Model和View

• view通过事件绑定来操作model
• model通过数据绑定来操作view

ViewModel是一种微创新

响应式

• 修改data属性后，vue立刻监听到
• data属性被代理到vm上

Object.defineProperty

可以被监听

如何解析模板

模板是什么

• 本质：字符串
• 有逻辑，如v-if, v-for等
• 与html格式很像，但有很大区别
• 最终还要转换为html来显示
• 模板最终必须转换成JS代码，因为：
  • 有逻辑（v-if,v-for），必须用JS才能实现（图灵完备）
  • 转换为html渲染页面，必须用JS才能实现
  • 因此，模板最终要转换成一个JS函数（render函数）

render

• render函数执行是返回vode
• updateComponent

vue的整个实现流程

• 第一步：解析模板成render函数
• 第二步：响应式开始监听
• 第三步：首次渲染， 显示页面，且绑定依赖
• 第四步：data属性变化，触发rerender

第一步：解析模板成render函数

对v-model，v-for，v-on:click做了一些处理

以上图来说，设置了title的get，set方法，即双向数据绑定

• with的用法
• 模板中的所有信息都被render函数包含
• 模板中用到的data中的属性，都变成了JS变量
• 模板中的v-model v-for v-on都变成了JS逻辑
• render函数返回vnode

第二步：响应式开始监听

• Object.defineProperty
• 将data的属性代理到vm上

第三步：首次渲染， 显示页面，且绑定依赖

• 初次渲染，执行updateComponent，执行vm._render()
• 执行render函数，会访问到vm.list和vm.title
• 会被响应式的get方法监听到
• 执行updateComponent，会走到vdom的patch方法
• patch将vnode渲染成DOM，初次渲染完成

第四步：data属性变化，触发rerender

• 修改属性，被响应式的set监听到
• set中执行updateComponent
• updateComponent重新执行vm._render()
• 生成的vnode和preVnode，通过patch进行对比