Vue.js: Refs 与 DOM 操作

// ❌ 翻车版：直接 querySelector
onMounted(() => {
  const input = document.querySelector('.username-input')
  input.focus()  // ❌ 不符合 Vue 理念
})

// ❌ 不推荐：字符串 ref
export default {
  mounted() {
    this.$refs.input.focus()
  }
}

// 1. 访问 DOM 元素
inputRef.value  // <input> 元素

// 2. 调用 DOM API
inputRef.value.focus()
inputRef.value.blur()
inputRef.value.select()
inputRef.value.scrollIntoView()

// 3. 读取/修改 DOM 属性
inputRef.value.value  // input 的 value
inputRef.value.disabled  // disabled 属性
inputRef.value.style.color = 'red'  // 修改样式

// 4. 监听 DOM 事件（不推荐，用 @event）
inputRef.value.addEventListener('focus', handler)

// 5. 访问子组件实例（详见 17.4）
childRef.value.someMethod()

表单里两个输入框（占位符 Username / Password）和一个绿色「Login」按钮，下方灰色小字「打开页面自动聚焦到 Username 输入框」。
页面打开时光标已经在 Username 输入框里，可以直接打字。
填完点 Login → 控制台打印「Login: 用户名 密码」，页面不会刷新（@submit.prevent）。

一个固定 150px 高、可滚动的消息框，初始 3 条：「👋 欢迎来到聊天室」「这是历史消息 2」「这是历史消息 3」，下面是输入框和「发送」按钮。
输入文字后点「发送」或按回车 → 新消息追加到列表末尾、输入框清空、消息框自动滚到最底部。
输入为空时点发送不会有任何变化。

<!-- 旧写法：变量 ref -->
<template>
  <input ref="usernameInput">
</template>

<script setup>
const { ref, onMounted } = Vue
const inputRef = ref(null)  // 名字可能和模板不一致
onMounted(() => inputRef.value.focus())
</script>

<!-- 新写法：useTemplateRef（Vue 3.5+ 推荐）-->
<template>
  <input ref="usernameInput">
</template>

<script setup>
const { useTemplateRef, onMounted } = Vue
const inputRef = useTemplateRef('usernameInput')  // 一个名字搞定
onMounted(() => inputRef.value.focus())
</script>

<template>
  <MyInput ref="myInputRef" v-model="searchQuery" />
  <button @click="focusInput">Focus Input</button>
</template>

<script setup>
const { ref } = Vue
import MyInput from './MyInput.vue'

const searchQuery = ref('')
const myInputRef = ref(null)

function focusInput() {
  myInputRef.value.focus()  // 调用子组件暴露的方法
  myInputRef.value.select() // 也可以链式调用
}
</script>

页面上是两个输入框（Email、Password (≥6位)）和「Submit」按钮，初始没有任何提示文字。
空着点 Submit → 出现红色「❌ Invalid email」，光标跳到 Email 框。
填 a@b.com、密码填 123 再提交 → 红色「❌ Invalid password」；邮箱和 6 位以上密码都填好 → 出现绿色「✅ Validation passed!」。