Vue.js+Vuetify中textarea的scrollHeight取值异常问题

我完全懂你碰到的这个问题——用Vue的refs拿textarea的scrollHeight时数值不对，还不跟着内容更新，但直接用document.querySelector就能拿到正确值。这本质上是Vue异步更新DOM的特性导致的小坑，咱们来一步步解决它。

问题根源 #

Vue会把数据修改后的DOM更新操作放到异步队列里，不会立刻执行。如果你在修改内容后马上用refs去取scrollHeight，这时候DOM还没更新，拿到的自然是旧的、错误的数值。而document.querySelector有时候碰巧在你调用时DOM已经更新了，但这种方式既不优雅，也不符合Vue的最佳实践。

解决方案：用$nextTick等待DOM更新完成 #

Vue提供了$nextTick方法，它会在当前DOM更新循环结束后执行回调函数。这时候再通过refs获取textarea，拿到的就是更新后的DOM元素，scrollHeight自然是正确的。

下面是完整的修正代码示例：

<div id="app">
  <textarea 
    ref="textareaElement"
    v-model="textareaContent"
    @input="updateScrollHeight"
    placeholder="输入内容试试..."
  ></textarea>
  <div class="result">
    <p>通过Vue Refs获取的scrollHeight: <strong>{{ scrollHeightUsingRefs }}</strong></p>
    <p>通过document获取的scrollHeight: <strong>{{ scrollHeightUsingDocument }}</strong></p>
  </div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    textareaContent: '',
    scrollHeightUsingRefs: 0,
    scrollHeightUsingDocument: 0
  },
  methods: {
    updateScrollHeight() {
      // 等待DOM更新完成后再获取scrollHeight
      this.$nextTick(() => {
        const textareaRef = this.$refs.textareaElement;
        if (textareaRef) {
          this.scrollHeightUsingRefs = textareaRef.scrollHeight;
        }
        
        // 对比document方式
        const textareaDoc = document.querySelector('textarea');
        if (textareaDoc) {
          this.scrollHeightUsingDocument = textareaDoc.scrollHeight;
        }
      });
    }
  }
});
</script>

<style>
textarea {
  width: 100%;
  min-height: 50px;
  padding: 8px;
  box-sizing: border-box;
}
.result {
  margin-top: 16px;
}
</style>

关键注意点 #

• 确保refs绑定正确：给textarea加上ref="textareaElement"，然后通过this.$refs.textareaElement获取元素，别写错命名。
• 优先用Vue的API操作DOM：尽量避免直接用document.querySelector，Vue的refs是专门为组件内DOM操作设计的，更符合响应式逻辑。
• 如果是组件嵌套场景：如果textarea在子组件里，需要通过子组件的refs来获取，比如this.$refs.childComponent.$refs.textareaElement。

这样修改后，你就能通过Vue refs稳定获取到textarea最新的scrollHeight值了，而且会随着内容实时更新。

内容的提问来源于stack exchange，提问作者Taha Azzabi