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组件停用时调用
更详细内容请参考生命周期及钩子函数
写了两个半小时你敢信?还写的这么烂,溜了溜了!