vue中$nextTick 原理及应用

vue中$nextTick 原理及应用

原理

Vue 的 nextTick 其本质是对 JavaScript 执行原理 EventLoop 的
一种应用。
nextTick 的 核 心 是 利 用 了 如 Promise 、 MutationObserver 、
setImmediate、 setTimeout 的原生 JavaScript 方法来模拟对应的
微/宏任务的实现， 本质是为了利用 JavaScript 的这些异步回调任
务队列来实现 Vue 框架中自己的异步回调队列。

解释说明

nextTick 不仅是 Vue 内部的异步队列的调用方法， 同时也允许开发
者在实际项目中使用这个方法来满足实际应用中对 DOM 更新数据时
机的后续逻辑处理。
$nextTick 是 Vue.js 中的一个实例方法，它的目的是等待 Vue 完成更新 DOM 后执行某个操作。这在你需要访问更新后的 DOM 时非常有用。

应用场景

vue项目代码

<template>
    <div>
    	<div class="showConditionBtn" @click="changeCondition">
             <div v-if="showAllCondition"><div class="C_text">{{showAllCondition?'展开':'收起'}}</div></div>
        </div>
        <div id="search_module" v-if="showAllCondition" :style="{ paddingTop: paddingTopStr + 'px' }">
        	测试模块
        </div>
    </div>
</template>

export default {
    data() {
        return {
            showAllCondition: false,                // 展开收起判断条件
            paddingTopStr : 70
        };
    },
    methods: {
    	changeCondition() {
            this.showAllCondition = !this.showAllCondition
            if(this.showAllCondition) {
                // 访问DOM更新后的状态
                this.$nextTick(() => {
                    let divHeight = document.getElementById("search_module").offsetHeight;
                    divHeight = divHeight+75
                    this.paddingTopStr= divHeight
                });
            }else {
                this.paddingTopStr=70
            }
         }
    }
 }