虚拟dom本质上就是一个JS对象
真实的DOM有一堆的属性和方法,操作起来会导致性能很慢,而且每操作一次就会导致一次重绘和回流,虚拟DOM等数据全都更新完之后,只更新了真实DOM需要改变的地方,而且只会有一次重绘和回流
初次渲染页面的时,会根据数据创建一个虚拟DOM对象,根据虚拟DOM生成真正的DOM,渲染到页面上
数据变化后,会根据新的数据,再创建新的虚拟DOM
利用diff算法对两份虚拟dom进行对比
diff算法
diff算法可以看作是一种对比算法,diff算法可以找到新旧虚拟Dom之间的差异,并根据对比后的结果更新真实Dom。
用js对象结构(虚拟DOM)表示 DOM 树的结构;然后用这个树构建一个真正的 DOM 树,插到文档当中,当状态变更的时候,重新构造一棵新的对象树。然后用新的树和旧的树进行比较,记录两棵树差异,把所记录的差异应用到所构建的真正的DOM树上,视图就更新了
添加key唯一标识后Diff算法就可以正确的识别此节点,找到正确的位置区插入新的节点。
唯一标识,为了高效的更新虚拟DOM
transition过渡时,使用key属性,可以区分它们是否变化,否则vue只会替换其内部属性而不会触发过渡效果
第一种情况:元素(标签)变了,删除元素,重建新元素
第二种情况:元素没变,属性或内容变了,只更新属性或内容
第三种情况:使用v-for遍历的时候,有两种情况
$nextTick
简单的理解是:当数据更新了,在dom中渲染后,自动执行该函数,
当修改了数据,因为dom是异步的,所以如果在修改的数据下面重新操作dom会出问题,需要保证dom更新完成才能操作,用nextTick可以在dom渲染后,立即执行该函数。