【vue2】ref和$refs获取dom元素 和 vue异步更新与$nextTick使用

在Vue 2中，ref 是一个特殊的属性，用于给元素或子组件注册引用信息。通过this.$refs可以访问这些元素和组件的实例。

获取DOM元素：

<template>
  <div>
    <input ref="inputRef" type="text">
    <button @click="focusInput">Focus Input</button>
  </div>
</template>
 
<script>
export default {
  methods: {
    focusInput() {
      this.$refs.inputRef.focus();
    }
  }
}
</script>

$nextTick 是在下次DOM更新循环结束之后执行的回调函数。常用于获取更新后的DOM或进行DOM相关操作。

异步更新数据后获取DOM元素：

<template>
  <div>
    <p ref="paragraphRef">{{ message }}</p>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      message: 'Hello'
    }
  },
  methods: {
    updateMessage() {
      this.message = 'Hello Vue!';
      this.$nextTick(() => {
        console.log(this.$refs.paragraphRef.innerText); // 更新后的文本
      });
    }
  }
}
</script>

在上面的例子中，当点击按钮后，我们更新了message，然后使用$nextTick来确保DOM已经更新，并且我们可以安全地访问this.$refs.paragraphRef。