$nextTick是啥vue实现响应式并不是数据发生变化后dom立即变化，而是按照一定的策略来进行dom更新。 $nex

vue实现响应式并不是数据发生变化后dom立即变化，而是按照一定的策略来进行dom更新。 $nextTick是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM

调用$nextTick

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title></title>
</head>

<body>
    <div id="app">
        <div ref="box">{{message}}</div>
        <input type="text" v-model="message">
        <world ref="world"></world>
    </div>
</body>
<script type="text/javascript">
    new Vue({
        el: '#app',
        components: {
            'world': {
                name: "world",
                template: '<div>{{msg}}</div>',
                data() { //
                    return {
                        msg: 'This is a Child Component1!'
                    }
                },
                methods: {
                    getData() {
                        console.log('我是子组件中的方法')
                    }
                },
            },
        },
        data: {
            message: 'hello vue.js.'
        },
        watch: {

        },
        computed: {
        },
        created() {
            console.log(this.$refs.box);
            // DOM 还没有更新
            this.$nextTick(function () {
                // DOM 更新了
                console.log(this.$refs.box);
            })
        },
        mounted() {

        },
        methods: {},
    });
</script>

</html>

nextTick作为一个 Promise 使用

            // 作为一个 Promise 使用 (Vue 不自带 Promise 的 polyfill,依据情况使用)
            this.$nextTick().then(function () {
                    // DOM 更新了
            })