2020年10月7号渲染更新(vue)


页面更新少不了diff,会对比新旧节点来进行更新,当两个节点不一样的时候,不难理解,直接创建新节点,删除旧节点

在for循环中会使用到key,并且不要使用index,用唯一值id做key,当使用v-for遍历数组时,如果没有指定key,则当数组元素顺序发生变更时,dom绑定的数据会更新,而dom本身的顺序不会变化;如果指定了key,则当数组元素顺序发生变更时,dom会和数据同步更新

我在项目中遇到父组件传值给子组件,通过props接收,我使用watch监听了这个属性,的确发生了变化,但是页面就是不更新,也不是什么对象,不需要使用$set,最后在对应元素上添加了key,就解决了

image-20201007170311389

image-20201007170236836

vue.js的虚拟DOM算法,在更新vNode时,需要从旧vNode列表中查找与新vNode节点相同的vNode进行更新,如果这个过程设置了属性key,过程就会快很多,但是还不清楚为什么有的需要添加key,难道是因为我的这个更新过于频繁?


Author: wxy
Reprint policy: All articles in this blog are used except for special statements CC BY 4.0 reprint policy. If reproduced, please indicate source wxy !
  TOC