Vue笔记（四）：LifeCycle & Virtual DOM

生命周期

Hook	Description
beforeCreated	实例初始化，$el 与 data 都未初始化
created	实例创建完成，data 配置完成但挂载还未开始 $el 仍未初始化
beforeMount	挂载开始前，render 函数被调用，$el 和 data 配置完成，但数据未在 DOM 上渲染
mounted	挂载完成，el 被新创建的 vm.$el 替换并挂载到实例上去，数据在 DOM 上渲染完毕
beforeUpdate	数据更新时调用，但不进行 DOM 重新渲染
updated	数据更新并且 DOM 重新渲染，此时可执行依赖于 DOM 的操作
beforeDertroy	实例销毁前
destroyed	实例销毁后

Vue 生命周期图示

虚拟DOM

MVVM 框架可以很好地降低我们维护状态—视图的复杂程度。但当页面变得十分复杂时，视图的更新也可能会引发大量的 DOM 操作，产生一定的性能问题。因此有了 Virtual DOM 的概念，它是一种基于 JavaScript 实现的虚拟 DOM 技术。

DOM 树结构及节点属性信息我们可以很容易地用 JavaScript 对象表示出来：

var element = {
  tagName: 'ul', // 标签名
  props: { // 节点属性
    class: 'list'
  },
  children: [ // 子节点
    { tagName: 'li', props: { class: 'item' }, children: ['one'] },
    { tagName: 'li', props: { class: 'item' }, children: ['two'] },
    { tagName: 'li', props: { class: 'item' }, children: ['three'] }
  ]
}

以上 js 对象对应如下 HTML 结构：

<ul class="list">
  <li class="item">one</li>
  <li class="item">two</li>
  <li class="item">three</li>
</ul> 

如此一来，便可以利用虚拟 DOM 技术来减少一些不必要的 DOM 操作提升性能。

1. 通过 js 对象表示的树结构来构建一个真正的 DOM 树，插入文档中。
2. 状态变更时，构造一个新的对象树，比较两个对象树的差异并记录。
3. 将记录下的差异应用到真正的 DOM 树，实现视图更新。