在使用v-for进行列表渲染时,我们通常会给元素或者组件绑定一个key属性
key属性主要用在Vue的虚拟DOM算法,在新旧nodes对比时辨识VNodes
如果不使用key,Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法
而使用key时,它会基于key的变化重新排列元素顺序,并且会移除/销毁key不存在的元素
VNode的全称是Virtual Node,也就是虚拟节点,无论是组件还是元素,它们最终在Vue中表示出来的都是一个个VNode
VNode的本质是一个JavaScript的对象
Vue在解析模板的时候,会将template在内存中解析成一个对应的JS对象,并使用children属性 将多个js对象联系起来,而这个JS对象 就是vNode(虚拟节点)
和真实DOM一样,vnode和vnode之间也会形成对应的树结构,而对应的树结构,而这个树结构就被称之为VDOM,也就是虚拟DOM
本质上,虚拟DOM和真实DOM是一一对应的
使用虚拟DOM的好处
虚拟DOM本质上就是一个JS对象,所以可以将其渲染成任何形式的内容,进而实现vue的跨平台
例如: 在浏览器中,可以将vDOM渲染成真实DOM。在移动设备上,可以将vDOM渲染成对应的原生控件
例如: 在浏览器中,可以将vDOM渲染成真实DOM。在移动设备上,可以将vDOM渲染成对应的原生控件
和浏览器原生DOM对象不一样的是,vDOM是一个轻量级对象,且vDOM可以保存在内存中,进行新旧dom的diff算法
所以使用vDOM进行中间渲染环节,可以有效的减少浏览器的重绘和回流
转自 稀土掘金