Vue入门（六）之虚拟DOM

一、虚拟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、钩子函数

1. beforeCreate函数：

   此时，vue对象已经创建，但是vue对象的属性还没有绑定，即此时无法访问data属性等。

2. 数据挂载

   此时，属性的值挂载到vue对象上；

3. Created函数

   此时有数据了，但是还没有真实的DOM；

4. beforeMount函数：

   此时，vue对象的属性有值了，但是数据还未显示在页面上。

5. 模板渲染

   把数据显示在页面上

6. Mounted函数：

   数据已经显示在页面上

7. beforeUpdate函数：

   组件更新之前执行的函数，在数据更新后，才调用beforeUpdate，注意：此数据一定是在模板上出现的数据，

8. updated函数：

   组件更新之后执行的函数

9. beforeDestroy：

   vue（组件）对象销毁之前

10. destroyed：

    vue组件销毁后

3.3、keep-alive

在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性

<div>
   <keep-alive>
        <component :is="currCom"></component>
    </keep-alive>
</div>

补充：

activated函数：//keep-alive组件激活时调用

deactivated函数：//keep-alive组件停用时调用

更详细内容请参考生命周期及钩子函数

写了两个半小时你敢信？还写的这么烂，溜了溜了！