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生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中，原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted钩子函数，因为该钩子函数执行时所有的DOM挂载已完成
• 当项目中你想在改变DOM元素的数据后基于新的dom做点什么，对新DOM一系列的js操作都需要放进Vue.nextTick()的
  回调函数中；通俗的理解是：更改数据后当你想立即使用js操作新的视图的时候需要使用它

vue2 使用$nextTick代码示例

<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
            }
         }
    }
 }

vue3 使用$nextTick代码示例

/*
在这个例子中，当 message 更新为 'Updated' 后，
nextTick 方法会在下一次 DOM 更新后执行，
此时它会打印出更新后的 DOM 元素的文本内容。
*/
<template>
  <div>{{ message }}</div>
</template>
 
<script>
import { ref, nextTick } from 'vue'

export default {
  setup() {
    const message = ref('Hello')
    function updateMessage() {
      message.value = 'Updated'
      nextTick(() => {
        // DOM 更新后的操作
        console.log(document.querySelector('div').textContent)
      })
    }
    return { message, updateMessage }
  }
}
</script>