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 )
})