vue之nextTick

Vue.nextTick( [callback, context] )

  • 参数：

    • {Function} [callback]
    • {Object} [context]

  • 用法：

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

    // 修改数据
vm.msg = 'Hello'
// DOM 还没有更新
Vue.nextTick(function () {
  // DOM 更新了
})
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id='app'>
        <App></App>
    </div>
    <script src="./vue.js"></script>
    <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.$nextTick(()=>{
                        this.$refs.pop.show();
                    })
                }, 1000);
            },
            components: {
                Pop
            },
            template: `<pop ref='pop' :name='name'></pop>`
        }
        const vm = new Vue({
            el: '#app',
            components: {
                App
            }
        })
    </script>
</body>

</html>

　　

posted @ 2020-11-13 10:40  你有我备注吗  阅读(128)  评论(0)  编辑  收藏  举报