Vue入门（六）
一、虚拟DOM和diff算法（原理）
1.1、虚拟DOM
1.1.1、什么是虚拟DOM
虚拟DOM(virtual DOM)就是虚拟节点，是通过JS的对象模拟DOM中的节点，然后再通过特定的render（渲染）方法将其渲染成真实的DOM节点。
1.1.2、为什么使用虚拟DOM
使用js操作DOM时（增删改查等等），DOM元素的变化会引起页面的回流（重排）或者重绘，页面的DOM重绘自然会导致页面性能下降，为了减少DOM操作，降低系统性能消耗使用虚拟DOM。
1.1.3、js对象模拟真实DOM
- 比如：真实DOM为
<div class="container">
<p id="p1"></p>
<div class="box">
<p id="p2"></p>
</div>
</div>
- js对象模拟真实DOM：
let obj = {
tagName:"div",
class:"container",
children:[
{
tagName:"p",
id:'p1'
},
{
tagName:"div",
class:"box",
children:[
{
tagName:"p",
id:"p2"
}
]
}
]
}
-
render函数生成真实DOM
render函数？就是传入一个json对象，产生一个真实的dom节点，并放在父节点里
function render(obj,parentDom){
let dom = document.createElement(obj.tagName);
for(let key in obj){
if(key!="tagName" && key!="children"){
dom[key] = obj[key];
}
}
if(obj.children){
obj.children.forEach(item => {
render(item,dom);
});
}
parentDom.appendChild(dom);
}
render(obj,document.body);
效果图：
1.1.4、真实DOM和虚拟DOM的区别
（1）虚拟DOM不会进行排版与重绘操作，而真实DOM频繁排版与重绘的效率是非常低；
（2）虚拟DOM进行频繁修改，然后一次性比较（使用diff算法）并修改真实DOM中需要改的部分，只渲染局部，减少过多DOM节点操作。
1.2、diff算法
1.2.1、diff算法是什么
简单理解：通过对比虚拟节点识别出DOM操作，从而一次性修改真实DOM。
1.2.2、diff算法原理
那么，它是怎么实现的呢？
- 步骤总结
1、产生两个虚拟DOM树：newVDom，oldVDom；
2、oldVDom和真实DOM保持一致；
3、操作的是newVDom；
4、操作完毕后，通过diff算法对比newVDom和oldVDom的差异，并在oldVDom标注哪些节点要删除，哪些节点要增加，或是修改；
5、根据oldVDom操作真实的DOM，一次性渲染，减少DOM操作。
这样是不是理解一些了。
来张图，帮助理解：（画的有点丑）
想要更深diff算法详解请戳这儿！
二、vue对象
2.1、Vue类属性和类方法
理解：字面意思，类属性就是方法（属性）属于类本身。使用时，类名.属性名（方法名）
类属性（方法）如Vue.extend()，Vue. mixin()，Vue是个类
又比如String.split()属于类方法
Vue.filter();//类方法
Vue.directive();//类方法
2.2、Vue实例（对象）属性和方法
实例属性（方法）就是方法（属性）属于对象。使用时，实例对象.属性名（方法名）。
let vm = new Vue();
vm.$el;//实例属性
let s = new String("hello");
s.charAt(3)//实例方法
更多api请参考官网
三、生命周期和钩子函数
3.1、生命周期
3.1.1、认识生命周期
世间万物，从生到死，即为一个生命周期。
对象的生命周期是同样的道理，
↓↓↓
对象的定义（new）-------->对象的使用--------->对象的消亡（一个生命周期）
3.1.2、生命周期的核心阶段
1、数据挂载：把传入vue构造函数的data属性的值（数据）挂载到vue对象上；
2、模板渲染：把数据显示在页面上；
3、模板更新（数据更新引起的模板更新）：数据发生变化后，引起的模板更新；
4、销毁阶段；
3.2、钩子函数
-
beforeCreate函数：
此时，vue对象已经创建，但是vue对象的属性还没有绑定，即此时无法访问data属性等。
-
数据挂载
此时，属性的值挂载到vue对象上；
-
Created函数
此时有数据了，但是还没有真实的DOM；
-
beforeMount函数：
此时，vue对象的属性有值了，但是数据还未显示在页面上。
-
模板渲染
把数据显示在页面上
-
Mounted函数：
数据已经显示在页面上
-
beforeUpdate函数：
组件更新之前执行的函数，在数据更新后，才调用beforeUpdate，注意：此数据一定是在模板上出现的数据，
-
updated函数：
组件更新之后执行的函数
-
beforeDestroy：
vue（组件）对象销毁之前
-
destroyed：
vue组件销毁后
3.3、keep-alive
在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性
<div>
<keep-alive>
<component :is="currCom"></component>
</keep-alive>
</div>
补充：
activated函数：//keep-alive组件激活时调用
deactivated函数：//keep-alive组件停用时调用
更详细内容请参考生命周期及钩子函数
写了两个半小时你敢信？还写的这么烂，溜了溜了！