$nextTick异步刷新

$nextTick异步刷新

this.$nextTick(cakkback)

作用：
处理vue中的异步刷新。
理解：
当数据更新时，在DOM渲染之后，会自动执行callback函数

下面用一段简单的代码演示一下

<template>
    <div>
        <div class="main">
            <p ref="ref_p">{{msg}}</p>
            <input type="button" v-model='title' @click="msgFn()">
        </div>
    </div>
</template>
<script>
    export default {
        name: "ceshi",
        data() {
            return {
                msg: 'AAAAABBBBBCCCC',
                title: '按钮'
            }

        },
        methods: {
            msgFn() {
                this.msg = '11112222333';
                console.log(this.$refs['ref_p'].innerHTML);
            }
        }
    }
</script>

此时控制台输出的是AAAAABBBBBCCCC。
我们都知道，js是单线程，代码同步执行，那么为何给msg赋了新值之后，在获取元素的内容却没有改变呢？
因为Vue.js执行DOM更新是异步的，只要监听到了需要更新DOM，vue会将这个更新事件缓存到事件循环中，这样为了避免不必要的多次计算和DOM操作。这个与浏览器引擎的事件队列有关，按照事件队列的顺序一个一个往下执行。
所以要解决这个问题，就用到了**$nextTick**。
我们把msgFn函数改变一下

            msgFn() {
                this.msg = '11112222333';
                this.$nextTick(() => {
                    console.log(this.$refs['ref_p'].innerHTML);//输出11112222333
                })
            }