九.动态生成元素的获取方法

动态生成元素的获取

当数据改变（改变数据时同步） 视图刷新（更新dom，异步 中间要通知观察者，调用render生成虚拟dom，比较两个虚拟dom用diff算法，在更新）
所有 我们无法 立即获取，数据改变后生成最新的dom
vue 提供了一个watcher(观察每一次的dom更新，更新完成后，回调触发，在回调中获取最新的dom)
this.$nextTick(()=>{
  <!-- 在这里获取最新的dom -->
})

Vue.nextTick(()=>{
  <!-- 在这里获取最新的dom -->
})

例：
	<div id="app">
        <button @click="add">按钮</button>
        <ul ref="ul">
            <li v-for="(el,index) in arr" :key=index>{{el}}</li>
        </ul>
        
    </div>
    
    <script type="text/javascript">
    //注意:数据改变是同步操作，数据刷新获取dom树比较是异步操作，所以在获取时获取不到。
    const vm = new Vue({
        el:"#app",
        data:{
            arr:[1,2,3,4]
        }
        ,methods:{
            add(){
                //此时新增加了一条，想获取最新li
                this.arr.push(this.arr.length+1);
                //导致新增的不是最后一个
                // this.$refs.ul.lastChild.style.backgroundColor="blue"
                //解决办法:增加后调用回调
                this.$nextTick(()=>{
                    this.$refs.ul.lastChild.style.backgroundColor="blue"
                })
            }
        }
    })
</script>