$nextTick 方法会等待 DOM 结点更新完成之后再去执行。
nextTick 应用场景：
创建 Home.vue 页面，用于显示用户名称 点击编辑按钮显示输入框 并且自动获取焦点。
<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.$refs.content.focus(); // 获取输入框显示状态 console.log(this.$refs.content.style.display); // none } } } </script>
注：点击后输入框并未获取到焦点 并且输入框的显示状态为 none 隐藏。
原因：这是因为当事件执行后，Vue 会将所有的操作存放在一个队列中统一执行，全部执行完毕后再去更新 DOM 元素。所以当事件执行时，改变完 status 的状态之后，页面并没有立即更新，导致隐藏的元素不可以获取焦点。
原创作者：吴小糖
创作时间：2023.5.7
