一>.Intro
1)DOM
文档对象模型（DOM）是一个网络文档的编程接口。它代表页面，以便程序可以改变文档的结构、风格和内容。DOM 将文档表示为节点和对象；这样，编程语言就可以与页面交互。
HTML映射到一系列DOM节点，然后我们就可以使用js操作进行DOM交互
比如，我要更改某个DOM中某个节点的内容，
那么在背后发生了什么
- 检索元素
- 更新节点
- 更新浏览器
一个网页可以由很多节点组成，这就意味着DOM数可以有数千个节点
搜索和更新数千个节点可能会导致很慢，这就是vue和其他框架有一种叫做虚拟Dom的东西
虚拟节点
A way of representing the actual DOM with js object
例如：
Vue知道如何使用该虚拟dom节点，并挂载到dom上，更新在浏览器中看到的内容
vue基于我们的模板创建一个渲染函数，返回一个虚拟dom节点，如下图：
当组件更改的时候，render函数将重新运行，他将创建另一个虚拟节点，然后发送旧的vnode 和新的vnode到vue中的补丁函数中进行比较，并以最高效的方式在我们的网页上进行更新，如下图
我们可以将虚拟dom和真实dom比较为蓝图和建筑的关系
假设我想更改一下29楼的布局，有两种解决办法，
- 拆除29楼，重建
- 画一个蓝图，比较新旧布局，把不一样的拆除然后重建
vue有三个核心模块
- 响应模块(Reactive Module)
- 编译器模块(Compiler Module)
- 渲染模块(Render Module)
1）响应模块
允许我们创建js响应对象，并可以观察其变化。**当使用这些对象的代码运行时，他们会被跟踪，**如果响应对象发生变化，他们可以在以后运行
2）编译模块
知道如何获取HTML模板，并将他们编译成渲染函数，这可能在浏览器中运行时存在，但更多的是在构建vue项目中存在，这样浏览器就只接收渲染函数
3）渲染模块的代码包含在网页上渲染组件的三个不同阶段
- 渲染阶段 （Render Phase) ,调用render函数，返回虚拟dom节点
- 挂载阶段 (Mount Phase) 使用虚拟dom节点，并调用dom API 创建网页
- 补丁阶段(Patch Phase) 将新旧dom节点进行比较并更新网页部分的变化
现在，我们实操一下：
- 现在有一个组件，他已经被显示在了浏览器上，在这背后发生了什么
- 模板编译器将HTML编译成渲染函数
- 初始化响应对象，使用响应模块
- 在渲染函数中，我们进入渲染阶段
- 调用render函数，他引用了响应对象，我们现在观察响应对象的变化，render函数将返回虚拟dom节点
- 在挂载阶段，调用mount函数，使用虚拟节点创建web页面
- 如果响应对象发生任何变化，因为她正在被监视，所以渲染器会再次调用render函数，创建新的dom节点，新旧节点发送到补丁函数中，然后根据需要更新节点
