Vue-nextTick的原理和使用

1、原理

        Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。简单来说，Vue在修改数据后，视图不会立刻更新，而是等同一事件循环中的所有数据变化完成之后，再统一进行视图更新。

2、定义

        在下次 Dom更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 Dom。所以就衍生出了这个获取更新后的Dom的Vue.nextTick()方法。它是将回调函数延迟在下一次dom更新数据后调用，简单的理解是：当数据更新了，在dom中渲染后，自动执行该函数。

3、vue是如何知道DOM更新？

        MutationObserver：这是HTML5新增的API。用于监视DOM变动的接口，它可以监听一个DOM对象上发生的子节点删除、属性修改、文本内容修改等

4、使用

        例如elementUI中的清空搜索框组件，当我们点击清空按钮之后，执行clearIconClick函数，这时的searchText仍然为未清空时的数据，如果想要根据搜索框未空时重新请求数据，就需要在$nextTick里面执行，如下所示：

<template>
    <el-input suffix-icon="el-icon-search" v-model="searchText" clearable :clear="clearIconClick"></el-input>
</template>

<script>
    export default {
        data() {
            return {
                searchText: '',
            }
        },
        methods: {
            clearIconClick() {
                console.log(this.searchText);    //仍然有数据
                this.$nextTick(() => {
                    // searchText数据更新，在dom中渲染后，执行该函数
                    console.log(this.searchText);    //这时打印才为""
                })
            }
        },
    }
</script>