分类
默认

Vue 组件是异步渲染的

异步渲染

  • 回顾 $nextTick
  • 汇总 data 的修改,一次性更新视图
  • 减少 DOM 操作次数,提高性能
// 1. 异步渲染,$nextTick 待 DOM 渲染完再回调
// 2. 页面渲染时会将 data 的修改做整合,多次 data 修改只会渲染一次
this.$nextTick(() => {
  // 获取 DOM 元素
  const ulElem = this.$refs.ul1
  // eslint-disable-next-line
  console.log( ulElem.childNodes.length )
})