vue 中的ref属性

在 Vue 中，ref 是一个非常重要的 API，用于获取 DOM 元素或组件实例的引用，并在 Vue 3 中引申为响应式数据的创建方式。

🔰Vue 中 ref 的基础用法

✅ 用于 DOM 引用（Vue 2 & 3 都支持）

<template>
  <input ref="myInput" />
</template>

<script>
export default {
  mounted() {
    this.$refs.myInput.focus(); // 访问 DOM
  }
}
</script>

• 在 Vue 2 和 Vue 3 中都可以通过 this.$refs.myInput 访问对应 DOM 元素或组件实例。

✅ 在 Vue 3 中用于响应式数据（Composition API）

import { ref } from 'vue'

const count = ref(0)

function increment() {
  count.value++
}

• ref(0) 创建一个响应式的变量。
• 使用 .value 访问或修改其值。
• Vue 会自动跟踪 .value 的变化并响应更新视图。

🎯 Vue 3 中响应式的两种方式对比

import { ref, reactive } from 'vue'

// 适用于基础类型
const count = ref(0)

// 适用于对象
const state = reactive({
  name: 'Alice',
  age: 25
})

⚙️ 使用 ref 的常见场景（Vue 3）

• 操作 DOM（如 focus、scroll）
• 获取组件实例的方法（如手动触发方法）
• 创建响应式的局部状态（尤其在组合式函数中）
• 与 watch 或 watchEffect 配合使用

vue2 和vue3的对比

🧩 创建和使用 ref

✅ Vue 2 - 仅用于 DOM/组件引用

<template>
  <input ref="myInput" />
</template>

<script>
export default {
  mounted() {
    this.$refs.myInput.focus()
  }
}
</script>

• ❌ 没有 ref() 响应式 API
• this.$refs.myInput 获取 DOM 或子组件实例

✅ Vue 3 - DOM + 响应式变量（Composition API）

<template>
  <input ref="myInput" />
</template>

<script setup>
import { ref, onMounted } from 'vue'

const myInput = ref(null)

onMounted(() => {
  myInput.value.focus()
})
</script>

• ref(null) 可用于 DOM，也可用于响应式数据
• .value 是关键：访问响应式内容或 DOM 节点

📦 响应式数据对比

✅ Vue 2 - 使用 data（Options API）

export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}

• 响应式由 Vue 自动处理，不能在 data 外创建变量响应式化

✅ Vue 3 - 使用 ref()（Composition API）

import { ref } from 'vue'

const count = ref(0)

function increment() {
  count.value++
}

• 可在任意作用域中定义响应式变量（组合式函数）
• value 访问响应式数据

🧩 组件引用对比

✅ Vue 2

<child-component ref="child" />

this.$refs.child.someMethod()

✅ Vue 3

<child-component ref="childRef" />

const childRef = ref(null)
onMounted(() => {
  childRef.value.someMethod()
})

📌 生命周期中访问 ref

✅ 完整对照示例

🔹Vue 2 示例（Options API）

<template>
  <div>
    <input ref="inputEl" />
    <p>{{ count }}</p>
    <button @click="increment">+</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  mounted() {
    this.$refs.inputEl.focus()
  },
  methods: {
    increment() {
      this.count++
    }
  }
}
</script>

🔹Vue 3 示例（Composition API）

<template>
  <div>
    <input ref="inputEl" />
    <p>{{ count }}</p>
    <button @click="increment">+</button>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const count = ref(0)
const inputEl = ref(null)

const increment = () => count.value++

onMounted(() => {
  inputEl.value.focus()
})
</script>

✅ 总结对比表