vue 高级特性 $nextTick

 vue 是异步渲染 ,组件更新之后 如果要立即获取最新的dom 使用this.$nextTick()

页面渲染时，会将data修改做整合！！，多次修改data只会渲染一次

<template><div class="header"><!-- rights组件 --><p>组件更新之后 如果要立即获取最新的dom 使用this.$nextTick</p><ul ref='ul'><li v-for="(item,index) in list" :key="index">{
   {item}}</li></ul><button @click="addDom">添加dom</button></div>
</template><script type="text/ecmascript-6">
export default {data() {return {list:['aaa','bbb']}},methods: {addDom() {this.list.push(Date.now())this.list.push(Date.now())// 这样是获取不到最新dom的// let ul = this.$refs.ul// console.log(`ul 长度为 ${ul.children.length}`)// 这样可以，因为vue是异步渲染，$nextTick会等dom 渲染完之后才会执行回调this.$nextTick(()=>{let ul = this.$refs.ulconsole.log(`ul 长度为 ${ul.children.length}`)})// 这样就可以解释为什么是1 会先输出console.log(1); },},
}
</script>