vue学习（八）nextTick[异步更新队列]的使用和应用

nextTick的使用#

为了数据变化之后等待vue完成更新DOM，可以在数据变化之后立即使用Vue.nextTick()在当前的回调函数中能获取最新的DOM

<div id="app">
    <h3>{{msg}}</h3>
</div>

<script>
    let app = new Vue({
        el:'#app',
        data:{
            msg:'晓强'
        },
    })
    app.msg = '新的数据-晓强'
//    console.log(app.$el.textContent)
//    为了数据变化之后等待vue完成更新DOM，可以在数据变化之后立即使用Vue.nextTick()
    // 在当前的回调函数中能获取最新的DOM
    Vue.nextTick(()=>{
         console.log(app.$el.textContent)
    })
</script>

nextTick的应用#

看下面的代码

<div id="app">
<App></App>
</div>
<script>
    /*
    * 需求：
    *       在页面拉取一个接口，这个接口返回一些数据，这些数据是这个页面的一个浮层组件要依赖的，
    *       然后我在接口，一返回数据就展示了这个浮层组件，
    *       展示的同时上报一些数据给后台（这些数据是父组件从接口拿的）
    *       这个时候，神奇的事件发生了，虽然我拿到了数据了，但是浮层展现的时候，
    *       这些数据还未更新到组件上去，上报失败
    * */
    const Pop = {
        data() {
            return {
                isShow: false
            }
        },
        props:{
          name:{
              type: String,
              default:''
          }
        },
        template: `
        <div v-if="isShow">
            {{name}}
        </div>
        `,
        methods: {
            show() {
                this.isShow=true;
                console.log(this.name)
            }
        },

    };
    const App = {
        data() {
            return {
                name: ''
            }
        },
        created() {
            // 模拟异步请求
            setTimeout(()=>{
                this.name='晓强';
                this.$refs.pop.show();

            },1000)
        },
        components: {
            Pop
        },
        template: `<pop ref='pop' :name="name"></pop>`

    };

    let app = new Vue({
        el: '#app',
        components: {
            App
        },

    })
</script>

看下图一秒钟之后 页面显示 但是console.log没有内容

 

 

修改如下：

this.$nextTick(()=>{
      this.$refs.pop.show();
 })