从父子组件的mounted钩子的同步执行与页面的异步渲染看nextTick的用法

最近复习vue的时候遇到了一个很奇怪的问题，我们直接从实例中看：

<div id="app">
    <child ref="child"></child>
</div>
<template id="child">
    <ul>
        <li v-for='a in arr'>{{a}}</li>
    </ul>
</template>
<script src="../../node_modules/vue/dist/vue.js"></script>
<script>
    let child = {
        template:'#child',
        mounted(){this.arr = [4,5,6]},//改变arr的值
        data:function(){
            return {arr:[1,2,3]};
        },
    };
    
    let vm = new Vue({
        el:'#app',
        data:{
        },
        mounted(){
            console.log(this.$refs.child.$el.innerHTML);//获取挂载到页面中的child子组件的innerHTML
        },
        components:{
            child:child,
        },
    })
</script>

整个过程是这样的：

• 我在子组件的mounted函数中，改变了arr的值，这会重新触发视图的渲染。
• 然后我紧接着在父组件的mounted函数中获取子组件的innerHTML。

然而结果是这样的。

于是开始的苦苦的探索之路。

我们一起来分析一下整个的执行过程：

• 首先，页面首次加载时，在子组件的mounted钩子函数之前，已经把$el挂载到了页面。
• 然后执行子组件的mounted函数，将arr的值改变，导致页面的重新渲染。
• 再然后执行父组件的mounted函数，将子组件的innerHTML打印出来。

答案就在页面的重新渲染这。执行完子组件的mounted函数后，会立即执行父组件的mounted函数。也就是说mounted之间的执行是同步执行的。但是我们的页面渲染是一个异步操作。也就是说在执行父组件的mounted方法时，页面还没有渲染完成，所以导致了打印结果的不一致性。

所幸的是vue给我们提供了一个全局的API：nextTick函数，该函数的功能是：

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

所以，我们对父组件的mounted做如下修改：

mounted(){
    this.$nextTick(() => console.log(this.$refs.child.$el.innerHTML))
    //console.log(this.$refs.child.$el.innerHTML)
},
//打印时异步渲染还未完成，所以打印的不是我们想要的结果.所以为保守起见,都为在执行mounted方法时添加一个this$nextTick()方法

 

大功告成，在实战中学习，在问题中学习就是这么爽。