vue中nextTick 的两种解决方法

最新推荐文章于 2023-07-26 09:55:06 发布

小吴吴吴呀

最新推荐文章于 2023-07-26 09:55:06 发布

阅读量452

点赞数 2

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/xiaowude_boke/article/details/130544815

版权

文章介绍了在Vue组件中，如何利用$nextTick方法确保DOM更新后执行后续操作，例如在切换编辑状态后自动聚焦输入框。相比于使用定时器来延迟执行，$nextTick是更推荐的解决方案，因为它更精确且与Vue的生命周期同步。

摘要由CSDN通过智能技术生成

像这种情况就可以使用 nextTick 解决 [推荐]

<template>
    <div>
        <h2>欢迎您！{{ name }}</h2>
        <button @click="edit">编辑</button>
        <input ref="content" v-show="status" type="text" v-model="name">
    </div>
</template>

<script>
export default {
    name: "Home",
    data() {
        return {
            name: "张三",
            status: false
        }
    },
    methods: {
        edit() {
            this.status = !this.status;
            // 等待页面渲染完毕后执行
            this.$nextTick(() => {
                // 显示输入框后自动获取焦点
                this.$refs.content.focus();
                // 获取输入框显示状态
                console.log(this.$refs.content.style.display);
            })
        }
    }
}
</script>

注：当事件触发后，会分为两次执行先执行 nextTick 外边的代码然后等 DOM 更新完毕后，再执行 nextTick 里边的代码.

第二种：使用定时器解决【不推荐】

当然使用定时器延迟执行也能解决这个问题。

<template>
    <div>
        <h2>欢迎您！{{ name }}</h2>
        <button @click="edit">编辑</button>
        <input ref="content" v-show="status" type="text" v-model="name">
    </div>
</template>

<script>
export default {
    name: "Home",
    data() {
        return {
            name: "张三",
            status: false
        }
    },
    methods: {
        edit() {
            this.status = !this.status;
            // 使用定时器延迟执行
            setTimeout(() => {
                // 显示输入框后自动获取焦点
                this.$refs.content.focus();
                // 获取输入框显示状态
                console.log(this.$refs.content.style.display);
            })
        }
    }
}
</script>

注：不需要给定时器设置时间，这样可以等 DOM 更新完毕后立即执行。但是更推荐使用 nextTick 解决。